Stockage du jeton d'authentification dans le store local, permettant l'utilisation de hooks

client/app/(tabs)/settings.tsx

@@ -1,16 +1,16 @@
-import * as SecureStore from '@/utils/SecureStore'
+import { useAuth } from '@/hooks/useAuth'
 import { useRouter } from 'expo-router'
 import { FAB, List, Surface } from 'react-native-paper'
 
 export default function HistoryScreen() {
   const router = useRouter()
-  const isLoggedIn = SecureStore.getItem("apiToken") !== null
+  const auth = useAuth()
   return (
     <Surface
       style={{ flex: 1 }}>
       <List.Item
           title="Connexion au serveur"
-          description={isLoggedIn ? "Vous êtes déjà connecté⋅e" : "Vous n'êtes pas connecté⋅e"}
+          description={auth.loggedIn ? "Vous êtes déjà connecté⋅e" : "Vous n'êtes pas connecté⋅e"}
           right={() => <FAB icon="login" size="small" onPress={() => router.navigate('/login')} />}
           onPress={() => router.navigate('/login')} />
     </Surface>

client/app/_layout.tsx

@@ -1,42 +1,33 @@
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
-import { Stack, useRouter } from "expo-router"
+import { Stack } from "expo-router"
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { StatusBar } from 'expo-status-bar'
 import { Provider as StoreProvider } from 'react-redux'
 import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper'
 import store from '@/utils/store'
-import * as SecureStore from '@/utils/SecureStore'
 import { useStartBackgroundFetchServiceEffect } from '@/utils/background'
 import { useStartGeolocationServiceEffect } from '@/utils/geolocation'
-import { useEffect } from 'react'
-import { useRouteInfo } from 'expo-router/build/hooks'
+import LoginProvider from '@/components/LoginProvider'
 
 export default function RootLayout() {
   useStartGeolocationServiceEffect()
   useStartBackgroundFetchServiceEffect()
   const colorScheme = useColorScheme()
-  const router = useRouter()
-  const route = useRouteInfo()
-
-  // Si on est pas connecté⋅e, on reste sur la fenêtre de connexion
-  useEffect(() => {
-    const isLoggedIn = SecureStore.getItem("apiToken") !== null
-    if (!isLoggedIn && route.pathname !== "/login")
-      router.navigate("/login")
-  }, [route, router])
 
   return (
     <StoreProvider store={store}>
-      <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
-        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-          <Stack>
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            <Stack.Screen name="login" options={{ headerShown: false }} />
-            <Stack.Screen name="+not-found" />
-          </Stack>
-          <StatusBar style="auto" />
-        </ThemeProvider>
-      </PaperProvider>
+      <LoginProvider loginRedirect={'/login'}>
+        <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
+          <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+            <Stack>
+              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+              <Stack.Screen name="login" options={{ headerShown: false }} />
+              <Stack.Screen name="+not-found" />
+            </Stack>
+            <StatusBar style="auto" />
+          </ThemeProvider>
+        </PaperProvider>
+      </LoginProvider>
     </StoreProvider>
   )
 }

client/app/login.tsx

@@ -1,3 +1,4 @@
+import { useAuth, useAuthLogin, useAuthLogout } from "@/hooks/useAuth"
 import * as SecureStore from "@/utils/SecureStore"
 import { useRouter } from "expo-router"
 import { useRef, useState } from "react"
@@ -6,9 +7,14 @@ import { Appbar, Button, Dialog, Portal, Surface, Text, TextInput } from "react-
 
 export default function Login() {
   const router = useRouter()
-  const [isLoggedIn, setIsLoggedIn] = useState(SecureStore.getItem("apiToken") !== null)
+
+  const auth = useAuth()
+  const authLogin = useAuthLogin()
+  const authLogout = useAuthLogout()
+
+  const isLoggedIn = auth.loggedIn
   const [loggingIn, setLoggingIn] = useState(false)
-  const [name, setName] = useState(SecureStore.getItem('apiName') ?? "")
+  const [name, setName] = useState(auth.name ?? "")
   const [password, setPassword] = useState("")
   const [errorDialogVisible, setErrorDialogVisible] = useState(false)
   const [errorTitle, setErrorTitle] = useState("")
@@ -45,6 +51,7 @@ export default function Login() {
       return
     }
     setLoggingIn(false)
+    authLogin({ name: name, token: resp.accessToken })
     SecureStore.setItem("apiName", name)
     if (Platform.OS !== "web") {
       // Le stockage navigateur n'est pas sûr, on évite de stocker un mot de passe à l'intérieur
@@ -58,10 +65,10 @@ export default function Login() {
   }
 
   async function logout() {
+    authLogout()
     await SecureStore.deleteItemAsync("apiName")
     await SecureStore.deleteItemAsync("apiPassword")
     await SecureStore.deleteItemAsync("apiToken")
-    setIsLoggedIn(false)
   }
 
   return (