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:

	//Expo Cli
	expo init react-native-auth
	//React Native Cli
	npx react-native init react-native-auth
	//

view raw create-react-native-app.ts hosted with ❤ by GitHub

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 Native CLI
	npm install @react-navigation/native react-native-screens react-native-safe-area-context

view raw react-native-navigation-command.ts hosted with ❤ by GitHub

React Navigation Library Installations - Expo Native CLI

	npm install @react-navigation/native
	//expo specific
	expo install react-native-screens react-native-safe-area-context
	//

view raw expo-cli-navigation-command.ts hosted with ❤ by GitHub

Installing the native stack navigator library

npm install @react-navigation/native-stack

view raw installing-stack-navigators.ts hosted with ❤ by GitHub

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:

	import * as React from 'react';
	import { createNativeStackNavigator } from '@react-navigation/native-stack';
	import LoginScreen from '../screens/LoginScreen';
	import RegisterScreen from '../screens/RegisterScreen';
	const Stack = createNativeStackNavigator();
	const AuthNavigator = () => {
	return (
	<Stack.Navigator initialRouteName='Login'>
	<Stack.Screen name="Login" component={LoginScreen} />
	<Stack.Screen name="Register" component={RegisterScreen} />
	</Stack.Navigator>
	)
	}
	export default AuthNavigator

view raw auth-navigator.js hosted with ❤ by GitHub

Update the app-navigator.js like so too:

	import * as React from 'react';
	import { createNativeStackNavigator } from '@react-navigation/native-stack';
	import DashboardScreen from '../screens/DashboardScreen';
	import AccountScreen from '../screens/AccountScreen';
	const Stack = createNativeStackNavigator();
	const AppNavigator = () => {
	return (
	<Stack.Navigator initialRouteName='Dashboard'>
	<Stack.Screen name="Dashboard" component={DashboardScreen} />
	<Stack.Screen name="Account" component={AccountScreen} />
	</Stack.Navigator>
	)
	}
	export default AppNavigator

view raw app-navigator.js hosted with ❤ by GitHub

And navigator.js

	import * as React from 'react';
	import { NavigationContainer } from '@react-navigation/native';
	import AppNavigator from './app-navigator';
	import AuthNavigator from './auth-navigator';
	const AppRoute = () => {
	const [isLoggedIn, setIsLoggedIn] = React.useState(true);
	return (
	<NavigationContainer>
	{/* Conditional stack navigator rendering based on login state */}
	{
	isLoggedIn ? <AppNavigator /> : <AuthNavigator />
	}
	</NavigationContainer>
	)
	}
	export default AppRoute

view raw navigator.js hosted with ❤ by GitHub

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

npm install @reduxjs/toolkit react-redux

view raw install-redux-toolkit.js hosted with ❤ by GitHub

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:

	import { configureStore } from '@reduxjs/toolkit'
	import authSlice from './slices/authSlice'
	export const store = configureStore({
	reducer: {
	userAuth: authSlice
	},
	})

view raw create-redux-store.ts hosted with ❤ by GitHub

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.

	import { createSlice } from "@reduxjs/toolkit"
	const initialState = {
	isLoggedIn: false,
	email: null,
	userName: null
	}
	const authSlice = createSlice({
	name: 'userAuth',
	initialState,
	reducers: {
	setSignIn: (state, action) => {
	state.email = action.payload.email;
	state.isLoggedIn = action.payload.isLoggedIn;
	state.userName = action.payload.userName;
	},
	setSignOut: (state) => {
	state.email = null;
	state.userName = null;
	state.isLoggedIn = false;
	}
	}
	});
	export const { setSignIn, setSignOut } = authSlice.actions;
	export const selectIsLoggedIn = (state) => state.userAuth.isLoggedIn;
	export const selectEmail = (state) => state.userAuth.email;
	export const selectUserName = (state) => state.userAuth.userName;
	export default authSlice.reducer;

view raw authsclice.ts hosted with ❤ by GitHub

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:

	import { StatusBar } from 'expo-status-bar';
	import React from 'react';
	import { Provider } from 'react-redux';
	import AppRoute from './src/navigations/navigator';
	import { store } from './src/redux/store';
	export default function App() {
	return (
	<>
	<Provider store={store}>
	<AppRoute />
	<StatusBar style="auto" />
	</Provider>
	</>
	);
	}

view raw app.js hosted with ❤ by GitHub

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:

	import * as React from 'react';
	import { NavigationContainer } from '@react-navigation/native';
	import AppNavigator from './app-navigator';
	import AuthNavigator from './auth-navigator';
	import { useSelector } from 'react-redux';
	import { selectIsLoggedIn } from '../redux/slices/authSlice';
	const AppRoute = () => {
	const isLoggedIn = useSelector(selectIsLoggedIn);
	return (
	<NavigationContainer>
	{/* Conditional stack navigator rendering based on login state */}
	{
	isLoggedIn ? <AppNavigator /> : <AuthNavigator />
	}
	</NavigationContainer>
	)
	}
	export default AppRoute

view raw complete-nav.ts hosted with ❤ by GitHub

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

	import { useDispatch } from 'react-redux'
	import { setSignIn } from '../redux/slices/authSlice';
	const handleLogin = () => {
	const user = {
	isLoggedIn: true,
	email: 'jdoe@test.com',
	userName: 'johnDoe'
	};
	dispatch(setSignIn(user));
	}

view raw login-func.ts hosted with ❤ by GitHub

And the complete LoginScreen should look like this:

	import React from 'react'
	import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
	import { useDispatch } from 'react-redux'
	import { setSignIn } from '../redux/slices/authSlice';
	const LoginScreen = () => {
	const dispatch = useDispatch();
	const handleLogin = () => {
	const user = {
	isLoggedIn: true,
	email: 'jdoe@test.com',
	userName: 'johnDoe'
	};
	dispatch(setSignIn(user));
	}
	return (
	<View style={styles.container}>
	<Text style={{ marginBottom: 20, fontSize: 15 }}>Login Screen</Text>
	<TouchableOpacity onPress={handleLogin} style={styles.btn}>
	<Text style={styles.text}>Sign In</Text>
	</TouchableOpacity>
	</View>
	)
	}
	export default LoginScreen
	const styles = StyleSheet.create({
	container: {
	flex: 1,
	justifyContent: 'center',
	alignItems: 'center',
	backgroundColor: '#F5FCFF',
	},
	btn: {
	backgroundColor: 'blue',
	paddingHorizontal: 50,
	paddingVertical: 10,
	borderRadius: 10
	},
	text: {
	color: 'white',
	fontSize: 20
	}
	})

view raw complete-login.ts hosted with ❤ by GitHub

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.