From e5e998df36186a2ca13ae05670f0ebcfa73efe12 Mon Sep 17 00:00:00 2001 From: Loewy Date: Wed, 7 Feb 2024 10:57:32 -0800 Subject: [PATCH 1/7] sketch out nav with auth --- App.tsx | 7 +++++-- package.json | 3 ++- src/lib/loading/index.tsx | 36 ++++++++++++++++++++++++++++++++ src/navigation/app-navigator.tsx | 24 +++++++++++++++------ 4 files changed, 61 insertions(+), 9 deletions(-) create mode 100644 src/lib/loading/index.tsx diff --git a/App.tsx b/App.tsx index 5d69b5f..392327a 100644 --- a/App.tsx +++ b/App.tsx @@ -4,6 +4,7 @@ import AppNavigator from "./src/navigation/app-navigator"; import { DEV_USER_ID } from "@env"; import AsyncStorage from "@react-native-async-storage/async-storage"; +import Loading from "./src/lib/loading"; // TODO: move to different file? const SetAuthHeaderBasedOnEnv = () => { @@ -33,8 +34,10 @@ const SetAuthHeaderBasedOnEnv = () => { const App: React.FC = () => { return ( - - + + + + ); }; diff --git a/package.json b/package.json index b9b2cbd..e267be4 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "NODE_ENV=development && expo start", + "start:test": "NODE_ENV=test && expo start", "start:android": "expo start --android", "start:ios": "expo start --ios", "android": "expo run:android", @@ -11,7 +12,7 @@ "android:test": "node ./start.js test", "ios": "expo run:ios", "ios:dev": "NODE_ENV=development expo run:ios", - "ios:prod": "NODE_ENV=production expo run:ios", + "ios:test": "NODE_ENV=test expo run:ios", "web": "expo start --web", "lint": "eslint . --ext .js,.ts,.tsx", "lint:fix": "eslint . --ext .ts,.tsx --fix", diff --git a/src/lib/loading/index.tsx b/src/lib/loading/index.tsx new file mode 100644 index 0000000..ebf72dc --- /dev/null +++ b/src/lib/loading/index.tsx @@ -0,0 +1,36 @@ +import React, { createContext, useEffect, useState } from 'react'; +import { ActivityIndicator, StyleSheet, View } from 'react-native'; + +import { colors } from '../../styles'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +const LoadingContext = createContext(false); + +export default function Loading({ children }) { + const [loading, setLoading] = useState(true); + + useEffect(() => { + const checkHasToken = async () => { + const hasToken = await AsyncStorage.getItem('token'); + // needs to connect to app state + return hasToken + } + + checkHasToken() + .then(() => setLoading(false)) + }, []); + + if (!loading) { + return {children}; + } + + return ( + + + + ); +} + +const s = StyleSheet.create({ + container: { flex: 1, justifyContent: 'center', alignItems: 'center' } +}); \ No newline at end of file diff --git a/src/navigation/app-navigator.tsx b/src/navigation/app-navigator.tsx index 32ea4ce..4935613 100644 --- a/src/navigation/app-navigator.tsx +++ b/src/navigation/app-navigator.tsx @@ -8,6 +8,7 @@ import { useColorScheme } from "react-native"; import Login from "../screens/login"; import Tabs from "./tab-navigator"; +import AsyncStorage from "@react-native-async-storage/async-storage"; const Stack = createNativeStackNavigator(); @@ -18,11 +19,6 @@ const ScreensStack = () => ( component={Tabs} options={{ headerShown: false }} /> - ); /** @@ -35,11 +31,27 @@ const ScreensStack = () => ( export default function AppNavigator(): React.JSX.Element { // useColorScheme get's the theme from device settings const scheme = useColorScheme(); + const getToken = async () => { + const token = await AsyncStorage.getItem('token') + console.log('token', token) + return token + } + return ( - + {getToken ? ( + + ) : ( + + )} + + ); From 07db6e21db61af411a22f7be81d54dae8716bd9e Mon Sep 17 00:00:00 2001 From: Loewy Date: Wed, 7 Feb 2024 11:08:25 -0800 Subject: [PATCH 2/7] undo some changes to keep history clean --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e267be4..5e547a6 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "NODE_ENV=development && expo start", - "start:test": "NODE_ENV=test && expo start", + "start:test": "NODE_ENV=development && expo start", "start:android": "expo start --android", "start:ios": "expo start --ios", "android": "expo run:android", @@ -12,7 +12,7 @@ "android:test": "node ./start.js test", "ios": "expo run:ios", "ios:dev": "NODE_ENV=development expo run:ios", - "ios:test": "NODE_ENV=test expo run:ios", + "ios:prod": "NODE_ENV=production expo run:ios", "web": "expo start --web", "lint": "eslint . --ext .js,.ts,.tsx", "lint:fix": "eslint . --ext .ts,.tsx --fix", From b9221fa94919a709f5d61f88c6380fe998306439 Mon Sep 17 00:00:00 2001 From: Loewy Date: Wed, 7 Feb 2024 15:39:11 -0800 Subject: [PATCH 3/7] wip: almost there, needs dev mode sorted + loading --- App.tsx | 39 ++------------ package.json | 3 +- src/auth/firebase-auth.tsx | 6 +-- src/component/buttons/sign-out.tsx | 18 +++---- src/context/auth-context.tsx | 82 ++++++++++++++++++++++++++++++ src/context/index.ts | 3 ++ src/navigation/app-navigator.tsx | 17 ++----- src/screens/login.tsx | 53 ++----------------- src/screens/session.tsx | 21 +++++++- 9 files changed, 130 insertions(+), 112 deletions(-) create mode 100644 src/context/auth-context.tsx create mode 100644 src/context/index.ts diff --git a/App.tsx b/App.tsx index 392327a..04c1986 100644 --- a/App.tsx +++ b/App.tsx @@ -1,43 +1,14 @@ -import React, { useEffect } from "react"; -import { ClientProvider, useAuthHeader } from "./src/graphql/client"; +import React from "react"; +import { AuthProvider } from "./src/context"; +import { ClientProvider } from "./src/graphql/client"; import AppNavigator from "./src/navigation/app-navigator"; -import { DEV_USER_ID } from "@env"; -import AsyncStorage from "@react-native-async-storage/async-storage"; -import Loading from "./src/lib/loading"; - -// TODO: move to different file? -const SetAuthHeaderBasedOnEnv = () => { - const { setAuthHeader } = useAuthHeader(); - - useEffect(() => { - const setAuthAsync = async () => { - if (DEV_USER_ID) { - console.log("Setting fake authorization user to: ", DEV_USER_ID); - setAuthHeader({ key: "user_id", value: DEV_USER_ID }); - } else { - // Fetch token for authenticated users in production - const token = await AsyncStorage.getItem("token"); // get from not firebase auth ASYNC - if (token) { - console.log("Setting firebase auth token"); - setAuthHeader({ key: "Authorization", value: `Bearer ${token}` }); - } - } - }; - - setAuthAsync(); - }, [setAuthHeader]); - - return null; -}; - const App: React.FC = () => { return ( - - + - + ); }; diff --git a/package.json b/package.json index 5e547a6..9c6208f 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "NODE_ENV=development && expo start", - "start:test": "NODE_ENV=development && expo start", "start:android": "expo start --android", "start:ios": "expo start --ios", "android": "expo run:android", @@ -12,7 +11,7 @@ "android:test": "node ./start.js test", "ios": "expo run:ios", "ios:dev": "NODE_ENV=development expo run:ios", - "ios:prod": "NODE_ENV=production expo run:ios", + "ios:prod": "NODE_ENV=test expo run:ios", "web": "expo start --web", "lint": "eslint . --ext .js,.ts,.tsx", "lint:fix": "eslint . --ext .ts,.tsx --fix", diff --git a/src/auth/firebase-auth.tsx b/src/auth/firebase-auth.tsx index 732b171..35e37c4 100644 --- a/src/auth/firebase-auth.tsx +++ b/src/auth/firebase-auth.tsx @@ -1,4 +1,3 @@ -import AsyncStorage from "@react-native-async-storage/async-storage"; import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth"; import { Alert } from "react-native"; @@ -47,7 +46,6 @@ export const getCurrentUserToken = async (): Promise => { return null; }; -export const handleSignOut = async (): Promise => { - await AsyncStorage.removeItem("token"); - await auth().signOut(); +export const handleSignOut = (): Promise => { + return auth().signOut(); }; diff --git a/src/component/buttons/sign-out.tsx b/src/component/buttons/sign-out.tsx index 3c65bca..ea4e2b7 100644 --- a/src/component/buttons/sign-out.tsx +++ b/src/component/buttons/sign-out.tsx @@ -1,18 +1,16 @@ import React from "react"; import { Button } from "react-native"; -import { handleSignOut } from "../../auth"; +import { useAuth } from "../../context"; import { useAuthHeader } from "../../graphql/client"; export default function SignOutButton(): React.JSX.Element { + const { logOut } = useAuth(); const { setAuthHeader } = useAuthHeader(); - return ( -