wip: token passed to headers, need to make hook for onAuthStateChanged

2024-02-05 23:58:39 -08:00 · 2024-02-05 23:58:39 -08:00 · d93d73dc3a
commit d93d73dc3a
parent 6bfd0621ad b88f5bf2e4
11 changed files with 107 additions and 45 deletions
--- a/.env
+++ b/.env
@ -1,2 +0,0 @@
-# .env.development
-API_URI=https://api-dev.railbird.ai/graphql
--- a/.env.development
+++ b/.env.development
@ -1,3 +1,3 @@
 # .env.development
-API_URI="http://192.168.1.28:8000/graphql"
-DEV_USER_ID=1
+EXPO_PUBLIC_API_URI="http://192.168.1.28:8000/graphql"
+EXPO_PUBLIC_DEV_USER_ID=1
--- a/.env.production
+++ b/.env.production
@ -1,2 +1,2 @@
 # .env.production
-API_URI=https://api-dev.railbird.ai/graphql
+EXPO_PUBLIC_API_URI=https://api-dev.railbird.ai/graphql
--- a/App.tsx
+++ b/App.tsx
@ -1,8 +1,9 @@
-import { DEV_USER_ID } from "@env";
 import React, { useEffect } from "react";
 import { ClientProvider, useAuthHeader } from "./graphql/client";
 import AppNavigator from "./navigation/app-navigator";
-import { getCurrentUserToken } from "./auth";
+
+import { DEV_USER_ID } from "./config";
+import AsyncStorage from "@react-native-async-storage/async-storage";

 // TODO: can be done when we go with a src top level directory -- should live on cofig
 const SetAuthHeaderBasedOnEnv = () => {
@ -11,17 +12,17 @@ const SetAuthHeaderBasedOnEnv = () => {

 	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 getCurrentUserToken();
-			if (token) {
-				console.log("Setting firebase auth token");
-				setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
+			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}` });
+				} // handle error
 			}
-			// }
 		};

 		setAuthAsync();
--- a/auth/firebase-auth.tsx
+++ b/auth/firebase-auth.tsx
@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';
 import { Alert } from 'react-native';

@ -23,6 +24,8 @@ export const confirmCode = async (confirm: FirebaseAuthTypes.ConfirmationResult,
  }
 };

+// TODO: eslint not detecting ts?
+// eslint-disable-next-line no-unused-vars
 export const onAuthStateChanged = (callback: (user: FirebaseAuthTypes.User | null) => void) => {
  return auth().onAuthStateChanged(callback);
 };
@ -37,12 +40,6 @@ export const getCurrentUserToken = async (): Promise<string | null> => {
 };

 export const signOut = async (): Promise<void> => {
-  try {
-    auth().signOut()
-    // tie in to AppNav 
-  } catch (err) {
-    console.error(err)
-    // toggle appnav state regardless
-    // Handle sign out error - have to look into best way to do this - asyncstorage? 
-  }
+  await AsyncStorage.removeItem('token');
+  auth().signOut()
 }
--- a/config.ts
+++ b/config.ts
@ -0,0 +1,21 @@
+const warnEnv = [
+  'EXPO_PUBLIC_API_URI'
+];
+
+const errMsg =
+  'does not exist in the environment.';
+
+const missingEnv: string[] = [];
+
+for (const key of warnEnv) {
+  if (!process.env[key]) {
+    missingEnv.push(key);
+  }
+}
+
+if (missingEnv.length > 0) {
+  throw new Error(`${missingEnv.join(', ')} ${errMsg}`);
+}
+
+export const API_URI = process.env.EXPO_PUBLIC_API_URI;
+export const DEV_USER_ID = process.env.EXPO_PUBLIC_DEV_USER_ID ?? false;
--- a/env.d.tsx
+++ b/env.d.tsx
@ -1,4 +1,7 @@
-declare module "@env" {
-	export const API_URI: string;
-	export const DEV_USER_ID: string;
-}
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+declare namespace NodeJS {
+  interface ProcessEnv {
+    EXPO_PUBLIC_API_URI: string;
+		EXPO_PUBLIC_DEV_USER_ID?: string;
+  }
+}
--- a/graphql/client.tsx
+++ b/graphql/client.tsx
@ -6,7 +6,7 @@ import {
 	InMemoryCache,
 	from,
 } from "@apollo/client";
-import { API_URI } from "@env";
+
 import React, {
 	ReactNode,
 	createContext,
@ -15,17 +15,19 @@ import React, {
 	useState,
 } from "react";

+import { API_URI } from '../config'
+
 type Props = {
 	children: ReactNode;
 };

 export const AuthHeaderContext = createContext<
 	| {
-			authHeader: { key: string; value: string };
-			setAuthHeader: React.Dispatch<
-				React.SetStateAction<{ key: string; value: string }>
-			>;
-	  }
+		authHeader: { key: string; value: string };
+		setAuthHeader: React.Dispatch<
+			React.SetStateAction<{ key: string; value: string }>
+		>;
+	}
 	| undefined
 >(undefined);

--- a/package.json
+++ b/package.json
@ -7,9 +7,11 @@
 		"start:android": "expo start --android",
 		"start:ios": "expo start --ios",
 		"android": "expo run:android",
-		"android:prod": "cp .env.production .env && cat .env && NODE_ENV=production expo run:android",
+		"android:dev": "NODE_ENV=development expo run:android",
+		"android:prod": "NODE_ENV=production expo run:android",
 		"ios": "expo run:ios",
-		"ios:prod": "cp .env.production .env && expo run:ios",
+		"ios:dev": "NODE_ENV=development 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",
@ -23,6 +25,7 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.8.8",
+		"@react-native-async-storage/async-storage": "^1.21.0",
 		"@react-native-camera-roll/camera-roll": "^7.4.0",
 		"@react-native-firebase/app": "^18.8.0",
 		"@react-native-firebase/auth": "^18.8.0",
@ -48,7 +51,7 @@
 		"graphql": "^16.8.1",
 		"jest": "^29.2.1",
 		"jest-expo": "~49.0.0",
-		"railbird-gql": "git+https://dev.railbird.ai/railbird/railbird-gql.git#db82f66c5d3600d90f09c813f71287e176dc078b",
+		"railbird-gql": "git+https://dev.railbird.ai/railbird/railbird-gql.git#838304efdd49a093bd8f9cea6cd6ef9e306d888a",
 		"react": "18.2.0",
 		"react-native": "0.72.6",
 		"react-native-dotenv": "^3.4.9",
--- a/screens/login.tsx
+++ b/screens/login.tsx
@ -11,17 +11,32 @@ import {
 import { signInWithPhoneNumber, confirmCode, onAuthStateChanged, signOut } from '../auth'; // Adjust the path as necessary
 import { FirebaseAuthTypes } from '@react-native-firebase/auth';
 import { useAuthHeader } from '../graphql/client';
+import AsyncStorage from '@react-native-async-storage/async-storage';

 export default function Login() {
 	const [phoneNumber, setPhoneNumber] = useState<string>('');
 	const [code, setCode] = useState<string>('');
 	const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null);
 	const [confirm, setConfirm] = useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
-	const authHeader = useAuthHeader()
+	const { authHeader, setAuthHeader } = useAuthHeader()

 	useEffect(() => {
-		const subscriber = onAuthStateChanged(setUser);
-		return subscriber; // This may need adjustment based on your specific implementation
+		const unsubscribe = onAuthStateChanged(async (user) => {
+			console.log('🦊 | useFirebaseAuthSetup | onAuthStateChanged | user:', user);
+			// TODO: see if should save the user in the store or use those info some how or not, ot just need the accessToken
+
+			setUser(user)
+			if (user) {
+				const token = await user.getIdToken()
+				if (token) {
+					await AsyncStorage.setItem('token', token);
+					setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
+				}
+			}
+			console.log('🦛 | user.emailVerified:', user?.emailVerified);
+		});
+		return unsubscribe;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);


@ -65,7 +80,7 @@ export default function Login() {
 					title={!confirm ? 'Receive code' : 'Confirm code'}
 					onPress={() => !confirm ? signInWithPhoneNumber(phoneNumber).then(setConfirm) : confirm && confirmCode(confirm, code)}
 				/>
-				<Text>{authHeader.authHeader.key}: {authHeader.authHeader.value}</Text>
+				<Text>{authHeader.key}: {authHeader.value}</Text>
 				{user && (
 					<>
 						<Text style={{ marginTop: 10 }}>
@ -75,7 +90,10 @@ export default function Login() {

 						<Button
 							title={'Sign out'}
-							onPress={() => signOut()}
+							onPress={() => {
+								setAuthHeader({ key: 'Authorization', value: '' })
+								signOut()
+							}}
 						/>
 					</>
 				)}
--- a/yarn.lock
+++ b/yarn.lock
@ -2523,6 +2523,13 @@
  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==

+"@react-native-async-storage/async-storage@^1.21.0":
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.21.0.tgz#d7e370028e228ab84637016ceeb495878b7a44c8"
+  integrity sha512-JL0w36KuFHFCvnbOXRekqVAUplmOyT/OuCQkogo6X98MtpSaJOKEAeZnYO8JB0U/RIEixZaGI5px73YbRm/oag==
+  dependencies:
+    merge-options "^3.0.4"
+
 "@react-native-camera-roll/camera-roll@^7.4.0":
  version "7.4.0"
  resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-7.4.0.tgz#931e25b076b40dc57ca6d380f0a85d494a120f06"
@ -6958,6 +6965,11 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==

+is-plain-obj@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@ -8183,6 +8195,13 @@ memory-cache@~0.2.0:
  resolved "https://registry.yarnpkg.com/memory-cache/-/memory-cache-0.2.0.tgz#7890b01d52c00c8ebc9d533e1f8eb17e3034871a"
  integrity sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==

+merge-options@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
+  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
+  dependencies:
+    is-plain-obj "^2.1.0"
+
 merge-stream@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@ -9658,9 +9677,9 @@ queue@6.0.2:
  dependencies:
    inherits "~2.0.3"

-"railbird-gql@git+https://dev.railbird.ai/railbird/railbird-gql.git#db82f66c5d3600d90f09c813f71287e176dc078b":
+"railbird-gql@git+https://dev.railbird.ai/railbird/railbird-gql.git#838304efdd49a093bd8f9cea6cd6ef9e306d888a":
  version "1.0.0"
-  resolved "git+https://dev.railbird.ai/railbird/railbird-gql.git#db82f66c5d3600d90f09c813f71287e176dc078b"
+  resolved "git+https://dev.railbird.ai/railbird/railbird-gql.git#838304efdd49a093bd8f9cea6cd6ef9e306d888a"
  dependencies:
    "@apollo/client" "^3.9.2"
    "@graphql-codegen/cli" "^5.0.0"