wip: connect firebase token to apollo headers

screens/login.tsx

@@ -1,72 +1,34 @@
-import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth";
-import React, { useEffect, useState } from "react";
+// Login.tsx
+import React, { useEffect, useState } from 'react';
 import {
-	Alert,
 	Button,
 	Keyboard,
 	Text,
 	TextInput,
 	TouchableWithoutFeedback,
 	View,
-} from "react-native";
-
-// This code is beginning of Auth Implementation - actual implementation will differ and involve more UI
-// Does not have a restart or proper handling of code confirmation, should only be used for obtaining token/testing
-// Currently working for Android builds, iOS has open issue #56
+} from 'react-native';
+import { signInWithPhoneNumber, confirmCode, onAuthStateChanged, signOut } from '../auth'; // Adjust the path as necessary
+import { FirebaseAuthTypes } from '@react-native-firebase/auth';
+import { useAuthHeader } from '../graphql/client';
 
 export default function Login() {
-	const [phoneNumber, setPhoneNumber] = useState<string>("");
-	const [code, setCode] = useState<string>("");
-
-	const [user, setUser] = useState(null);
-	const [confirm, setConfirm] =
-		useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
-
-	async function onAuthStateChanged(user: any) {
-		setUser(user);
-		if (user) {
-			// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-			const token = await auth().currentUser?.getIdToken();
-			// To debug/check token & user return, use these logs
-			// console.log(token) // token log
-			// console.log(user) // user log
-		}
-	}
-
-	async function signInWithPhoneNumber(phoneNumber: string) {
-		if (!phoneNumber) {
-			return Alert.alert(
-				"Please enter a valid phone number with a country code",
-			);
-		}
-		try {
-			const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
-			setConfirm(confirmation);
-		} catch (err) {
-			// TODO: implement more robust error handling by parsing err message
-			console.warn(err);
-			Alert.alert(
-				"There was an error. Make sure you are using a country code (ex: +1 for US)",
-			);
-		}
-	}
-
-	async function confirmCode() {
-		try {
-			await confirm?.confirm(code);
-		} catch {
-			Alert.alert("Invalid code, please try again.");
-		}
-	}
+	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()
 
 	useEffect(() => {
-		const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
-		return subscriber;
+		const subscriber = onAuthStateChanged(setUser);
+		return subscriber; // This may need adjustment based on your specific implementation
 	}, []);
 
+
+
 	return (
 		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
-			<View style={{ alignItems: "center" }}>
+			<View style={{ alignItems: 'center' }}>
 				<TextInput
 					style={{
 						width: "50%",
@@ -100,17 +62,21 @@ export default function Login() {
 					/>
 				)}
 				<Button
-					title={!confirm ? "Receive code" : "Confirm code"}
-					onPress={() =>
-						!confirm ? signInWithPhoneNumber(phoneNumber) : confirmCode()
-					}
+					title={!confirm ? 'Receive code' : 'Confirm code'}
+					onPress={() => !confirm ? signInWithPhoneNumber(phoneNumber).then(setConfirm) : confirm && confirmCode(confirm, code)}
 				/>
+				<Text>{authHeader.authHeader.key}: {authHeader.authHeader.value}</Text>
 				{user && (
 					<>
 						<Text style={{ marginTop: 10 }}>
 							Display name: {user?.displayName}
 						</Text>
 						<Text>Phone number: {user?.phoneNumber}</Text>
+
+						<Button
+							title={'Sign out'}
+							onPress={() => signOut()}
+						/>
 					</>
 				)}
 			</View>