How does Firebase phone number authentication work?

Question

Firebase Phone number authentication not working. Upon submitting the form for entering the phone number, this is what the error shows: Google Sign in works but not the registration using Phone number.

Uncaught TypeError: firebase_utils__WEBPACK_IMPORTED_MODULE_2_.auth.RecaptchaVerifier is not a function

import React, { useState, useEffect } from "react";
import { Button, TextField } from "@material-ui/core";
import { signInWithGoogle, firestore, auth } from "./../firebase/utils";

const Register = (props) => {
      const [currentUser, setCurrentUser] = useState("");
      const [displayName, setDisplayName] = useState("");
      const [phoneNumber, setPhoneNumber] = useState("");
      const [otp, setOtp] = useState("");
    
      const getCurrentUser = () => {
        auth.onAuthStateChanged((user) => {
          if (user) {
       
        const uid = user["uid"];
        const name = user.displayName;
        console.log("uid: ", uid);
        console.log(name);
        setCurrentUser(uid);
        setDisplayName(name);
      } else {
        console.log("uid: ", "no uid");
      }
    });
  };

  useEffect(() => {
    getCurrentUser();
  }, []);

  const configureCaptcha = () => {
    window.recaptchaVerifier = auth.RecaptchaVerifier("sign-in-button", {
      size: "invisible",
      callback: (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        onSignInSubmit();
        console.log("Verified");
      },
      defaultCountry: "PH",
    });
  };

  const onSignInSubmit = (e) => {
    e.preventDefault();
    configureCaptcha();
    const phoneNumber = phoneNumber;
    console.log(phoneNumber);

    const appVerifier = window.recaptchaVerifier;
    auth
      .signInWithPhoneNumber(phoneNumber, appVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        window.confirmationResult = confirmationResult;
        console.log("OTP has been sent");
        // ...
      })
      .catch((error) => {
        // Error; SMS not sent
        // ...
        console.log(error);
      });
  };

  return (
    <div>
      <h1>Google SIGN IN</h1>
      <Button variant="contained" onClick={signInWithGoogle}>
        Google Sign In
      </Button>
      {auth.currentUser ? (
        <div>
          {" "}
          <br />
          UID: {currentUser}
          <br />
          Name: {displayName}
        </div>
      ) : (
        <div>
          <h1>NOT LOGGED IN </h1>
          <form onSubmit={onSignInSubmit}>
            <div id="sign-in-button"></div>
            <TextField
              type="number"
              name="mobile"
              placeholder="mobile"
              value={phoneNumber}
              onChange={(e) => setPhoneNumber(e.target.value)}
            />
            <Button type="submit">Submit</Button>
          </form>
          <h2>Enter OTP</h2>
          <form>
            <TextField
              type="number"
              name="OTP"
              placeholder="Enter OTP"
              value={otp}
              onChange={(e) => setOtp(e.target.value)}
            />
            <Button type="submit">Submit</Button>
          </form>
        </div>
      )}
    </div>
  );
};

export default Register;

Answer 1

I doubt your code looks like this and that's incorrect:

const auth = firebase.auth()
window.recaptchaVerifier = auth.RecaptchaVerifier()

Try this instead

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(...)
//                                      ^^^^ not auth()