Implement a Simple Mobile Authentication Flow With React-Navigation.

An Easy and step by step guide.

XOR
XOR
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.


**** Application Flow ****AppLoading  --Loading
-- Decide App Screen Authentication
--Login Screen
--Forget Screen
Application
--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

createSwitchNavigator({
[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() {
this._bootstrapAsync();
}
_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem(‘userAuthFlag’);
this.props.navigation.navigate(
userToken ? ScreenConstants.APP_STACK :
ScreenConstants.AUTH_STACK,
);
};
render() {
return (
<SafeAreaView style={styles.safeAreaStyle}>
<Text>Loading</Text>
</SafeAreaView>
);
}
}

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   
this.props.navigation.navigate(ScreenConstants.APP_STACK);

And on logOut be like

AsyncStorage.setItem(AsyncStoreConstant, ‘’); // reset the flag
this.props.navigation.navigate(ScreenConstants.AUTH_STACK);

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.

XOR

Written by

XOR

🖊️ Tech Writer 📱 Mobile Application Consultant 🧑‍🤝‍🧑 Love Sharing ideas and concepts.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

How to Secure Your API With JSON Web Tokens

More from JavaScript in Plain English

More from JavaScript in Plain English

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