auth with context api

Author: flexbox

apps/next/pages/home.tsx

@@ -0,0 +1,3 @@
+import { HomeScreen } from 'app/features/home/screen'
+
+export default HomeScreen

packages/app/features/auth/AuthContext.tsx

@@ -0,0 +1,24 @@
+
+import type { FunctionComponent } from "react";
+import React, { createContext, useContext, useState } from "react";
+
+interface AuthContextProps {
+  user: boolean;
+  setUser: (user: boolean) => void;
+}
+
+const AuthContext = createContext<AuthContextProps>(
+  {} as AuthContextProps
+);
+
+export const AuthenticationProvider: FunctionComponent = ({ children }) => {
+  const [user, setUser] = useState<boolean>(false);
+
+  return (
+    <AuthContext.Provider value={{ user, setUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuthentication = () => useContext(AuthContext);

packages/app/features/auth/LoginScreen.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from 'react'
-import { StyleSheet, TouchableOpacity, Text, View } from 'react-native'
+import { StyleSheet, TouchableOpacity, Text, View, Platform } from 'react-native'
 import { Button, Colors, TextInput } from 'react-native-paper'
 import { useRouter } from 'solito/router'
-
-// import { Routes } from '../navigation/Routes'
-// import { useAuthentication } from '../context/Authentication'
+import { useAuthentication } from './AuthContext'
 
 export const LoginScreen = () => {
   const [email, setEmail] = useState('')
@@ -17,9 +15,12 @@ export const LoginScreen = () => {
     push('/terms/')
   }
 
-  // const { setUser } = useAuthentication()
+  const { setUser } = useAuthentication()
   function handleLogin() {
-    // setUser(true)
+    setUser(true)
+    if(Platform.OS ==='web'){
+      push('/home')
+    }
   }
 
   function toggleSecureIcon() {

packages/app/features/auth/TermsScreen.tsx

@@ -3,9 +3,9 @@ import { View, Text, Image, ScrollView } from "react-native";
 import { Appbar, Colors, Title } from "react-native-paper";
 import { useRouter } from "solito/router";
 
-
 export function TermsScreen() {
   const { back } = useRouter()
+
   function goBack() {
     back()
   }

packages/app/features/user/detail-screen.tsx

@@ -13,7 +13,7 @@ export function UserDetailScreen() {
         sx={{ textAlign: 'center', mb: 16, fontWeight: 'bold' }}
       >{`User ID: ${id}`}</Text>
 
-      <TextLink href="/">👈 Go Home</TextLink>
+      <TextLink href="/home">👈 Go Home</TextLink>
     </View>
   )
 }

packages/app/navigation/native/AuthNavigator.tsx

@@ -0,0 +1,29 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { LoginScreen } from 'app/features/auth/LoginScreen'
+import { TermsScreen } from 'app/features/auth/TermsScreen'
+
+const Stack = createNativeStackNavigator<{
+  login: undefined
+  terms: undefined
+}>()
+
+export function AuthNavigator() {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen
+        name="login"
+        component={LoginScreen}
+        options={{
+          title: 'Login',
+        }}
+      />
+      <Stack.Screen
+        name="terms"
+        component={TermsScreen}
+        options={{
+          title: 'Terms',
+        }}
+      />
+    </Stack.Navigator>
+  )
+}

packages/app/navigation/native/HomeNavigator.tsx

@@ -0,0 +1,31 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { HomeScreen } from 'app/features/home/screen'
+import { UserDetailScreen } from 'app/features/user/detail-screen'
+
+const Stack = createNativeStackNavigator<{
+  home: undefined
+  'user-detail': {
+    id: string
+  }
+}>()
+
+export function HomeNavigator() {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen
+        name="home"
+        component={HomeScreen}
+        options={{
+          title: 'Home',
+        }}
+      />
+      <Stack.Screen
+        name="user-detail"
+        component={UserDetailScreen}
+        options={{
+          title: 'User',
+        }}
+      />
+    </Stack.Navigator>
+  )
+}

packages/app/navigation/native/Routes.ts

@@ -1,50 +1,28 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { useAuthentication } from 'app/features/auth/AuthContext'
 import { LoginScreen } from 'app/features/auth/LoginScreen'
 import { TermsScreen } from 'app/features/auth/TermsScreen'
 
 import { HomeScreen } from '../../features/home/screen'
 import { UserDetailScreen } from '../../features/user/detail-screen'
+import { AuthNavigator } from './AuthNavigator'
+import { HomeNavigator } from './HomeNavigator'
 
 const Stack = createNativeStackNavigator<{
-  home: undefined
-  terms: undefined
-  login: undefined
-  'user-detail': {
-    id: string
-  }
+  'auth-stack': undefined
+  'home-stack': undefined
 }>()
 
 export function NativeNavigation() {
+  const { user } = useAuthentication();
+
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
-      <Stack.Screen
-        name="login"
-        component={LoginScreen}
-        options={{
-          title: 'Login',
-        }}
-      />
-      <Stack.Screen
-        name="terms"
-        component={TermsScreen}
-        options={{
-          title: 'Terms',
-        }}
-      />
-      <Stack.Screen
-        name="home"
-        component={HomeScreen}
-        options={{
-          title: 'Home',
-        }}
-      />
-      <Stack.Screen
-        name="user-detail"
-        component={UserDetailScreen}
-        options={{
-          title: 'User',
-        }}
-      />
+      {!user ? (
+        <Stack.Screen name="auth-stack" component={AuthNavigator} />
+      ) : (
+        <Stack.Screen name="home-stack" component={HomeNavigator} />
+      )}
     </Stack.Navigator>
   )
 }

packages/app/navigation/native/index.tsx

@@ -1,10 +1,14 @@
+import { AuthenticationProvider } from 'app/features/auth/AuthContext'
+import React from 'react'
 import { Dripsy } from './dripsy'
 import { NavigationProvider } from './navigation'
 
 export function Provider({ children }: { children: React.ReactNode }) {
   return (
-    <NavigationProvider>
-      <Dripsy>{children}</Dripsy>
-    </NavigationProvider>
+    <AuthenticationProvider>
+      <NavigationProvider>
+        <Dripsy>{children}</Dripsy>
+      </NavigationProvider>
+    </AuthenticationProvider>
   )
 }

packages/app/provider/index.tsx

@@ -18,7 +18,6 @@
 ## 🗂 Folder layout
 
 - `apps` entry points for each app
-
   - `expo`
   - `next`
 
@@ -40,7 +39,8 @@ yarn native
 
 ## 🆕 Add new dependencies
 
-### Pure JS dependencies
+<details>
+<summary>Pure JS dependencies</summary>
 
 If you're installing a JavaScript-only dependency that will be used across platforms, install it in `packages/app`:
 
@@ -50,8 +50,10 @@ yarn add date-fns
 cd ../..
 yarn
 ```
+</details>
 
-### Native dependencies
+<details>
+<summary>Native dependencies</summary>
 
 If you're installing a library with any native code, you must install it in `apps/expo`:
 
@@ -64,6 +66,7 @@ yarn
 ```
 
 You can also install the native library inside of `packages/app` if you want to get autoimport for that package inside of the `app` folder. However, you need to be careful and install the _exact_ same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use `lerna-update-wizard` to help with this (you don't need to use Lerna to use that lib).
+</details>
 
 ## 👏 Kudos