In this guide, we'll walk through implementing protected routes in React Native using a simplified authentication approach with hardcoded values. The implementation uses a straightforward application structure that's easy to follow along with.
While you can start from scratch, we recommend having a basic React Native project already set up. If you need help with the initial setup, refer to our React Native Appwrite SDK Tutorial below:
Prerequisites
Before we begin, you should have:
A React Native project with Appwrite integration - Follow our quick start guide to set it up
Basic understanding of React Native and navigation concepts
Step 1: Setting up the file structure
First, we'll separate our routes into two categories: protected (which requires authentication) and public. We'll create this separation by wrapping our protected routes in a folder called (app):
src
├── app
│ ├── _layout.tsx // Root layout
│ └── signin.tsx // Public route
│
└── (app) // Protected routes group
├── _layout.tsx // Protected layout
└── index.tsx // Protected home screen
To protect the routes in our protected route group, we'll add an auth check within the protected route group's _layout.tsx file. For now, we'll use a hardcoded session value to keep things simple:
// app/(app)/_layout.tsx
import { Slot, Redirect} from "expo-router";
export default function AppLayout() {
const session = false
return !session ? <Redirect href="/signin"/> : <Slot/>
}
This is as simple as it gets - we're just blocking users from accessing any route that uses this layout if there's no session. However, in a real scenario, we want to pull the user state from some sort of provider, which we'll set up next.
Step 2: Creating our auth context
Let's create our auth context that we'll use throughout the app:
// app/context/AuthContext.js
import { useContext, createContext, useState, useEffect } from 'react';
import { Text, SafeAreaView } from 'react-native';
const AuthContext = createContext()
const AuthProvider = ({children}) => {
const [user, setUser] = useState(false)
const [session, setSession] = useState(false)
const [loading, setLoading] = useState(true)
const signIn = async () => {}
const signOut = async () => {}
const contextData = {
user,
session,
signIn,
signOut
}
return (
<AuthContext.Provider value={contextData}>
{loading ? <SafeAreaView>
<Text>Loading...</Text>
</SafeAreaView> : children}
</AuthContext.Provider>
)
}
export {AuthContext, AuthProvider}
const useAuth = () => {return useContext(AuthContext)}
export {useAuth}
Step 3: Setting up the root layout
To use our auth context, we'll wrap the root layout with the AuthProvider:
import { Slot } from 'expo-router';
import { AuthProvider } from './context/AuthContext.js';
export default function Root() {
return (
<AuthProvider>
<Slot />
</AuthProvider>
);
}
Step 4: Implementing protected routes
Now let's create our protected layout that will guard our private routes:
// app/(app)/_layout.tsx
import { Slot, Redirect} from "expo-router";
import {useAuth} from '../context/AuthContext.js'
export default function AppLayout() {
const {user, session} = useAuth()
return !session ? <Redirect href="/signin"/> : <Slot/>
}
Step 5: Setting up the sign-in page
Finally, let's handle the case where an authenticated user tries to visit the sign-in page:
// app/signin.tsx
import { Redirect } from 'expo-router'
import { useAuth } from '@/context/AuthContext'
import { SafeAreaView, Text } from 'react-native'
const signin = () => {
const {session} = useAuth()
if (session) return <Redirect href="/"/>
return (
<SafeAreaView>
<Text>signin</Text>
</SafeAreaView>
)
}
export default signin
This completes our implementation of protected routes in React Native. You now have a foundation for managing authenticated and public routes using React Context to handle the global session state.
Now that you have a basic route protection system in place, you can enhance it by implementing actual authentication logic using Appwrite. If you run into any issues or have questions, the Appwrite community on Discord is always ready to help.
More resources
If you would like to learn more about React Native and Appwrite, we have some resources that you should visit:
