React-Native Authentication Flow- The Simplest Way!!

Don't bang your head with navigation flow anymore…

Let's make this flow FLOW!

New to react-native and confused with all navigators and stacks? Following tutorials but don't know what how to handle all those stacks? Let's make it easier.

A simple authentication flow is:

App initialiser -> Login Token Check

if TokenPresent -> Home Screen

else -> Login Screen

And don't go back to Login screen on back press, yes.

Get it? Me neither.

Okay let's try to make this flow you don't need to mamble bamble yourself with multiple stacks and switches, we'll try to do it simplest way possible as title suggests.

Okay, let's go slowly!

Installation:

Now we need three libraries, just run in project's root directory:

npm install @react-navigation/native @react-navigation/stack @react-native-community/async-storage

#or if you use yarn
yarn add @react-native-community/async-storage @react-navigation/native @react-navigation/stack

React-Navigation/Native gives us a navigation container to wrap our app.

React-Navigation/Stack provides a way for your app to transition between screens where each new screen is placed on top of a stack.

Async-Storage we're gonna need this storage system to save our login token, i.e. login status.

App Structure

To keep good file system of our app we're gonna keep each thing in relatable hierarchy

Make app folder in your root folder

make two sub folders

• navigator -> index.js
• component -> LoginScreen.js, HomeScreen.js

Not mandatory but Mandatory.

Now you're left with something like this, you can design your login and home screen however you like, let's put our business logic in Navigator's folder index.js

...
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import AsyncStorage from '@react-native-community/async-storage';
import HomeScreen from '../component/HomeScreen'
import LoginScreen from '../component/LoginScreen'
export default function App() {
... //here we later declare our stack
return (
<View style={{ flex: 1 }}>
<NavigationContainer>

</NavigationContainer>
</View>
);
}

In above code we imported our libraries and in return statement we returned our Navigator Container. In this container we're gonna call our stack screens. But let's write our login token check first:

const [Login, setLogin] = React.useState();
if (!Login) //check to stop loop state update
AsyncStorage.getItem('Login').then(info => {
if (c === null) //on first time login key will be empty
   c = '0'    //putting default value
setLogin(c)   
});

Now here we're checking if user has already logged in or not, let's use our login object

const Stack = createStackNavigator();
const StackScreens = ({ navigation }) => (
<Stack.Navigator>
{
//we'll conditionally render login screen
Login === '0' &&
  <Stack.Screen
  name="LoginScreen"
  component={LoginScreen} />
}
 <Stack.Screen
 name="HomeScreen"
 component={FeedbackAndWorkingScreen}
 gestureEnable={true} />

//you can put your other screens here.

</Stack.Navigator>
);

Now on first time login object will contain 0 and we'll render our Login screen, and incase user logs out we'll change value to 0 again. Otherwise it'll be 1 and that indicates user is already logged in and no need to show login screen, pretty easy, right? I hope.

Woah, now that navigator is fully established. Let's go to our Login Screen to add our login token and kick our login screen out...

You can make a cool login button using LinearGradient

import { useNavigation, CommonActions } from '@react-navigation/native';
...
function LoginScreen = () => {
const navigation = useNavigation();
//later in return statement 
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {
AsyncStorage.setItem('Login', '1'); //set our token for next time
navigation.dispatch(
CommonActions.reset({
index: 0, //places homeScreen on 0 index and clears login from stack
routes: [{
name: 'HomeScreen', 
},
],}));
}}>
<Text>
    Login
</Text>
...

export default LoginScreen

We're dispatching a navigation event and resetting stack to our new screen HomeScreen. Since we're using react-navigation/native we're gonna reset stack using CommonActions.

So, we covered login trouble pretty quickly, if you find any troubles implementing it, comment down below or reach out to me. ANNNNNND if you like it CLAP CLAP CLAP!!!