Implement Authentication Flow with React Navigation and AsyncStorage

App.tsx

@@ -0,0 +1,10 @@
+import { AuthProvider } from './app/src/context/AuthContext';
+import AppNavigator from './app/src/navigation/AppNavigator';
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <AppNavigator />
+    </AuthProvider>
+  );
+}

app.json

@@ -20,11 +20,9 @@
     },
     "web": {
       "bundler": "metro",
-      "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router",
       [
         "expo-splash-screen",
         {
@@ -34,9 +32,6 @@
           "backgroundColor": "#ffffff"
         }
       ]
-    ],
-    "experiments": {
-      "typedRoutes": true
-    }
+    ]
   }
 }

app/src/context/AuthContext.tsx

@@ -0,0 +1,74 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createContext, useEffect, useReducer } from 'react';
+
+type State = {
+  isLoading: boolean;
+  isAuthenticated: boolean;
+};
+
+type Action =
+  | {type: 'RESTORE'}
+  | {type: 'LOGIN'}
+  | {type: 'LOGOUT'};
+
+const initialState: State = {
+  isLoading: true,
+  isAuthenticated: false,
+};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'RESTORE':
+      return {isLoading: false, isAuthenticated: true};
+    case 'LOGIN':
+      return {isLoading: false, isAuthenticated: true};
+    case 'LOGOUT':
+      return {isLoading: false, isAuthenticated: false};
+    default:
+      return state;
+  }
+}
+
+export const AuthContext = createContext<any>(null);
+
+export const AuthProvider: React.FC<{children: React.ReactNode}> = ({children}) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    const bootstrap = async () => {
+      const accessToken = await AsyncStorage.getItem('accessToken');
+      const expiry = await AsyncStorage.getItem('tokenExpiry');
+
+      if (accessToken && expiry && Date.now() < Number(expiry)) {
+        dispatch({type: 'RESTORE'});
+      } else {
+        dispatch({type: 'LOGOUT'});
+      }
+    };
+
+    bootstrap();
+  }, []);
+
+  const login = async (access: string, refresh: string) => {
+    const expiry = Date.now() + 60 * 60 * 1000; // 1 hour
+
+    await AsyncStorage.multiSet([
+      ['accessToken', access],
+      ['refreshToken', refresh],
+      ['tokenExpiry', expiry.toString()],
+    ]);
+
+    dispatch({type: 'LOGIN'});
+  };
+
+  const logout = async () => {
+    await AsyncStorage.clear();
+    dispatch({type: 'LOGOUT'});
+  };
+
+  return (
+    <AuthContext.Provider value={{...state, login, logout}}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

app/src/navigation/AppNavigator.tsx

@@ -0,0 +1,24 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { useContext } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { AuthContext } from '../context/AuthContext';
+import AppStack from './AppStack';
+import AuthStack from './AuthStack';
+
+export default function AppNavigator() {
+  const {isLoading, isAuthenticated} = useContext(AuthContext);
+
+  if (isLoading) {
+    return (
+      <View style={{flex: 1, justifyContent: 'center'}}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  return (
+    <NavigationContainer>
+      {isAuthenticated ? <AppStack /> : <AuthStack />}
+    </NavigationContainer>
+  );
+}

app/src/navigation/AppStack.tsx

@@ -0,0 +1,12 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from '../screens/HomeScreen';
+
+const Stack = createNativeStackNavigator();
+
+export default function AppStack() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+    </Stack.Navigator>
+  );
+}

app/src/navigation/AuthStack.tsx

@@ -0,0 +1,12 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import LoginScreen from '../screens/LoginScreen';
+
+const Stack = createNativeStackNavigator();
+
+export default function AuthStack() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Login" component={LoginScreen} />
+    </Stack.Navigator>
+  );
+}

app/src/screens/HomeScreen.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { Button, View } from 'react-native';
+import { AuthContext } from '../context/AuthContext';
+
+export default function HomeScreen() {
+  const {logout} = useContext(AuthContext);
+
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <Button title="Logout" onPress={logout} />
+    </View>
+  );
+}