From 7046b23a27152eb608a141682b528037a8328c5e Mon Sep 17 00:00:00 2001
From: Loewy <loewy@chainstarters.com>
Date: Mon, 29 Jan 2024 14:42:00 -0800
Subject: [PATCH] code tested on android, gets a token, logs a user

---
 screens/login.tsx | 87 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 screens/login.tsx

diff --git a/screens/login.tsx b/screens/login.tsx
new file mode 100644
index 0000000..53db839
--- /dev/null
+++ b/screens/login.tsx
@@ -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>
+  )
+}
\ No newline at end of file