Create an Authorization Flow with React-Navigation 5.x
Overview
React navigation is one of the go to libraries to help build fluid react-native screens. It is easy to set up and is completely customizable. React-navigation allows you to build different types of navigators like top and bottom tabs, and side drawers. React Navigation 5.0 brings with it many additions to the library, such as dynamic screens and support for the latest react features like hooks.
In this guide, we will walk through how to build an authorization flow for your react-native app.
Assumptions
I won't’ go through basic react-native setup, I’m assuming you have a hello-world app running and want to use react-navigation.
Note: I have ejected expo but this shouldn’t affect you.
Setup
Let's start by installing react-navigation 5.0 core dependencies into your react-native application
Next we will need to install indicative and react-native-elements
Ensure your package.json have dependencies below:
Screens
The signUp & signIn screens will use indicative for input validation, and react-native-elements to build the screens.
The screens leverage useContext to get state from the app.js createContext, this will pass data around our application to decide which screen the user should be on.
The screens will need to validate user's email format and a password length before being authorized to visit the home screen. This is the job of indicative, here is a snippet of the helper function.
SignUp Screen
The SignUpScreen displays a few input boxes and a button, it will call the helper function handleSignUp() to validate users input once they click the sign up button. If the user intended to visit the Sign In screen, we call the singIn context.
We set useEffect to update the screen when an error occurs.
Here is the complete signUpScreen.js
SignIn Screen
The signInScreen is very similar, with the difference being the click message the user sees to sign up if they don’t have an account already. We use context to call singUp, sending an empty payload to our reducer in app.js
Here is the complete signInScreen.js,
Now with our screens complete we can build our main application to navigate between the screens.
App.js
App.js will leverage some react hook features.
createContext: shares data between components without us needed to pass it down.
useEffect: fetches the token from storage or presents the signUp screen if none is found.
useMemo: used to memorize our context functions to avoid calling them on every render. UseMemo will only recompute when one of the inputs has changed.
useReducer: handles our complex state logic, setting flags that determine which screen to display.
Using Navigator
Now we can call the react-navigator to build our screens
In your app.js import the navigators and initialize them
Home Stack
The homepage will build a stack that has a side drawer component.
Our home screen navigation stack will look like this:
Here is our side drawer navigator:
You will need to build the screen components (HomeScreen, Screen1, Screen2, SplashScreen) and import them into your app.js
Here is a basic example of a screen:
To render our Navigators in App.js we need to wrap our screens in a NavigationContainer but to also handle our data sharing we will need to wrap everything inside our AuthContext provider.
The two helper functions were created to help us dictate which screen gets rendered in our authorization flow.
stateConditionString(): returns a single value, telling our switch case which Stack Screen to return. If you look at our useReducer, when the useContext is called from one of our pages it will dispatch the action and update state. The state flags is how we determine which page to navigate to.
chooseScreen(): When we define screens like this, React Navigation will only see the valid screen. This makes it impossible to navigate to the HomeScreen when the user is not signed in.
At this point we have everything we need to build our authentication flow. I’d like to point out that we are not using a real token. In a production app, we need to send the data to server and get a token. You’ll also need to handle errors if sign in failed.
Wrap Up 🎉
Building an authentication flow with react navigation 5.0 is straight to the point with the power of react hooks. We can define different screens based on conditions and use the react navigation’s stack history manager to help us guard against unauthorized page access.
I also encourage you to checkout Indicative, it has some powerful features to help validate and sanitize your data.
I hope this guide has helped you understand how authorization screens can be created in react-native using the latest features of react and react-navigation. I’d enjoy hearing about your experience in the comments below.
Feel free to reach out if you’d like some help. Discord
Originally published at https://embeddednature.com on April 11, 2020.
