Setting up AWS Cognito and React Native to enable Federated SSO

We have already outlined our automated deployment of The Core through serverless YAML files. Unfortunately, the process of setting up SSO is not so easy.

I would like to add a note here to warn you that there is a lot of set up involved. We will focus on setting up a Facebook SSO using AWS Cognito User Pools. We also implemented this feature using Google.

As previously mentioned, we have implemented the set up of our Cognito User Pools into our tech stack however, the problem we face here is that SSO requires a lot of manual set up that cannot be pre configured. On top of this, User Pools do not immediately support federated identities in the same way Identity Pools do. Here I am going to outline the steps needed to create an SSO capable Cognito User Pool manually.

Presuming that you already have an AWS account, sign in and head over to Cognito. We are going to be implementing a User Pool so select ‘Manage User Pools’ and ‘Create a User Pool’.

Once you have selected ‘Review defaults’ we are going to change one section only. Select ‘Choose username attributes’ and on the next page change the selection to ‘Username’ and ‘Also allow sign in with verified email address’.

Select ‘Review’ and ‘Create pool’. Now we have successfully created our User Pool we must configure it for use with the AWS Hosted Domain (more on this later).

Before we can carry on we need to add a domain name to our User Pool. Head on over to ‘Domain name’ and follow the form on the page to register a domain name. We will need this when we set up our app with Facebook.

Now we need to configure a Facebook app to work with our User Pool. At Facebook Developers create a new app and add login as a product. On the quickstart screen and select ‘Web’.

Click ‘Save’ and head over to ‘Settings’ under ‘Facebook login’ on the left hand menu. Here add the following and ‘Save Changes.

Finally, under ‘Settings’ and ‘Basic’ and the ‘App Domain’ and ‘Save Changes’.

Before we leave the Facebook developer console, make a note of the ‘App ID’ and ‘App Secret’ and head back to AWS Cognito. Here select ‘Identity Providers’ and ‘Facebook’. Add the ‘App ID’ and ‘App Secret’ here as well as ‘public_profile,email’ under ‘Authorize scope’. Select ‘Enable Facebook’ and select ‘Attribute mapping’.

Now select all of the attributes to map to the User Pool. For example, this is what I selected.

Remember when I said this was long? We’ve nearly completed the setup of Cognito but first we must configure our App Client. Here is an example.

Here we have a ‘Callback URL’ which will be used to redirect to our App. For now I have filled this in with a localhost address.

Now we have FINALLY configured Cognito we can begin to use the Hosted UI. The Hosted UI is a flow provided from AWS to handle redirects. We can use this in its current state by going to the URL ‘https://example-sso.auth.eu-west-2.amazoncognito.com/login?redirect_uri=http://localhost:3000&response_type=code&client_id=7snsn7e3t77h0uennvevq1tgb8’.

This URL is composed of your domain name, the redirect_uri, response_type and client_id. Make sure that they all match your Cognito settings. Now we can use the Hosted UI.

Next we will look at how we can implement this into a React-Native app. Don’t worry, we will improve the flow and aim to provide a better user experience. Look out for my next post in the coming weeks.