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). Back in January, Jessica Mowatt explained how our Serverless framework was constructed from (fairly) simple YAML files.

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.

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

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

Next select ‘Add an app client’ and complete the page as below.

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.

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

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

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.

Article by Joseph Clough, React Developer at The Distance