Building an Efficient React Native Authentication Flow With Redux ToolKit And AsyncStorage

Mobile application engineers will consistently need to implement authentication in their day to day app development. This could be because of many reasons like - limiting a region from unauthenticated clients, holding a few assets for just authenticated clients and so forth.

This article I will walk you through how to implement a straightforward yet a powerful and real-world  authentication flow in react native application.

My main focus will be on the explanation of the process and will not talk about building and styling the all the screen layout. The complete source code is however available on my github repository.

Prerequisites

To follow along with this tutorial you need the following:

• Node version ≥10.x.x installed 
• A package manager such as npm or Yarn 
• react-native-cli or expo-cli installed on your local machine

I will be using React Native version 0.64.3 and React Navigation version 6.x. For complete environment setup for react native development checkout the official documentation.

The Auth Flow

The authentication flow of the app will typically look like this:

• The user launch the app. 
• The app tries to loads some authentication data from persistent storage (in our case AsyncStorage). 
• If auth data is found in the storage, this will be passed in to the auth state and the user will be presented with the main app.
• If auth data is not found the user is presented with the authentication screen and will only be able to navigate through all the authentication screens only.
• When the user signs out, all authentication data will be removed from the storage and auth state will be updated and user is sent back to authentication screens.

Creating React Native Project

Let's create our project by running this command:

The Approach

We want to prevent user from gaining access to all the main app screens by clicking on the back button after they have logged out. The best way to prevent this is to unmount all of the screens related to main app screens when they logout. To achieve this, we will be using React Navigation Library.

Adding Screens

Since we will be having some different set of screens for authenticated and unauthenticated users, let's create four screens within our src/screens folder- LoginScreen and RegisterScreen for unauthenticated users and DashboardScreen and AccountScreen for authenticated users. 

Adding Navigation

Let's add React Navigation library. For a comprehensive documentation on adding navigation to your react native project can be found in React Navigation Library Docs 

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. We will install some couple of libraries. 

React Navigation Library Installations - React Native CLI

React Navigation Library Installations - Expo Native CLI

Installing the native stack navigator library

Creating the app native stack navigators

From the docs -createNativeStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring the navigator. The Navigator should contain Screen elements as its children to define the configuration for routes.

Create a folder called navigations in the application's /src folder, and create three files in /src/navigations namely app-navigator.js, auth-navigators.js and navigator.js. As the name proposes,, the app-navigator will be use to configure the screens that will be vissible to authenticated users of the app, the auth-navigator will be used for unauthenticated users of the app, also, the navigator.js file is where we will decide which navigation stack to present dependent on application state.

Modify the auth-navigator.js like so:

Update the app-navigator.js like so too:

And navigator.js

Now we are done with the app's navigation. Implementing redux is next.

Adding Redux Toolkit and React-Redux

Redux is simply a store to store the state of the variables in your app. We will be using it to store our app authentication state.

Installing Redux Toolkit and React Redux

Create our Redux Store

Create a file named src/redux/store.js. Import the configureStore API from Redux Toolkit. We'll create the Redux store like this:

This creates a Redux store, but it's expecting authSlice, let's create that next.

Create a Redux State Slice

Add a new file named src/redux/slices/authSlice.js. In that file, import the createSlice API from Redux Toolkit.

Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.

Provide the Redux Store to React 

Once the store is created, we can make it available to our React Native components by putting a React-Redux provider around our application in app.js. Import the Redux store we just created, put a provider around your app, and pass the store as a prop:

Implement State Change in the Navigation.js

We neen to modify our code in the navigation.js file so that isLoggedIn variable is been pulled from our redux store. Import useSelector from react-redux and selectIsLoggedIn from authslice like so:

import { useSelector } from 'react-redux';

import { selectIsLoggedIn } from '../redux/slices/authSlice';

The complete code should look like this:

Implement Login Logic

In the LoginScreen.js, let's make a new function named handleLogin. In the function, we will dispatch setSignIn action of our redux slice and pass in the state object to update the auth variables

And the complete LoginScreen should look like this:

When the user enters all login credentials and clicks on the login button, an action to update the store variable is sent. Based on this, the stack navigator (screens) to be mounted is determined by the variables in our store. In this case isLoggedIn will be true, so the user will be sent to the dashboard screen.

Implementing the SignOut Logic 

We only need to do just one thing in the dashboardscreen.js. We are only going to dispatch the setSignOut action without any parameter to alter the sate variable in our redux store. 

Conclusion 

In this article, we learned how configure React Navigation in a React Native App, and also configure Redux Toolkit to implement authentication flow in React Native app. The complete source code can be found in my github respository.