wip: working, needs some unit tests for auth functions

App.tsx

@@ -5,7 +5,7 @@ import AppNavigator from "./navigation/app-navigator";
 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
+// TODO: move to different file?
 const SetAuthHeaderBasedOnEnv = () => {
 	const { setAuthHeader } = useAuthHeader();
 
@@ -21,7 +21,7 @@ const SetAuthHeaderBasedOnEnv = () => {
 				if (token) {
 					console.log("Setting firebase auth token");
 					setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
-				} // handle error
+				}
 			}
 		};
 

auth/firebase-auth.tsx

@@ -2,7 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';
 import { Alert } from 'react-native';
 
-export const signInWithPhoneNumber = async (phoneNumber: string): Promise<FirebaseAuthTypes.ConfirmationResult | undefined> => {
+export const handleSignInWithPhoneNumber = async (phoneNumber: string): Promise<FirebaseAuthTypes.ConfirmationResult | undefined> => {
   if (!phoneNumber) {
     Alert.alert("Please enter a valid phone number with a country code");
     return;
@@ -39,7 +39,7 @@ export const getCurrentUserToken = async (): Promise<string | null> => {
   return null;
 };
 
-export const signOut = async (): Promise<void> => {
+export const handleSignOut = async (): Promise<void> => {
   await AsyncStorage.removeItem('token');
-  auth().signOut()
+  await auth().signOut()
 }

auth/index.ts

@@ -1,15 +1,15 @@
 import {
-  signInWithPhoneNumber,
+  handleSignInWithPhoneNumber,
   confirmCode,
   onAuthStateChanged,
   getCurrentUserToken,
-  signOut
+  handleSignOut
 } from './firebase-auth'
 
 export {
-  signInWithPhoneNumber,
+  handleSignInWithPhoneNumber,
   confirmCode,
   onAuthStateChanged,
   getCurrentUserToken,
-  signOut
+  handleSignOut
 }

component/buttons/sign-out.tsx

@@ -0,0 +1,18 @@
+import { handleSignOut } from "../../auth"
+import { useAuthHeader } from "../../graphql/client"
+import React from "react"
+import { Button } from "react-native"
+
+export default function SignOutButton(): React.JSX.Element {
+  const { setAuthHeader } = useAuthHeader()
+
+  return (
+    <Button
+      title={'Sign out'}
+      onPress={async () => {
+        setAuthHeader({ key: 'Authorization', value: '' })
+        await handleSignOut()
+      }}
+    />
+  )
+}

screens/login.tsx

@@ -8,10 +8,11 @@ import {
 	TouchableWithoutFeedback,
 	View,
 } from 'react-native';
-import { signInWithPhoneNumber, confirmCode, onAuthStateChanged, signOut } from '../auth'; // Adjust the path as necessary
+import { handleSignInWithPhoneNumber, confirmCode, onAuthStateChanged } from '../auth';
 import { FirebaseAuthTypes } from '@react-native-firebase/auth';
 import { useAuthHeader } from '../graphql/client';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import SignOutButton from '../component/buttons/sign-out';
 
 export default function Login() {
 	const [phoneNumber, setPhoneNumber] = useState<string>('');
@@ -22,9 +23,6 @@ export default function Login() {
 
 	useEffect(() => {
 		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()
@@ -33,7 +31,6 @@ export default function Login() {
 					setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
 				}
 			}
-			console.log('🦛 | user.emailVerified:', user?.emailVerified);
 		});
 		return unsubscribe;
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -78,7 +75,7 @@ export default function Login() {
 				)}
 				<Button
 					title={!confirm ? 'Receive code' : 'Confirm code'}
-					onPress={() => !confirm ? signInWithPhoneNumber(phoneNumber).then(setConfirm) : confirm && confirmCode(confirm, code)}
+					onPress={() => !confirm ? handleSignInWithPhoneNumber(phoneNumber).then(setConfirm) : confirm && confirmCode(confirm, code)}
 				/>
 				<Text>{authHeader.key}: {authHeader.value}</Text>
 				{user && (
@@ -88,13 +85,7 @@ export default function Login() {
 						</Text>
 						<Text>Phone number: {user?.phoneNumber}</Text>
 
-						<Button
-							title={'Sign out'}
-							onPress={() => {
-								setAuthHeader({ key: 'Authorization', value: '' })
-								signOut()
-							}}
-						/>
+						<SignOutButton />
 					</>
 				)}
 			</View>