Table of Contents
Flows of authentication
To access data connected with a user or other private material, most apps require a user to authenticate in some way. Typically, the flow will be as follows:
The user launches the app.
Some authentication state is loaded from persistent encrypted storage by the programmer (for example, Secure Store).
Depending on whether a valid login state stood loaded, the user remains presented with either authentication screens or the main app.
We clear the login state and return the user to the authentication screens after signing out.
What we require
It is the behavior we want from the authentication flow:
After users sign in, we want to discard the state of the authentication flow and unmount any authentication-related displays. We want to be unable to return to the authentication flow when we push the physical back button.
How it will operate
Based on criteria, we may define different displays. If the user remains logged in, we may specify Home, Profile, Settings, etc. We can create SignIn and SignUp displays if the user remains not logged in.
While we specify screens like this, React Navigation will only view the Home, Profile, and Settings screens when isSignedIn is true and the SignIn and SignUp screens when isSignedIn is false. When the user is not signed in, it cannot access the Home, Profile, and Settings pages and the SignIn and SignUp panels when the user remain signed in.
This technique has long remained used by other routing tools, such as React Router, and remains frequently referred to as “Protected routes.” Our screens that require the user to sign in remain “protected” and cannot remain accessed by other methods if the user remains not logged in.
When the value of the isSignedIn variable changes, the magic happens. Assume that isSignedIn is initially false. It indicates that either the SignIn or SignUp panels remain shown. The value of isSignedIn will change to true when the user signs in. Because the SignIn and SignUp windows are no longer defined, React Navigation will delete them. The Home screen will then remian displayed automatically because it remain the first screen declared when isSignedIn is true.
The example uses a stack navigator, but the same concept may remain used with any navigator.
We may create auth flow in a simple approach that doesn’t require additional logic to ensure that the proper screen remain presented by conditionally defining various screens based on a variable.
When conditionally rendering displays, avoid manually navigating.
It is vital to note that when using this configuration, you do not manually travel to the Home screen by calling Navigation. Navigate (‘Home’) or any other approach is OK. When isSignedIn changes, React Navigation will automatically travel to the relevant screen – the Home screen when isSignedIn becomes true, and the SignIn screen when isSignedIn becomes false. If you try to navigate manually, you’ll get an error.
Removing shared screens when auth state changes
Here, particular panels such as SignIn, Home, and so on remain only displayed based on the sign in status. However, we have the Help screen, which may remain shown in any circumstance. It also implies that if the user’s signin state changes while in the Help screen, they will stay on the Help screen.
Conclusion
It can be an issue because we generally want the user to remain sent to the SignIn or Home screen rather than the Help panel. We can utilise the navigation key prop to make this work. React Navigation will delete the entire screen if the navigation key changes.
Also Read: What are Ethereum homies?