Safeguarding Your React Native App: Protecting Screens for Unauthorized Users

#react #reactnative #mobile

Developing a mobile application often involves managing user authentication and ensuring that sensitive parts of your app are only accessible to logged-in users. In this blog post, we'll dive into how to protect your screens in a React Native application, preventing unauthorized access, as demonstrated in my video How to Protected Your Screen in React Native

My application, Dowell - Do Everything Well, is a habit tracker. A key requirement was to ensure that users who are not logged in cannot access the core functionalities within the app's protected sections. This isn't about writing code together, but rather understanding the core logic and workflow behind screen protection in React Native.

The Core Concept: Authorization Management

The fundamental idea is to manage user sessions and authentication state. If a user is not authenticated, they should be redirected to a login screen. If they are logged in, they should be able to access the main application.

Step 1: The Root Layout and Session Provider

The main core logic resides in your layout file [01:07]. Here, you'll prepare your components. In my setup, I use a QueryClientProvider for data fetching, but the most crucial part for screen protection is creating a Session Provider [01:21].

Step 2: Session Provider for State Management

This SessionProvider is essentially a state management system that keeps track of whether a user is authenticated or not. The core of this concept relies on a state variable, for example, isAuthenticated [01:49]. If the user is authenticated, this value will be true.

Step 3: Implementing Protected Routes within the Root Navigator

Inside your RootNavigator, you'll use the useSession hook to access the isAuthenticated state [02:39]. This is where the magic of screen protection happens.

If the user is authenticated (isAuthenticated is true): You will display your main application screens. As shown in the video, I wrap my app's internal screens (e.g., from the app folder) within a stack navigator [02:49].
If the user is NOT authenticated (isAuthenticated is false): They will be redirected to the sign-in page [03:18]. The most important part of protecting your screen is achieved by conditionally rendering stacks. You can wrap your screens with a "protected stack" and use a conditional check [03:30]. This check determines:
If isAuthenticated is true, the user is redirected to the main app screens.
If isAuthenticated is false, the user is redirected to the signIn page [03:57].

Demonstration of the Workflow

As I demonstrate in the video, when an unauthorized user tries to open the application, they are immediately redirected to the sign-in page [04:07]. Once they successfully log in, they are then directed to the main application screens [04:39].
The application also intelligently checks the authentication status when reopened. If you close the app and open it again, it will verify if you are authenticated. If you are, it will redirect you to the main app screen; otherwise, it will send you back to the sign-in page [05:14].

Conclusion

Implementing screen protection is a crucial aspect of building secure and user-friendly React Native applications. By leveraging a SessionProvider and conditionally rendering your navigation stacks based on the user's authentication status, you can ensure that only authorized users can access the protected parts of your application. This simple yet powerful logic helps in maintaining the integrity and security of your mobile app.