React Native Login flow pattern

Login flow for any react-native app; one of many ways :)

For any app that we build, we first think of the authentication of the app. Here, I am going to demonstrate one of the ways to build your standard login flow with react-native.

Here are the pre-requisites you need before adding your login screen:

1. react-native (of course)
2. react-navigation

Before going further, it’s essential to have a basic understanding of react-navigation library, which provides navigation support in our app. You can find the required documents to help install react-navigation here.

At this point, I assume you are done setting up the project.

We are going to implement the following login flow for authentication of our app.

App Login Flow

Which basically translates to:

When our app is accessed, it will first navigate to the AuthLoadingScreen, that decides which screen the app will navigate to, according to our authentication logic.

To attain this, we will have our App.js as follows,

App.js

App renders our Navigator.

Navigator.js

As you can see, we have a SwitchNavigator here, whose initialRouteName is AuthLoading , which maps to AuthLoadingScreen.

AuthLoadingScreen.js

Now, here in AuthLoadingScreen constructor, we check if user isLoggedIn by checking into our LocalStorage using react-native’s AsyncStorage.

If a user is logged in already, it will either navigate to theApp route, or to the Auth route, where App router is responsible for private routes and Auth is responsible for the only public route (which is LoginPage in this case).

To understand the code and get the whole picture & project structure, please refer to the repo.

You can use this repo as a boiler plate code to kickstart any of your react-native projects.

prathamudeshmukh/react-native-demo-login-page