1---
2title: Authentication in Expo Router
3description: How to protect routes with Expo Router.
4---
5
6import { FileTree } from '~/ui/components/FileTree';
7
8It's common to restrict certain routes to users who are not authenticated. This can be achieved in a very organized way by using React Context and Route Groups.
9
10Consider the following project:
11
12<FileTree files={['app/_layout.js', 'app/index.js', 'app/(auth)/sign-in.js']} />
13
14First, we'll setup a [React Context provider](https://reactjs.org/docs/context.html) that we can use to protect routes. This provider will use a mock implementation, you can replace it with your own [authentication provider](/guides/authentication/).
15
16```js context/auth.js
17import { router, useSegments } from 'expo-router';
18import React from 'react';
19
20const AuthContext = React.createContext(null);
21
22// This hook can be used to access the user info.
23export function useAuth() {
24  return React.useContext(AuthContext);
25}
26
27// This hook will protect the route access based on user authentication.
28function useProtectedRoute(user) {
29  const segments = useSegments();
30
31  React.useEffect(() => {
32    const inAuthGroup = segments[0] === '(auth)';
33
34    if (
35      // If the user is not signed in and the initial segment is not anything in the auth group.
36      !user &&
37      !inAuthGroup
38    ) {
39      // Redirect to the sign-in page.
40      router.replace('/sign-in');
41    } else if (user && inAuthGroup) {
42      // Redirect away from the sign-in page.
43      router.replace('/');
44    }
45  }, [user, segments]);
46}
47
48export function Provider(props) {
49  const [user, setAuth] = React.useState(null);
50
51  useProtectedRoute(user);
52
53  return (
54    <AuthContext.Provider
55      value={{
56        signIn: () => setAuth({}),
57        signOut: () => setAuth(null),
58        user,
59      }}>
60      {props.children}
61    </AuthContext.Provider>
62  );
63}
64```
65
66Now we can use this context to control the access to the routes, we'll do this by using a Layout Route that wraps all the screens which require authentication.
67
68```js app/_layout.js
69import { Slot } from 'expo-router';
70import { Provider } from '../context/auth';
71
72export default function Root() {
73  return (
74    // Setup the auth context and render our layout inside of it.
75    <Provider>
76      <Slot />
77    </Provider>
78  );
79}
80```
81
82Now we can create our `(auth)` group which is unprotected, this screen can toggle the authentication using `signIn()`.
83
84```js app/(auth)/sign-in.js
85import { Text, View } from 'react-native';
86import { useAuth } from '../../context/auth';
87
88export default function SignIn() {
89  const { signIn } = useAuth();
90  return (
91    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
92      <Text onPress={() => signIn()}>Sign In</Text>
93    </View>
94  );
95}
96```
97
98And finally we'll implement an authenticated screen which can sign out.
99
100```js app/index.js
101import { Text, View } from 'react-native';
102
103import { useAuth } from '../context/auth';
104
105export default function Index() {
106  const { signOut } = useAuth();
107  return (
108    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
109      <Text onPress={() => signOut()}>Sign Out</Text>
110    </View>
111  );
112}
113```
114
115Now if the authentication state changes globally, the user will be redirected to the appropriate route.
116
117{/* TODO: Guide on using redirects and per-screen behavior */}
118