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'
Amplify.configure(config);
// App
const ReduxApp = () => (
<Provider store={store}>
<App />
</Provider>
)
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

Theme

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 {
colors,
fonts
}

Assets

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

Fonts

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

"rnpm": {
"assets": [
"./src/assets/fonts"
]
}
react-native link

Build

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.

Redux

Let’s start with our reducer.

touch reducers/index.js reducers/auth.js

Signing In & Signing Up

auth/SignIn.js

auth/SignUp.js

auth/Tabs.js

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

Logged In State

Conclusion

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 — http://reactnative.training https://aws.amazon.com/mobile

React Native Training

Stories and tutorials for developers interested in React Native