React Navigation 5.0 Authentication flow using Context, Hooks and AWS Cognito on React Native
The release of React Navigation brought many changes and improvements to the library. But with great improvement comes great refactoring. In this guide we are going to walk through setting up an authentication flow on an Expo React Native app using React’s Context and Hooks and the new React Navigation 5.0. For the shake of simplicity, in this guide, I will assume that you know how to add AWS cognito with amplify on your project, otherwise there are many great guides out there to get you started. You can also check here. The approach you read in this guide can be implemented using a different user identity service.
Create a new Expo project
First of all we need to make a new expo project using the expo-cli.
$ expo init awesome-auth-appInstall React Navigation 5.0 and its dependencies
In order to install React Navigation in an expo managed project we don’t have to link it since it is supported. If you are on a non expo managed app you should go through some extra steps. You can refer to the getting started guide
Run the following commands inside project’s root folder:
yarn add @react-navigation/nativeexpo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
We will also need to install the stack dependency since this is the navigator we will be using in this example. React Navigation 5.0 went with a modular approach where we only install the navigator(s) we need.
yarn add @react-navigation/stackAnd that’s it! We now have a freshly created expo project with React Navigation 5.0 installed.
Create an Auth Reducer
We need to create a reducer to determine changes in our app’s user authentication state. This reducer receives the ‘SIGN_IN’, ‘SIGN_OUT’ and ‘RESTORE_TOKEN’ actions. I like to create a separate reducers folder and store all my related files in there.
Create an Auth Context
In the auth context we need to set our initial state. In the example below the useReducer Hook takes the constants authReducer that we created before in the reducers folder and the initial state. The auth context file exports the AuthProvider, the useAuthState and the useAuthDispatch. These last two Hooks will be used to access the current authentication state and dispatch events from anywhere in the app.
Use the AuthProvider
The next step is to wrap our App component with the AuthProvider (that is exported from the Auth Context). This will enable our application to use the auth state globally.
This is an example App.js file:
Make an Auth Service
We will use this service to export all the aws cognito calls. This file contains necessary calls such as signIn, signUp, user confirmation (via email or phone), a sign out method and the much need checkAuth that checks user’s current authentication state.
Let’s make some screens!
We will create 4 super simple screens that will come in handy later.
The first will be the SignInScreen. This screen contains a simple form for the user to log in. For the Sign in and sign up forms I used Formik to make my life easier.
The second will be the SignUpScreen. This is where the user can make a new account for our app. To keep things simple I also added the verification code for the cognito user in this screen.
The third screen is the HomeScreen. A simple screen containing a Hello World message and a log out button. You can develop the rest of your app there.
Last but not least we will add a LoadingScreen that we are going to use later.
Create the Navigation
It is time to make navigation files! In this example I will make three:
App Navigator: The app navigator will redirect to user on the Sign in / Sign Up screen or the main navigator depending on the authentication state. This navigator is also responsible for rendering a loading screen while checking the auth state.
As you may see on the code below we are using the SafeAreaProvider. This is going to help us with these annoying notches. For navigation, we make use of a stack navigator. We also import the loading screen to use while the user waits for the auth state and the other two navigators we are about to use.
Auth Navigator: It handles all the authentication screens (e.g. Sign in, Sign up, forgot password etc.
Main Navigator: As the name suggests, it is responsible for handling the rest of our app’s navigation (e.g. home screen, contact screen etc, sky is the limit). In this example I use a simple Home screen.
And there you are! You have a complete authentication state for your React Native app!
This is not a perfect guide but I hope it was helpful. Please feel free to make any improvements / suggestions.
