React Native Signin and Signup with AWS Cognito

Published in

AlturaSoluciones

6 min readMar 16, 2018

Why AWS Cognito?

AWS Cognito is an Amazon platform that allow us to abstract all the backend of user management process using cloud services and lets you focus on Signin/Signup frontend process of your app. This is perfect for the purpose of this article, that is to demonstrate how to create a basic Authentication using React Native without worrying about the backend. If you are starting learning React Native this article is the perfect fit for you. We will go through how to implement a basic Authentication app using React Native and connecting the backend to it. After you tackle the frontend side of your app and you are comfortable doing it you can build your own backend from scratch.

AWS Cognito User Pool creation and configuration

First get access to your Cognito workspace in AWS and create a new User Pool and give it the name rnCognitoDemo.

Creating the User Pool

Then make sure that in the following steps you configure the User Pool as shown in the following images.

No need for custom attributes so just click Next step.

Do not enable Multi Factor Authentication and set verification to email only

Email verification messages customization not needed

Now we need to add a client app to access the User Pool. Click on Add an app client and follow the steps as shown in the images.

Is very important in this step that we uncheck the option Generate client secret so the application works out of the box without further configuration.

After creating your App client proceed with the User Pool creation.

Finally press on Create Pool in the Review step.

Creating the Federated Identity

Now that we have created the User Pool we need to create a new Identity Pool in the Federated Identities Panel.

Click on Federated Identities and the in Create new Identity Pool. Provide the name of your project rnCognitoDemo and then select Authentication Providers and in the Cognito Tab provide the User Pool Id and the App client id from the recently created User Pool. On the next screen select the default permissions and you are good to go.

Getting the necessary values

Finally we need the following values to configure our React Native app connection to AWS Cognito.

identityPoolId: '<Cognito Identity Pool ID>',
region: '<Region>',
userPoolId: '<Cognito User Pool ID>',
userPoolWebClientId: '<Cognito App Client ID>'

These values are in different places. First we go to General Settings of our just created User Pool.

Here you get the Pool Id value that corresponds with userPoolId and the region value is the prefix of this same value something like us-east-2.

The userPoolWebClientId is the App client id that you can get from your App clients tab on the left.

The last value that you need is the identityPoolId that you can find in the Dashboard of your Federated Identities panel. Copy the value that is under the label Authentication methods and you are done.

Initial setup of React Native project

Before creating our app we need to setup everything according to Facebook’s Getting Started Guide.

After installing packages according to previous guide let’s just create our React Native App:

$ create-react-native-app rn_aws_cognito_demo

I also recommend installing react-native-scripts on your project:

$ cd rn_aws_cognito_demo
$ npm i react-native-scripts

Install all packages on the new created project:

$ npm install / yarn install

Install AWS Amplify package:

$ yarn add aws-amplify
$ yarn add aws-amplify-react-native

This step is not mandatory but I recommend to modify your app.json file with the following values to avoid Expo’s warnings:

{
  "expo": {
    "name": "My app",
    "slug": "my-app",
    "sdkVersion": "25.0.0 or corresponding version",
    "privacy": "public"
  }
}

Now let’s run our app to see if everything is ok:

$ yarn run ios  # or yarn run android

Configuring AWS Cognito on React Native project

Create a file in src/aws-exports.js with the following content:

const awsConfig = {
  identityPoolId: '<Cognito Identity Pool ID>',
  region: '<Region>',
  userPoolId: '<Cognito User Pool ID>',
  userPoolWebClientId: '<Cognito App Client ID>'
}

export default awsConfig;

Note: fill the values with the ones configured in your Amazon Cognito account.

Let’s modify App.js with a content like the following:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Amplify from 'aws-amplify';
import awsConfig from './src/aws-exports';

Amplify.configure(awsConfig);

import { withAuthenticator } from 'aws-amplify-react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

export default withAuthenticator(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

After this you should some default Signing/Signup layout and be able to create a new user account and make Signing with their credentials.

First let’s Sign Up a new user:

AWS Cognito should send you an confirmation code email like this one:

Enter this code in Sign Up Confirmation Screen along with your username:

After Signing Up let’s Sign in with our recent created credentials:

After Signing in you should see the default App.js layout:

Conclusion

In this article we explained how to setup a basic Sign Up/Sign feature for a React Native app using Amazon Cognito as User management backend. I created a demo app on this repository:

albertoaa/rn_aws_cognito_demo

rn_aws_cognito_demo - Demo of how to signing and signup on a React Native app with AWS Cognito

github.com

If you have any question let me know or leave a comment.

Author: Eng. Alberto Aragón Alvarez

https://www.linkedin.com/in/albertoaragonalvarez/
alberto@alturasoluciones.com
https://twitter.com/aragonalvarez85