Enable Social Login AWS Cognito: Add Facebook Login
Your web and mobile app users can sign in through social identity providers (IdP) like Facebook, Google, Amazon, and Apple. With the built-in hosted web UI, Amazon Cognito provides token handling and management for all authenticated users, so your backend systems can standardize on one set of user pool tokens. — AWS DOCS
This is an awesome feature AWS has provided, especially the “Sign-in with Apple” part since Apple requires all app that every app that involves 3-party login to support “sign-in with apple” and, with Cognito, you don’t need to add anything to your app but credentials from Apple to Cognito!
Now, in this article, I will walk you detailedly through setting up “sign-in with Facebook” to AWS Cognito User Pool to help you accomplish this feature faster and easier since AWS’s Docs on this regard is “minimal” with do not even include a single image! And seem a little outdated since the developer consoles has already been renovated.
Jun 2022, updated with new Amazon Cognito console and other contents
Try the demo out!
Step 1: You need Cognito User Pool and A Facebook account (Obviously)
Mark down the url you created in the Cognito User Pool, and here is: https://demosociallogin.auth.us-east-1.amazoncognito.com which is called user-pool-domain
Currently there’s no “sign-in with Facebook” option.
Now Login to Facebook Developer console with your Facebook account and prepare for the next step.
Step 2: Create A new (or with your already created app) and apply needed configuration for your Cognito User Pool
Navigate to My app tab and click Add a new app (now is the green button) or go into your already created app.
Choose the type and input the details of your app and hit “Create App ID”.
And then navigate to the “Setting -> Basic” tab.
Take a note at your “App ID” and “App Secret” which we will need later in Cognito console and will mention them as “Facebook-app-id” and Facebook-app-secret” to avoid misunderstandings.
Then scroll to the bottom of the page and click “Add Platform” at the bottom of the page.
Choose Website
Then type this under “Site URL”: https://<user-pool-domain>/oauth2/idpresponse which is https://demosociallogin.auth.us-east-1.amazoncognito.com/oauth2/idpresponse here.
And then hit “Save Changes”
Scroll back to the top and enter https://<user-pool-domain> into “App Domains”
And “save changes”
By this time “Facebook Login” should appear on your left navigate bar, and if it didn’t, navigate to to “Dashboard” and scroll down and find “Facebook Login” and click setup.
Navigate to “Product -> Facebook Login -> Settings” and fill the “Valid OAuth Redirect URIs” with https://<user-pool-domain>/oauth2/idpresponse which is https://demosociallogin.auth.us-east-1.amazoncognito.com/oauth2/idpresponse here. And “save changes”.
Step 3: Configure “Facebook Login” in Cognito console
Go to the Amazon Cognito Console and choose the user pool you which need to be configured.
Navigate to the “Sign-in experience” tab and click “Add identity provider” under “Federated identity provider sign-in”.
Choose “Facebook”. Fill in the details “App ID” and “App secret” you noted earlier inside Facebook developer console. And type in the desired “Authorize scope” which can be refer in Facebook developer Docs and remember that “public_profile” is always required. Click “Add identity pool”
And you can configure ”Attribute Mapping” as needed. Make sure required attributes has be mapped, e.g. email
Now, go to the “App client”, “Edit Hosted UI” and make sure “Facebook” is enabled as an Identity Provider.
Now everything has been finished, wait for some time and then, the magic happens.
Congratulations! You have now add Facebook login to your app.
Try demosociallogin.victorhzhao.com for the demo of this tutorial.
If you found this article helpful, please do not hesitate in sharing it and follow me. Claps and commands are also welcomed! Thank you for reading it.
