Follow us

AWS Cognito - Facebook integration(login with Facebook)

AWS Cognito user pool, instead of using sign up process, if we want to use third party provider for sign in then you should configure this using Identify provider option and in this case we trying to use Facebook integration provide with AWS Coginito, so that end user can use their existing Facebook login to login into your website.

But before we begin here, we first have to create/configure account on third party provider and then same need to be configure here. Like in case of Facebook, we need to create developer account on Facebook which we then need to configure here.

 

User Pools Federated Identities 
Dev 
General settings 
Users and groups 
Attributes 
Policies 
MFA and verifications 
Advanced security 
Message customizations 
Tags 
App clients 
Triggers 
Analytics 
App integration 
App client settings 
Domain name 
UI customization 
Resource servers 
Federation 
Identity providers 
Attribute mapping 
Do you want to allow users to sign in through external federated identity providers? 
Select and configure the external identity providers you want to enable You will also need to choose which identity providers to enable for each app on the Apps settings tab under App 
integration. Learn more about identity federation with Cognito user Pools 
O 
Facebook 
Go to summary 
O 
Google 
O 
OpenlD Connect 
O 
Login vith Amazon 
O 
Sign in vith Apple 
Configure attribute mag

  

Demo:

  1. Create developer account with faceboook  (https://developers.facebook.com/)
  2. Create new app and then from basic setting, copy app id and secret which you would require with AWS cognito to setup. With basic tab, do setup other things i.e.
    1. With App domains : enter the Cognito domain. (refer previous article to know about app domain).
    2. +Add platform and select website and provide Cognito domain url with sub directory "/oauth2/idpresponse".

C developers.facebaok.cam/apps/l 
FACE BOO K for Developers 
7/settings/basic/ 
In development 
Display Name 
AWS Cognito_lntegration 
App Domains 
Tools 
o 
AWS_Cognito_lntegr... 
Dashboard 
Settings 
Basic 
Advanced 
Roles 
Alerts 
APP ID: 
My Apps 
App Secret 
Namespace 
Contact Email O 
sarajeevraj@gmail.com

 

Settings 
Basic 
Advanced 
Roles 
Alerts 
@ App Review 
Products 
Facebook Login 
State/Province/Region 
Country 
United States 
Website 
nttps:/ 
Add Product 
ZIP/postal code 
.a utm us-east-I _ amazoncognito_co m/oauth2/idpresponse 
+ Add Platform 
Quick Start 
x

  1. Add facebook login: From products list select facebook login(if this is not available then click on add product and then select facebook login) and then from setting, add valid Oauth redirect url(your Cognito domain url with sub directory "/oauth2/idpresponse"):

Dashboard 
Settings 
Roles 
Alerts 
App Review 
Products 
Facebook Login 
Quickstart 
Force Web OAuth Reauthentication 
in to Icq in 
web 
Strict Mode for Redirect URIS 
Embedded Browser OAuth Login 
O Auth Login. [71 
Only redirects ttut SDK Valid OAuth Redir82t URI. Strongly 
Valid OAuth Redirect URIS 
Lcu;in from Devices 
Enobleg the OAuth client l%in 
nartTV 
De authorize 
Deauthorize Callback URL

 

  1. Now login to AWS console and go to Cognito server, select manager user pool and open existing user pool or create new pool.
  2. From App and client setting app integration, select Facebook and save:

aws 
Services 
User pools I Feaeraled loanuuas 
Dev 
General settings 
Users and groups 
Attributes 
Policies 
MFA and verifications 
Advanced security 
Message customizations 
Tags 
App clients 
Triggers 
Analytics 
App integration 
App client settings 
Q S„ssrch for services: features: marketplace products: end docs 
What identity providers and OAuth 2 
Each of your app clients can use different identity providers and OAuth 2.0 settings. YO' 
App 
ID Ibrl 
Select all 
Enabled Identity Providers 
Facebook [Y Cognito User Pool 
Sign in and sign out URLs 
Enter your callback URLs below that you will include in your sign in and sign out re 
Callback URL(s)

  1. From Identity provider, select facebook and provide app id and secret key you copied from Facbook App you created for this and in Authorize Score, provide what information you would like to capture from end user on login, so in this case, I am trying to capture "public_profile" and "email":

-ser Fc•clsl Federated Identities 
Dev 
ætings 
and groups 
MFA 
Advanæd —i ty 
App clients 
App 
App client ættings 
00 n 
entity 
Attrib.te m a p ping 
Do you want to allow users to sign in through external federated identity providers? 
Select and entity to will rQd to chE-se which Zentit" esch app on ætings u&rAgg 
•teg,ætion. more —bout entity with Cognito 
O 
Facebook 
Facebook 
You in —pp using their 
Leam sign in 
O Google 
OpenlO Connect 
app 10 
App 
O Login with Amazon 
O 
Sign in with Apple 
U *ate

  1. Provide attribute mapping(fields mapping - Facebook vs AWS Congnito form attributes). This will be captured from facebook during end user login with Facebook:

ætings 
How do you want to map identity provider attributes to user pool a 
and groups 
In to the right to Attributes entity to 
this CGnito Attribute mye About Attribute 
MFA 
Apple 
Advanæd —i ty 
yupports ÆÆions of APIs 212 You un of AFI the Ettribute mi 
seeted and f.æbook —pi 
App clients 
App n 
App client ættings 
00 n 
u I OXO m i 
Fed 
Identity 
Attrib.te Aping 
F attribute 
birthdsy 
last 
token 
attribute

  1. Now to test the sing in url, use below format to prepare your url and use same into browser and it should open sign in page.

https://[your_cognito_domain_url]/login?response_type=token&client_id=[your_cognito_app_client_id]&redirect_uri=[your_callback_url_same_you_provided_earlier_with_cognito_setup]

Here response_type=token, which after a successful sign-in, Amazon Cognito returns user pool tokens to your web browser's address bar.

https://myprimeacademy.auth.us-east-1.amazoncognito.com/login?response_type=token&client_id=1br16okq4pn5d1tp2e3c3mfab4&redirect_uri=https://www.DiscoveryHub.in/About

myprimeacademy.a uth.us-east-l .amazoncog n d = 
redirect_uri= https:// 
Sign In w- 
soc 
unt 
Continue with Facebook 
We won't post to any of your accounts without asking first 
Sign in with your email and password 
Email 
name@host.com 
Password 
Password 
Forgot your password? 
Sign in 
Need an account? Sign up

Post, successful login, it will redirect back to your callback url alogin with token information in query string:

DiscoveryHub.in/About#access_token=eyJraWQiOi13UjcxZOMvva- 
y Prime Academy 
believe in exploring, enforcing and sharing 
HOME 
A 
-ARTICLES 
TECHNOLOGIES v 
ABOUT US 
ABOUT US 
Our aim is to provide latest updates on various technologies, tools & latest tren( 
have no. of years' experience in different fields / technologies and sometime sti 
opportunity of learning, explore, stretching our self and the most important to 
current world peoples are too busy and do not have time to read the latest tech

  1. Successful Facebook logged in user, you can find in Cognito app pool users and group:

user Pools 
Dev 
Federated Identities 
ætings 
and g rou% 
MFA 
Advanæd —i ty 
App clients 
Tri geÆ 
Group 
Import 
Search v 
Email 
Enabled 
A nt statu s 
CONFIRMED 
EXTERNAL PROVIDER 
Email

Categories/Tags: AWS Cognito~Facebook integration

Recent Articles

1

AWS Saving Plan - Cost optimization tips

2
3

AWS RDS Key Concepts & Why you should use it?

4
5

Open-Search/Kibana - Multi Tenancy Setup

See All Articles