120 lines
3.1 KiB
TypeScript
120 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|