railbird-gql/screens/login.tsx

import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth";
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

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.");
		}
	}

	useEffect(() => {
		const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
		return subscriber;
	}, []);

	return (
		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
			<View style={{ alignItems: "center" }}>
				<TextInput
					style={{
						width: "50%",
						height: 30,
						borderWidth: 1,
						borderColor: "black",
						marginBottom: 20,
					}}
					placeholder="Phone"
					textContentType="telephoneNumber"
					keyboardType="phone-pad"
					autoCapitalize="none"
					value={phoneNumber}
					onChangeText={(value) => setPhoneNumber(value)}
				/>
				{confirm && (
					<TextInput
						style={{
							width: "50%",
							height: 30,
							borderWidth: 1,
							borderColor: "black",
							marginBottom: 20,
						}}
						placeholder="Code"
						keyboardType="number-pad"
						textContentType="oneTimeCode"
						autoCapitalize="none"
						value={code}
						onChangeText={(value) => setCode(value)}
					/>
				)}
				<Button
					title={!confirm ? "Receive code" : "Confirm code"}
					onPress={() =>
						!confirm ? signInWithPhoneNumber(phoneNumber) : confirmCode()
					}
				/>
				{user && (
					<>
						<Text style={{ marginTop: 10 }}>
							Display name: {user?.displayName}
						</Text>
						<Text>Phone number: {user?.phoneNumber}</Text>
					</>
				)}
			</View>
		</TouchableWithoutFeedback>
	);
}