Implement a Simple Mobile Authentication Flow With React-Navigation.

An Easy and step by step guide.

Tunvir Rahman
Feb 4 · 2 min read

Authentication is a must to have feature for every mobile application out there . Its enable application to show appropriate content to appropriate user. This Blog will help you to build an app which implements react navigation to achieve the same.

This is what we are tying to build
**** Application Flow ****AppLoading  --Loading
-- Decide App Screen Authentication
--Login Screen
--Forget Screen
--Screen One
--Screen Two

npm install react-navigation --save
npm install react-navigation-stack --save

You need a createSwitchNavigator(decide which stack to load) and Two createStackNavigator(AppStack and Auth Stack)

AppStack Looks like this

const AppStack = createStackNavigator({
[ScreenConstants.APP_FIRST_SCREEN]: {
screen: AppScreen1,
navigationOptions: () => ({
headerTitle: ‘My First App Screen’,
[ScreenConstants.APP_SECOND_SCREEN]: {
screen: AppScreen2,
navigationOptions: () => ({
headerTitle: ‘My Second App Screen’,

And AuthStack be like

const AuthStack = createStackNavigator({
[ScreenConstants.AUTH_LOGIN_SCREEN]: {
screen: AuthScreen,
navigationOptions: () => ({
headerTitle: ‘Login Screen’,
[ScreenConstants.AUTH_FORGET_SCREEN]: {
screen: ForgetPassword,
navigationOptions: () => ({
headerTitle: ‘Forget Password’,

Now configure our SwitchNavigator. Its role is to decide which screen to load when app starts based on some flag data which we stored in local storage.

After Login we have to set it and after logout we have to reset it.

This is our SwitchNavigator

[ScreenConstants.LOADING_SCREEN]: ApploadingScreen,
[ScreenConstants.AUTH_STACK]: AuthStack,
[ScreenConstants.APP_STACK]: AppStack,

Now AppLoading Screen responsible for deciding which Stack to load(i.e either AppStack or AuthStack).

This is how it looks like

class ApploadingScreen extends React.Component {
componentDidMount() {
_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem(‘userAuthFlag’);
userToken ? ScreenConstants.APP_STACK :
render() {
return (
<SafeAreaView style={styles.safeAreaStyle}>

Now last thing is to set the userAuthFlag to some value so that app loading screen can decide which screen to load.

So in login screen we have set the userAuthFlag and In Logout we reset the flag.

So On login , do something like

AsyncStorage.setItem(AsyncStoreConstant, ‘doneAuth’);//set some flag   

And on logOut be like

AsyncStorage.setItem(AsyncStoreConstant, ‘’); // reset the flag

Here is the complete code in one file so that it can be understand easily. Just Create a new react-native project and replace that app.js with the following code.

Complete Code. Just paste it in your newly created App.js file.

Thanks for reading.

JavaScript in Plain English

Learn the web's most important programming language.

Tunvir Rahman

Written by

Tech Writer || Mobile Application Consultant || Love Sharing ideas and concepts || Writing code for decades

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade