Protected screens are screens that should only be available to authenticated users. They are commonly used in applications that have login and logout functionality.
For example, a student dashboard should normally be available only after the student has successfully logged in.
Login
↓
Authentication
↓
Protected Screens
├── Dashboard
├── Courses
├── Assignments
└── ProfileA protected screen is a screen that is intended to be accessed only by authenticated users.
Examples include:
Applications often contain both public and private content. Protected screens help organize the navigation between them.
Public
├── Login
├── Register
└── About
Protected
├── Dashboard
├── Profile
└── SettingsA public screen can normally be displayed without authentication.
A protected screen requires an authenticated user.
| Screen Type | Example |
|---|---|
| Public | Login |
| Public | Register |
| Protected | Dashboard |
| Protected | Profile |
The application needs an authentication state to determine whether the user is logged in.
const [
isLoggedIn,
setIsLoggedIn
] = useState(false);
Here, false means the user is not currently authenticated.
After a successful login, the authentication state can be changed.
setIsLoggedIn(true);When the user logs out:
setIsLoggedIn(false);The navigation can respond to these state changes.
A stack navigator can contain screens that are intended for authenticated users.
function AppStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Dashboard"
component={DashboardScreen}
/>
<Stack.Screen
name="Profile"
component={ProfileScreen}
/>
</Stack.Navigator>
);
}The authentication stack can contain screens such as Login and Register.
function AuthStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={LoginScreen}
/>
<Stack.Screen
name="Register"
component={RegisterScreen}
/>
</Stack.Navigator>
);
}The root navigator can choose between the authentication stack and the protected application stack.
{isLoggedIn
? <AppStack />
: <AuthStack />
}
When isLoggedIn is true, the protected application screens
are displayed.
A dashboard is commonly a protected screen.
function DashboardScreen() {
return (
<View>
<Text>
Welcome to Dashboard
</Text>
</View>
);
}The Dashboard should be included in the authenticated navigation tree.
function ProfileScreen() {
return (
<View>
<Text>
My Profile
</Text>
</View>
);
}The Profile screen can be registered inside the protected stack.
A single authenticated navigation tree can contain multiple protected screens.
AppStack
|
├── Dashboard
├── Courses
├── Assignments
├── Profile
└── SettingsAll of these screens can be displayed only when the user is authenticated.
Protected screens can also be organized using bottom tab navigation.
Authenticated User
↓
Tab Navigator
|
├── Home
├── Courses
└── ProfileThe entire tab navigator can be part of the authenticated application.
Drawer navigation can also be used after authentication.
Authenticated User
↓
Drawer
|
├── Dashboard
├── Courses
├── Profile
└── SettingsThe drawer itself can be included inside the authenticated navigation tree.
If the user is not authenticated, the application should keep them in the authentication flow instead of displaying protected application screens.
if (!isLoggedIn) {
return <AuthStack />;
}
return <AppStack />;This creates a simple protected navigation pattern.
Start
↓
Login Screen
↓
Validate User
↓
Successful Login
↓
Protected Navigation
↓
DashboardThe protected navigation becomes available after successful authentication.
A logout button can be placed inside a protected screen.
<Button
title="Logout"
onPress={onLogout}
/>The logout callback can update the authentication state.
setIsLoggedIn(false);When authentication changes, the root navigation structure can also change.
Logged Out
↓
AuthStack
Logged In
↓
AppStackThis keeps authentication-related navigation separate from application navigation.
When an application starts, it may need to determine whether a previous authentication session is still valid.
App Starts
↓
Check Authentication
↓
Loading
↓
Authenticated?
/ \
Yes No
↓ ↓
AppStack AuthStackAuthentication checks can take time. A loading state can be used while the application determines the authentication state.
const [
loading,
setLoading
] = useState(true);After the authentication check:
setLoading(false);The application can then display the appropriate navigation.
Many applications use an API to authenticate users.
Login Form
↓
API Request
↓
Server Verification
↓
Authentication Result
↓
Update Auth State
↓
Protected NavigationThe client should not assume that simply opening a protected screen proves that the user is authorized.
Some applications have different types of authenticated users. For example:
User
├── Dashboard
└── Profile
Admin
├── Dashboard
├── Users
├── Reports
└── SettingsThe application can use authentication and authorization information to determine which navigation options should be displayed.
An education application may protect student-specific screens.
Student Login
↓
Student Dashboard
|
├── Courses
├── Assignments
├── Results
├── Attendance
└── ProfileThese screens can be placed inside authenticated navigation.
Protected screens can also receive navigation parameters.
navigation.navigate(
"CourseDetails",
{
courseId: 101
}
);
The CourseDetails screen can then read the parameter using
route.params.
The screen itself can remain inside the authenticated navigation tree.
Protected navigation can contain nested navigators.
AuthStack
|
└── Login
AppStack
|
└── MainDrawer
|
└── MainTabs
|
├── Home
├── Courses
└── ProfileThis is useful for larger applications with multiple navigation levels.
The navigation structure should not intentionally expose private screens to unauthenticated users.
Unauthenticated
↓
Authentication Screens
Authenticated
↓
Private Application ScreensHowever, hiding a screen in the mobile UI is not enough to secure private data. Backend services should also verify authentication and permissions.
import React, {
useState
} from 'react';
import {
View,
Text,
Button
} from 'react-native';
import {
NavigationContainer
} from '@react-navigation/native';
import {
createNativeStackNavigator
} from '@react-navigation/native-stack';
const Stack =
createNativeStackNavigator();
function LoginScreen({
onLogin
}) {
return (
<View>
<Text>
Login Screen
</Text>
<Button
title="Login"
onPress={onLogin}
/>
</View>
);
}
function DashboardScreen({
onLogout
}) {
return (
<View>
<Text>
Protected Dashboard
</Text>
<Button
title="Logout"
onPress={onLogout}
/>
</View>
);
}
function AuthStack({
onLogin
}) {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
options={{
headerShown: false
}}
>
{() => (
<LoginScreen
onLogin={onLogin}
/>
)}
</Stack.Screen>
</Stack.Navigator>
);
}
function AppStack({
onLogout
}) {
return (
<Stack.Navigator>
<Stack.Screen
name="Dashboard"
>
{() => (
<DashboardScreen
onLogout={onLogout}
/>
)}
</Stack.Screen>
</Stack.Navigator>
);
}
export default function App() {
const [
isLoggedIn,
setIsLoggedIn
] = useState(false);
return (
<NavigationContainer>
{isLoggedIn ? (
<AppStack
onLogout={() =>
setIsLoggedIn(false)
}
/>
) : (
<AuthStack
onLogin={() =>
setIsLoggedIn(true)
}
/>
)}
</NavigationContainer>
);
}| Concept | Purpose |
|---|---|
| Protected Screen | Screen intended for authenticated users |
| Auth Stack | Contains public authentication screens |
| App Stack | Contains protected application screens |
| Authentication State | Represents whether the user is authenticated |
| Loading State | Used while authentication is being checked |
| Logout | Ends the authenticated application flow |
| Authorization | Determines what an authenticated user is allowed to access |
Start Application
↓
Check Authentication
↓
Loading
↓
Is User Authenticated?
/ \
No Yes
↓ ↓
Auth Stack App Stack
↓ ↓
Login Dashboard
↓
Protected Screens
├── Courses
├── Profile
├── Settings
└── Assignments
↓
Logout
↓
Auth StackProtected screens are an important part of mobile application navigation. They help separate public authentication screens from screens intended for authenticated users. In production applications, navigation controls should be combined with server-side authentication and authorization for actual data protection.
Question: What is a protected screen?