Merge pull request #15 from techstartucalgary/James/auth-setup

James/auth setup

frontend/App.tsx

@@ -1,17 +1,23 @@
 import 'react-native-gesture-handler';
+import { useState } from 'react';
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query"
 import { ThemeContextProvider } from './src/contexts/themeContext';
 import { AuthContextProvider } from './src/contexts/authContext';
 import { LoadingContextProvider } from './src/contexts/loadingContext';
 import Navigation from './src/navigation/Navigation';
 
 export default function App() {
+    const [queryClient] = useState(() => new QueryClient());
+
     return (
-        <ThemeContextProvider>
-            <AuthContextProvider>
-                <LoadingContextProvider>
-                    <Navigation />
-                </LoadingContextProvider>
-            </AuthContextProvider>
-        </ThemeContextProvider>
+        <QueryClientProvider client={queryClient}>
+            <ThemeContextProvider>
+                <AuthContextProvider>
+                    <LoadingContextProvider>
+                        <Navigation />
+                    </LoadingContextProvider>
+                </AuthContextProvider>
+            </ThemeContextProvider>
+        </QueryClientProvider>
     )
 }

frontend/app.json

@@ -15,7 +15,10 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "config": {
+        "usesNonExemptEncryption": false
+      }
     },
     "android": {
       "adaptiveIcon": {

frontend/package.json

@@ -21,7 +21,10 @@
     "@react-navigation/material-top-tabs": "^6.6.5",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
+    "@tanstack/react-query": "^5.8.4",
+    "axios": "^1.6.1",
     "expo": "~49.0.10",
+    "expo-secure-store": "~12.3.1",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-native": "^0.72.6",

frontend/src/contexts/authContext.tsx

@@ -1,14 +1,79 @@
 import type {PropsWithChildren} from 'react';
-import {createContext, useState} from 'react';
+import {createContext, useCallback, useEffect, useState} from 'react';
+import axios from 'axios';
+import * as SecureStore from 'expo-secure-store';
 
-type authContext = { user: { name: string, email: string } | null };
+const setAxiosTokenHeader = (token: string) => axios.defaults.headers.common['authToken'] = `${token}`
+
+const removeAxiosTokenHeader = () => axios.defaults.headers.common['authToken'] = ''
+
+const TOKEN_KEY = 'cba-secure-token';
+type TOKEN_KEY_TYPE = typeof TOKEN_KEY
+
+const setTokenInSecureStore = async (key: TOKEN_KEY_TYPE, value: string) => await SecureStore.setItemAsync(key.trim(), value)
+
+const getTokenFromSecureStore = async (key: TOKEN_KEY_TYPE) => await SecureStore.getItemAsync(key.trim())
+
+const deleteTokenFromSecureStore = async (key: TOKEN_KEY_TYPE) => await SecureStore.deleteItemAsync(key.trim())
+
+
+type userRegistrationData = {
+    name: string,
+    email: string
+}
+type authContext = { 
+    user: { name: string, email: string } | null, 
+    registerUser: (arg: userRegistrationData) => Promise<void>
+    signIn: (email: string) => Promise<void>
+    logOut: () => Promise<void>
+};
 const AuthContext = createContext<authContext | null>(null);
 
 export const AuthContextProvider = ({ children }: PropsWithChildren): JSX.Element => {
     const [user, setUser] = useState(null);
 
+    const registerUser = useCallback(async (data: userRegistrationData) => {
+        try {
+            const { name, email } = data
+        } catch (error) {
+            console.log(error)   
+        }
+    }, [])
+
+    const signIn = useCallback(async (email: string) => {
+        try{
+            let tokenFromBackend = 'tokenFromBackend'
+            setAxiosTokenHeader(tokenFromBackend)
+            await setTokenInSecureStore(TOKEN_KEY, tokenFromBackend);
+        } catch(error) {
+            console.log(error) 
+        }
+    }, [])
+
+    const logOut = useCallback(async () => {
+        try {
+            await deleteTokenFromSecureStore(TOKEN_KEY);
+            removeAxiosTokenHeader()
+            setUser(null)
+        } catch (error) {
+            console.log(error)
+        }
+    }, [])
+
+    useEffect(() => {
+        const loadToken = async () => {
+            const token = await getTokenFromSecureStore(TOKEN_KEY)
+            if(token) {
+                setAxiosTokenHeader(token)
+            }
+
+        }
+
+        loadToken()
+    }, [])
+
     return (
-        <AuthContext.Provider value={{ user }}>
+        <AuthContext.Provider value={{ user, registerUser, signIn, logOut }}>
             {children}
         </AuthContext.Provider>
     )

frontend/src/screens/Home.tsx

@@ -16,7 +16,8 @@ export default function Home() {
                 .then(data => {
                     console.log(data)
                     stopLoading()
-                });
+                })
+                .catch(err => console.log(err));
         }, 3000)
     }