Looking for example of using react-native-firebase phone authentication

How to / Third Party Tooling
1

Hello Firebsae Friends,

I’ve been struggling for a few days now to get react-native-firebase to work with phone authentication and reCAPTCH.

It seems I’m missing something fundamental, however can’t quite pin point where the issue might be.

This is my playground code,

import React, { useState } from "react";

import { Button, TextInput, StyleSheet } from "react-native";
import { Text, View } from "../components/Themed";
import auth from "@react-native-firebase/auth";

import { buildExpoLogger } from "../infra/logger";
const log = buildExpoLogger("screens/LoginModelScreen.tsx");

export default function PhoneSignIn() {
  // If null, no SMS has been sent
  const [confirm, setConfirm] = useState(null);

  const [code, setCode] = useState("");

  // Handle the button press
  async function signInWithPhoneNumber(phoneNumber) {
    log.info("signInWithPhoneNumber...");

    const confirmation = await auth().verifyPhoneNumber(phoneNumber);

    log.info("signInWithPhoneNumber confirmation=", confirmation);

    setConfirm(confirmation);
  }

  async function readFromFirestore() {
    const firestoreForDefaultApp = firebase.firestore();
  }
  async function confirmCode() {
    try {
      await confirm.confirm(code);
    } catch (error) {
      console.log("Invalid code.");
    }
  }

  if (!confirm) {
    return <Button title="Phone Number Sign In" onPress={() => signInWithPhoneNumber("+972546581022")} />;
  }

  return (
    <View style={styles.container}>
      <TextInput value={code} onChangeText={(text) => setCode(text)} />
      <Button title="Confirm Code" onPress={() => confirmCode()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

And this is my package.json

  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-firebase/analytics": "^14.9.4",
    "@react-native-firebase/app": "^14.9.4",
    "@react-native-firebase/auth": "^14.9.4",
    "@react-native-firebase/crashlytics": "^14.9.4",
    "@react-native-firebase/firestore": "^14.9.4",
    "@react-native-firebase/perf": "^14.9.4",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "expo": "^45.0.0",
    "expo-asset": "~8.5.0",
    "expo-constants": "~13.1.1",
    "expo-dev-client": "~0.9.6",
    "expo-font": "~10.1.0",
    "expo-linking": "~3.1.0",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "expo-system-ui": "~1.2.0",
    "expo-web-browser": "~10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-logs": "^4.0.1",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-web": "0.17.7"
  }

All I’m trying to achieve is that a for a new users that downloads the app to have for him the option to register through Firebase Phone Authentication (without using email & password at all).

If someone managed to get the phone based authentication working I would really appreciate an example.

Thank you, Max.

2

Hey @maximveksler, please have a look at this article: https://www.section.io/engineering-education/react-native-firebase-phone-authentication/ where they show an example of using Phone auth with Firebase.