upd: login

Deskripsi:
- login token
- logout

No Issues

app/(application)/_layout.tsx

@@ -4,10 +4,22 @@ import HeaderRightDivisionList from "@/components/division/headerDivisionList";
 import HeaderMemberList from "@/components/member/headerMemberList";
 import HeaderRightProjectList from "@/components/project/headerProjectList";
 import { Headers } from "@/constants/Headers";
-import { router, Stack } from "expo-router";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Redirect, router, Stack } from "expo-router";
 import { StatusBar } from 'expo-status-bar';
+import { Text } from "react-native";
 
 export default function RootLayout() {
+   const { token, isLoading } = useAuthSession()
+
+   if (isLoading) {
+      return <Text>Loading...</Text>;
+   }
+
+   if (!token?.current) {
+      return <Redirect href="/" />;
+   }
+
    return (
       <>
          <Stack screenOptions={Headers.shadow}>

app/(application)/profile.tsx

@@ -3,11 +3,14 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import ItemDetailMember from "@/components/itemDetailMember";
 import Styles from "@/constants/Styles";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { Octicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
 
 export default function Profile() {
+   const {signOut, token} = useAuthSession()
+
    return (
       <SafeAreaView>
          <Stack.Screen
@@ -22,7 +25,8 @@ export default function Profile() {
                      AlertKonfirmasi({
                         title: 'Keluar',
                         desc: 'Apakah anda yakin ingin keluar?',
-                        onPress: () => { router.push('/') }
+                        // onPress: () => { router.push('/') }
+                        onPress: () => { signOut()}
                      })
                   }}
                />

app/_layout.tsx

@@ -1,3 +1,4 @@
+import AuthProvider from '@/providers/AuthProvider';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
@@ -25,13 +26,14 @@ export default function RootLayout() {
 
   return (
     <>
+      <AuthProvider>
         <Stack>
           <Stack.Screen name="index" options={{ headerShown: false }} />
           <Stack.Screen name="verification" options={{ headerShown: false }} />
           <Stack.Screen name="(application)" options={{ headerShown: false }} />
         </Stack>
         <StatusBar style="auto" />
-
+      </AuthProvider>
     </>
   );
 }

app/index.tsx

@@ -1,10 +1,20 @@
 import { ButtonForm } from "@/components/buttonForm";
 import { InputForm } from "@/components/inputForm";
 import Styles from "@/constants/Styles";
-import { router } from "expo-router";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Redirect, router } from "expo-router";
 import { Image, Text, View } from "react-native";
 
 export default function Index() {
+   const { token, isLoading } = useAuthSession()
+   if (isLoading) {
+      return <Text>Loading...</Text>;
+   }
+
+   if (token?.current) {
+      return <Redirect href="/home" />;
+   }
+
    return (
       <View style={Styles.wrapLogin} >
          <View style={{ alignItems: "center", marginVertical: 50 }}>

app/verification.tsx

@@ -1,6 +1,7 @@
 import { ButtonForm } from "@/components/buttonForm";
 import Styles from "@/constants/Styles";
-import { router } from "expo-router";
+import { useAuthSession } from "@/providers/AuthProvider";
+import CryptoES from "crypto-es";
 import React, { useState } from "react";
 import { Image, Text, View } from "react-native";
 import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell, } from 'react-native-confirmation-code-field';
@@ -13,7 +14,17 @@ export default function Index() {
       setValue,
    });
 
-
+   const { signIn } = useAuthSession();
+   const login = (): void => {
+      const random: string = 'contohLoginMobileDarmasaba';
+      var mytexttoEncryption = "contohLoginMobileDarmasaba"
+      const encrypted = CryptoES.AES.encrypt(mytexttoEncryption, "your password").toString();
+      // var C = require("crypto-js");
+      // var Decrypted = C.AES.decrypt(encrypted, "your password");
+      // var result = Decrypted.toString(C.enc.Utf8);
+      // console.log(encrypted,result);
+      signIn(encrypted);
+   }
    return (
       <View style={Styles.wrapLogin} >
          <View style={{ alignItems: "center", marginVertical: 50 }}>
@@ -45,7 +56,11 @@ export default function Index() {
                </Text>
             )}
          />
-         <ButtonForm text="SUBMIT" onPress={() => { router.push("/home") }} />
+         <ButtonForm
+            text="SUBMIT"
+            // onPress={() => { router.push("/home") }}
+            onPress={login}
+         />
          <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}>
             Tidak Menerima kode verifikasi? Kirim Ulang
          </Text>

package.json

@@ -16,8 +16,11 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
+    "crypto-es": "^2.1.0",
+    "crypto-js": "^3.1.9-1",
     "dayjs": "^1.11.13",
     "expo": "~52.0.37",
     "expo-blur": "~14.0.3",
@@ -54,6 +57,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@types/crypto-js": "^4.2.2",
     "@types/jest": "^29.5.12",
     "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^18.3.0",

providers/AuthProvider.tsx

@@ -0,0 +1,60 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {router} from "expo-router";
+import {createContext, MutableRefObject, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';
+
+const AuthContext = createContext<{
+  signIn: (arg0: string) => void;
+  signOut: () => void
+  token: MutableRefObject<string | null> | null;
+  isLoading: boolean
+}>({
+  signIn: () => null,
+  signOut: () => null,
+  token: null,
+  isLoading: true
+});
+
+// This hook can be used to access the user info.
+export function useAuthSession() {
+  return useContext(AuthContext);
+}
+
+export default function AuthProvider  ({children}:{children: ReactNode}): ReactNode {
+  const tokenRef = useRef<string|null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    (async ():Promise<void> => {
+      const token = await AsyncStorage.getItem('@token');
+      tokenRef.current = token || '';
+      setIsLoading(false);
+    })()
+  }, []);
+
+  const signIn = useCallback(async (token: string) => {
+    await AsyncStorage.setItem('@token', token);
+    tokenRef.current = token;
+    router.replace('/home')
+  }, []);
+
+  const signOut = useCallback(async () => {
+    await AsyncStorage.setItem('@token', '');
+    tokenRef.current = null;
+    router.replace('/');
+  }, []);
+
+  console.log('token', tokenRef.current);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        signIn,
+        signOut,
+        token: tokenRef,
+        isLoading
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};