Insight

Setting up AWS Cognito and React Native to enable Federated SSO

Photo of Anthony Main

Anthony Main

founder

June 14, 2019

published

Part one: The backend

Introduction

As part of our continued development of The Core, our in-house framework for building market leading, scalable and sustainable full-stack apps, we have utilised Serverless and Amazon Web Services (AWS).

The next step for our services (backend) framework was custom authorisation flows. Here we decided to develop a federated Single Sign On (SSO) flow for our customers which could easily be deployed along with The Core Services.

Image

Going cognito

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’.

Image

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’.

Image

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).

Image

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.

Image

Getting Social

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’.

Image

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

Image

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

Image

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’.

Image

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

Image

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.

Image

Going Native

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.

 
contact us

Apply theses insights

Contact us to discuss how we can apply theses insights to your project