1. Answers
  2. Enabling Social Login Buttons in AWS Cognito User Pool UI

How do I enable social login buttons in AWS Cognito User Pool UI?

Enabling Social Login Buttons in AWS Cognito User Pool UI

In this example, we will set up an AWS Cognito User Pool and enable social login buttons for Sign in with Google and Sign in with Facebook. AWS Cognito User Pools are great for managing user identities and supporting multiple authentication providers easily within your applications.

What we will do:

  1. Create an AWS Cognito User Pool.
  2. Set up social identity providers (Google and Facebook) for the user pool.
  3. Configure the user pool client to use these providers.
  4. Enable the social login buttons in the user pool UI.

Detailed Walkthrough

Below is the complete example that we will walk through:

import * as pulumi from "@pulumi/pulumi";
import * as aws from "@pulumi/aws";

const example = new aws.cognito.UserPool("example", {
    name: "example_pool",
    passwordPolicy: {
        minimumLength: 8,
        requireLowercase: true,
        requireUppercase: true,
        requireNumbers: true,
        requireSymbols: true,
    },
    autoVerifiedAttributes: ["email"],
    adminCreateUserConfig: {
        allowAdminCreateUserOnly: true,
    },
});
const exampleUserPoolClient = new aws.cognito.UserPoolClient("example", {
    userPoolId: example.id,
    name: "example_client",
    explicitAuthFlows: [
        "ALLOW_ADMIN_USER_PASSWORD_AUTH",
        "ALLOW_CUSTOM_AUTH",
        "ALLOW_USER_PASSWORD_AUTH",
        "ALLOW_USER_SRP_AUTH",
        "ALLOW_REFRESH_TOKEN_AUTH",
    ],
    callbackUrls: ["https://YOUR_APP/callback"],
    supportedIdentityProviders: [
        "COGNITO",
        "Google",
        "Facebook",
    ],
    allowedOauthFlows: ["code"],
    allowedOauthScopes: [
        "email",
        "openid",
        "profile",
    ],
    allowedOauthFlowsUserPoolClient: true,
});
const google = new aws.cognito.IdentityProvider("google", {
    providerName: "Google",
    userPoolId: example.id,
    providerType: "Google",
    attributeMapping: {
        email: "email",
        username: "sub",
    },
    providerDetails: {
        client_id: "YOUR_GOOGLE_CLIENT_ID",
        client_secret: "YOUR_GOOGLE_CLIENT_SECRET",
        authorize_scopes: "email profile openid",
    },
});
const facebook = new aws.cognito.IdentityProvider("facebook", {
    providerName: "Facebook",
    userPoolId: example.id,
    providerType: "Facebook",
    attributeMapping: {
        email: "email",
        username: "id",
    },
    providerDetails: {
        client_id: "YOUR_FACEBOOK_APP_ID",
        client_secret: "YOUR_FACEBOOK_APP_SECRET",
        authorize_scopes: "email public_profile",
    },
});
export const userPoolId = example.id;
export const userPoolClientId = exampleUserPoolClient.id;

Key Points:

  • User Pool: Handles registrations and authentication.
  • Identity Providers: Configurations for Google and Facebook.
  • User Pool Client: Application configuration to integrate with Cognito.
  • Attribute Mapping: Maps claims from the identity provider to user pool attributes.

Summary

In this guide, we created an AWS Cognito User Pool, set up Google and Facebook as identity providers, and configured a user pool client to enable social login buttons. This allows users to sign in using their social media accounts, providing a seamless authentication experience.

Deploy this code

Want to deploy this code? Sign up for a free Pulumi account to deploy in a few clicks.

Sign up

New to Pulumi?

Want to deploy this code? Sign up with Pulumi to deploy in a few clicks.

Sign up