Firebase Phone Authentication Example

FirebasePhoneAuth.js

import React from "react";
import firebase, { auth } from "src/firebase";

const App = () => {
  const [phoneNumber, setPhoneNumber] = React.useState("");
  const [code, setCode] = React.useState("");
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    // =======
    // Captcha
    // =======
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      "login-button",
      {
        size: "invisible",
        callback: (response) => {
          // reCAPTCHA solved, allow signInWithPhoneNumber.
          onSubmitLogin();
        },
      }
    );
  }, []);

  // =============
  // onSubmitLogin
  // =============
  const onSubmitLogin = async () => {
    // We are using the test phone numbers we created before
    // var phoneNumber = document.getElementById("phoneNumber").value;
    const appVerifier = window.recaptchaVerifier;

    try {
      window.confirmationResult = await firebase
        .auth()
        .signInWithPhoneNumber(phoneNumber, appVerifier);
    } catch (err) {
      console.log(err);
    }
  };

  // ============
  // onSubmitCode
  // ============
  const onSubmitCode = async () => {
    const result = await window.confirmationResult.confirm(code);
    const user = result.user;
    console.log("user", user);
  };

  //This function runs everytime the auth state changes. Use to verify if the user is logged in
  auth.onAuthStateChanged(function (firebaseUser) {
    if (firebaseUser) {
      setUser(firebaseUser);
      console.log("USER LOGGED IN");
    } else {
      // No user is signed in.
      setUser(null);
      console.log("USER NOT LOGGED IN");
    }
  });

  // ============
  // handleLogout
  // ============
  const handleLogout = () => {
    auth.signOut();
  };

  return (
    <div className="App">
      <p>{user ? user.phoneNumber : "Nenhum usuário"}</p>
      <input
        type="text"
        placeholder="Phone"
        value={phoneNumber}
        onChange={(ev) => setPhoneNumber(ev.target.value)}
      />
      <button onClick={onSubmitLogin} id="login-button">
        Send Code
      </button>

      <br />
      <br />

      <input
        type="text"
        placeholder="Code"
        value={code}
        onChange={(ev) => setCode(ev.target.value)}
      />

      <button onClick={onSubmitCode}>Confirm Code</button>

      <br />
      <br />
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
};

export default App;

gistfile1.txt

import * as firebase from "firebase/app";
import "firebase/analytics";
import "firebase/auth";

// Firebase Configuration
var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

// Firebase Auth
const auth = firebase.auth();
auth.useDeviceLanguage();

// Module Exports
export default firebase;
export { auth };