95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
// Login.tsx
|
|
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
Button,
|
|
Keyboard,
|
|
Text,
|
|
TextInput,
|
|
TouchableWithoutFeedback,
|
|
View,
|
|
} from 'react-native';
|
|
import { handleSignInWithPhoneNumber, confirmCode, onAuthStateChanged } from '../auth';
|
|
import { FirebaseAuthTypes } from '@react-native-firebase/auth';
|
|
import { useAuthHeader } from '../graphql/client';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import SignOutButton from '../component/buttons/sign-out';
|
|
|
|
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, setAuthHeader } = useAuthHeader()
|
|
|
|
useEffect(() => {
|
|
const unsubscribe = onAuthStateChanged(async (user) => {
|
|
setUser(user)
|
|
if (user) {
|
|
const token = await user.getIdToken()
|
|
if (token) {
|
|
await AsyncStorage.setItem('token', token);
|
|
setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
|
|
}
|
|
}
|
|
});
|
|
return unsubscribe;
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
|
|
|
|
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 ? handleSignInWithPhoneNumber(phoneNumber).then(setConfirm) : confirm && confirmCode(confirm, code)}
|
|
/>
|
|
<Text>{authHeader.key}: {authHeader.value}</Text>
|
|
{user && (
|
|
<>
|
|
<Text style={{ marginTop: 10 }}>
|
|
Display name: {user?.displayName}
|
|
</Text>
|
|
<Text>Phone number: {user?.phoneNumber}</Text>
|
|
|
|
<SignOutButton />
|
|
</>
|
|
)}
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
}
|