React Native Authentication in Depth Part 2 — Real World Auth Flow

Nader Dabit
Mar 1, 2018 · 8 min read

This post will cover:

Auth Flow

Getting the authentication flow right in the beginning of your app development saves an enormous amount of time down the road if it is implemented correctly. The goal of this post is to show you how to set up some basic yet real world authentication end to end, as well as how to wire it into the UI of your application in a way that makes sense in the real world.

Example 1
Example 2

Getting Started

To start, you should either have followed along with part one and have that project ready to go, or clone this project and configure all of the fields in src/aws-exports.js to match your information from the AWS Console.

import React from 'react'
import { AppRegistry } from 'react-native';
import App from './src/App';
// redux
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import rootReducer from './src/reducers'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, applyMiddleware(thunk))
// Amplify
import config from './src/aws-exports'
import Amplify from 'aws-amplify'
// App
const ReduxApp = () => (
<Provider store={store}>
<App />
AppRegistry.registerComponent('RNAmplifyExample', () => ReduxApp);

Creating the folder structure

Now, let’s add the rest of the files and folders we will need. In the src directory, create the following folders:

mkdir assets auth nav components reducers
touch actions.js theme.js
touch auth/SignIn.js auth/SignUp.js auth/Tabs.js


We will be working with a theme file so that you can configure aspects of the project in one place, such as your primary color, secondary color, and font families, without having to go in and update them throughout the project.

const colors = {
primary: '#FF1493',
secondary: '#b9b9b9'
const fonts = {
hairline: 'Lato-Hairline',
light: 'Lato-Light',
base: 'Lato-Regular',
bold: 'Lato-Bold'
export {


Next, download the assets from this folder into your assets folder.


Now that you have downloaded the fonts (part of the assets), we need to link them to the project.

"rnpm": {
"assets": [
react-native link


Reusable components

Our application will have a couple of components & styles that we will be reusing. Because we don’t want to rewrite this functionality, we create these in our components folder and reuse them throughout our app.


Let’s start with our reducer.

touch reducers/index.js reducers/auth.js

Signing In & Signing Up




Here, we pull in the SignIn and SignUp screens, implementing them into our TabNavigator.

Logged In State


This project is still lacking in a few areas, such as if a user did not receive their signUp confirmation code for whatever reason, we do not have a way to call the Amplify resendSignUp method with the existing config (though it would be fairly easy to add).

React Native Training

Stories and tutorials for developers interested in React Native

Nader Dabit

Written by

Developer Advocate at AWS Mobile — Specializing in Teaching and Building React & React Native —

React Native Training

Stories and tutorials for developers interested in React Native