How do you allow new user registration and sign up through a third party, like Facebook, using AWS Cognito?

Question

In my Angular/NodeJS app, I'm currently using AWS Cognito to manage my users. It lets users register with their email address, and sign in with their email and password.

I would like to allow users to register and sign in using third parties, like Facebook and Google. That is, by logging into their Facebook account, a user account on Cognito would be created for them, similar to the accounts for any other users.

There is no clear documentation on AWS how to do this. The closest thing I could find is here (code below) but this only covers temporary authentication, and doesn't create a new user account in the user pool.

How can you integrate third party auth with an existing Cognito based app?

button id="login">Login</button>
<div id="fb-root"></div>
<script type="text/javascript">
var s3 = null;
var appId = '1234567890'; // Facebook app ID
var roleArn = 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>';

window.fbAsyncInit = function() {
  // init the FB JS SDK
  FB.init({appId: appId});

  document.getElementById('login').onclick = function() {
    FB.login(function (response) {
      if (response.authResponse) { // logged in
        AWS.config.credentials = new AWS.WebIdentityCredentials({
          RoleArn: roleArn,
          ProviderId: 'graph.facebook.com',
          WebIdentityToken: response.authResponse.accessToken
        });

        s3 = new AWS.S3;

        console.log('You are now logged in.');
      } else {
        console.log('There was a problem logging you in.');
      }
    });
  };
};

// Load the FB JS SDK asynchronously
(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>

score 1 · Accepted Answer · answered Jan 05 '18 at 14:57

1

You can easily do so by configuring social providers like Facebook, Google etc. directly in your userpool. See this doc on how to do so. Note that you also need to add mappings between Userpool attributes & token claims returned from Idps like Google & Facebook. You can see how to do so here. Note that in order to use Third-party signin, you need to use Cognito Userpool's app integration feature. The easiest way to do so would be to use Cognito Userpool's hosted (built-in) UI. The UI can be accessed by entering your Userpool's domain URL with appropriate parameters (the parameters part is especially important).

AWS provides a Javascript SDK - Amazon Cognito Auth SDK - to use their app integration feature which makes it easier to use third-party IdPs like Google & Facebook. Note that this SDK is a simple Cognito client SDK and is different from core AWS JS SDK & Amazon Cognito Identity SDK. Take a look at the sample & use cases described on the Github page.

If everything is setup correctly, when you login using Google, facebook etc., a new user will be auto-created by Cognito with the info available in the token returned by Google, Facebook etc.

answered Jan 05 '18 at 14:57

agent420

3,291
20
27

I've tried this. I've read that document from Amazon. However it only explains how to set up Facebook as a provider from the Cognito UI, but not how you actually implement it in your frontend code. In my frontend Angular app, how does Facebook login work? The user logs in through Facebook SDK, gets a FB token.... and then what? – CodyBugstein Jan 05 '18 at 17:06
1

You are not supposed to use Facebook SDK. You use Cognito's hosted UI; click on 'Login with Facebook' & you would be redirected to Facebook Login page. Enter your password & you would be redirected to your app with the tokens as part of the URL – agent420 Jan 05 '18 at 17:09
Do you have a link on how to do that? – CodyBugstein Jan 05 '18 at 17:14
1

Also what if I want to use my own UI? Is there a way to do that? – CodyBugstein Jan 05 '18 at 17:14
To test this out, open the hosted UI. It should be https://.auth..amazoncognito.com/login?redirect_uri=&response_type=token&client_id= – agent420 Jan 05 '18 at 17:16
Thank you very much! Very kind of you! I will give this a try! – CodyBugstein Jan 05 '18 at 17:21
I will use the hosted UI page, but for the future I am curious if there is a way to do this with a completely custom UI. In the stackoverflow link you share, you suggest that the Facebook button should like to Cognito, but that's not really a solution. Either thank you so much for your help – CodyBugstein Jan 05 '18 at 17:23
In the custom UI solution, although you link your custom Facebook button to Cognito, clicking on it will directly lead u to Facebook login. You won't see the Cognito UI – agent420 Jan 05 '18 at 17:25
And what about a custom UI that has a username/password form, AND a Facebook login button? – CodyBugstein Jan 05 '18 at 17:31
1

U mean a form for login using Native userpool accounts alongwith a button for facebook login? For these native userpool accounts, use the cognito identity SDK. For Facebook use the redirect method. – agent420 Jan 05 '18 at 17:33
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162677/discussion-between-codybugstein-and-agent420). – CodyBugstein Jan 07 '18 at 06:24

How do you allow new user registration and sign up through a third party, like Facebook, using AWS Cognito?

1 Answers1