Merge pull request 'Android Firebase-Auth' (#61) from loewy/firebase-auth-integration into master

Reviewed-on: railbird/rn-playground#61

screens/login.tsx

@@ -0,0 +1,94 @@
+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';
+
+// 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>
+  )
+}