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

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()
+							}}
 						/>
 					</>
 				)}