code tested on android, gets a token, logs a user

This commit is contained in:
Loewy 2024-01-29 14:42:00 -08:00
parent 6ebceb4ce7
commit 7046b23a27

87
screens/login.tsx Normal file
View File

@ -0,0 +1,87 @@
import React, { useState, useEffect } from 'react';
import { Alert, Button, View, Text, TextInput, TouchableWithoutFeedback, Keyboard } from "react-native";
import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';
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) {
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>{user?.user_id}</Text>
)}
</View>
</TouchableWithoutFeedback>
)
}