How to Implement Social Login with AWS Cognito: A Step-by-Step Guide

Social login integration has become a must-have feature for many applications, allowing users to log in quickly and securely using their preferred social accounts like Google or Apple. In this article, I’ll walk you through the process of implementing social login using AWS Cognito, making it easy for others to follow.

Overview of the Flow

Below is the flow diagram showcasing the integration process:

The process starts with the user clicking on the social login button (Google or Apple). AWS Cognito and Lambda functions handle user verification, linking existing accounts, or creating new users based on the data provided.

Step 1: Google Developer Console Setup

Create a Google Project:
- Go to the Google Developer Console.
- Create a new project or select an existing one.
Enable OAuth 2.0:
- Navigate to APIs & Services > OAuth consent screen.
  - Set User Type to External.
  - Fill out app information, including app name, user support email, and authorized domains (e.g., example.com).
- Add the following scopes:
  - userinfo.email
  - userinfo.profile
  - openid
Create OAuth Credentials:
- Go to Credentials > Create Credentials > OAuth 2.0 Client IDs.
- Select Web Application as the application type.
- Add the redirect URIs:
  - http://localhost:3000
  - https://www.example.com
  - https://auth.example.com/oauth2/idpresponse
Save the Client ID and Secret:
- After creating the credentials, note down the Client ID and Client Secret.

Step 2: Configure Cognito with Google

Add Google as an Identity Provider:
- In the Cognito User Pool, navigate to Federation > Identity Providers > Google.
- Enter the Client ID and Client Secret from the Google Developer Console.
- Add scopes: openid, profile, email.
Map User Attributes:
- Map Google attributes (e.g., email, name) to Cognito attributes.
Set Up the Hosted UI:
- In App integration, configure the following:
  - Callback URLs: Ensure they match your redirect URIs.
  - Identity Providers: Select Cognito User Pool and Google.
  - OAuth 2.0 grant types: Enable Authorization code grant.

Step 3: Apple Developer Setup

Register an App in the Apple Developer Portal:
- Go to Apple Developer Portal.
- Register a new identifier under Certificates, Identifiers & Profiles.
- Enable "Sign In with Apple" for your app.
Create Service IDs and Keys:
- Generate a Service ID, Key ID, and download the private key.
- Configure return URLs to match Cognito’s callback URLs.
Save the Credentials:
- You will need the following:
  - Client ID (Service ID)
  - Team ID
  - Key ID
  - Private Key

Step 4: Configure Cognito with Apple

Add Apple as an Identity Provider:
- In the Cognito User Pool, navigate to Federation > Identity Providers > Apple.
- Enter the Client ID, Team ID, Key ID, and Private Key from the Apple Developer Portal.
Set Callback URLs:
- Ensure the callback URLs are consistent between Cognito and the Apple Developer Console.

Step 5: Test the Integration

Enable Social Logins in Your Frontend:
- Add buttons for Google and Apple login.
- Use the Hosted UI URL from Cognito to redirect users.
Verify the Flow:
- Test both Google and Apple logins to ensure users are created, linked, or authenticated correctly.

Key Notes and Best Practices

User Privacy: For Apple logins, ensure you respect users’ choices to hide or share their email.
Custom Domain: Use a branded domain for the Cognito Hosted UI to provide a polished user experience.
Error Handling: Implement proper error messages for scenarios like expired tokens or invalid credentials.

Conclusion

Integrating social login with AWS Cognito can greatly enhance the user experience by simplifying the login process. By following the steps outlined above, you can implement this feature securely and efficiently.

If you found this guide helpful or have any questions, feel free to share your thoughts in the comments! Happy coding! 🚀