Quickest way to add Authentication to your react native app

I have been building React native applications solidly for the past year and dabbling in it for a few years more.

React native is a great tool released by Facebook for building mobile apps for both Android and IOS, it allows you to get up to speed really quick and allows you to cross train as you don’t need dedicated IOS or Android developers.

Since most apps, need some form of Auth a way of bolting on authentication really quick, will be a great win. I have used a few libraries in the past for authentication e.g Firebase but by far the quickest one I have used and this is because it has its own dedicated React Native (& also React) components for Login, Logout and password resets is AWS Amplify Authentication.

AWS Amplify Authentication module provides Authentication APIs and building blocks for developers who want to create user authentication experiences.

Behind the scenes Amplify uses AWS Cognito, which is a full-featured user directory service to handle user registration, storage, authentication, and account recovery.

Technologies Used

So let us get started, before we get to any coding here are the prerequisites.

• Install Node.js® and npm if they are not already on your machine.
• Create React Native App (only needed if you don’t have an existing app).

$ npm install -g create-react-native-app

• An AWS account , don’t worry there is a free 12 month tier.
• Amplify cli

$ npm install -g @aws-amplify/cli
$ amplify configure

• Iphone simulator and Android Emulator, to run the mobile apps
  These are bundled with Xcode and Android Studio

Create a new project

If you want to add auth to an existing app, then skip to the next section.

$ create-react-native-app myAuthProject$ cd myAuthProject && react-native run-ios

You would get something similar to the screen above.

Now I know it is not much to look at, but let us assume this is our fancy app and this screen should only be visible to the user once they are signed in.

Adding Auth Backend setup

Now we need to add auth, from the terminal/command line run this command (make sure you are in your myAuthProject or existing app root folder).

First off we need to initialise our project as an AWS amplify project, this will allow us to bolt on all the features we need.

$ amplify init

Follow the wizard, select JavaScript, then React Native when it prompts you for you app details. This command will download an amplify folder to your app, which has some configuration details in it.

Once you have that setup, run the following commands. This will add auth capabilities to your app, modifying the amplify folder. The push command pushes the updates you made to your AWS cloud configuration.

amplify add authamplify push

Now we have our backend all ready to start receiving our auth requests from the mobile app.

Adding Auth Front-end setup

If you followed the steps above, you should have a folder structure similar to this.

We just need to quickly install some libraries to in our react native app.

$ npm install --save aws-amplify$ npm install --save aws-amplify-react-native

Why the two libraries, you may ask?

aws-amplify provides more generic AWS tooling like Auth, while aws-amplify-react-native provides more specific tooling for React Native, like components for Auth, Storage, Interactions etc

Open up the App.js file in any text/code editor, add the following lines to the top of the file.

import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);

We are importing the default export from the aws-amplify library, and importing the downloaded aws-exports.js file, which contains all our back end config, and passing that as an argument to our local Amplify installation this creates the glue between our front end and cloud based backend we created in the previous step.

Using the withAuthenticator Higher Order Component

Quick aside on Higher Order Components, these are basically functions which take a component as an input and return a new component. If you have used Redux connect, React Natvigations withNavigator etc.

We import the withAuthenticator component/function.

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

then we pass our App component to the withAuthenticator function like so and export it.

export default withAuthenticator(App);

If you have followed all the steps we should have an App.js similar to this.

Note: I removed the export default on line 9, and moved that to line 21 instead, so that we can pass our created App component as an argument to withAuthenticator and your are done! Woop woop.

Now if you run react-native run-ios again you should get this screen, Voila!

Now you will need to Sign up for an account, you should get a verification code in your email and use your signed up account to login to the app.

If you log into your AWS account, and navigate to the Cognito user pool, you will see your shiny new user. There are tons of customisations you can apply to the UI, Auth Flow i.e you can elect to use a link to verify accounts instead of by email, enabling MFA really the list is endless.

I hope you found this article useful, if you did please give me a shout.

This article was orignially published on my medium page https://medium.com/@olu_o