React firebase phone authentication

Ionic Framework
1

I’m very new to typescript with React, planning to build an app with Firebase Phone authentication with typescript and react. Does anyone have a sample code that I can refer which using React with typescript (not react native).

2 
import {
  getAuth,
  signInWithPhoneNumber,
  RecaptchaVerifier,
  ConfirmationResult,
  User,
  signOut,
} from "firebase/auth";
import { getFirestore, doc, setDoc, getDoc } from "firebase/firestore";
import { useCallback } from "react";
import { UserFirebaseStorage } from "../../types";

let confirmationResult: ConfirmationResult | null = null;

const useConnection = () => {
  const formatPhoneNumberFirebase = useCallback((phN: string) => {
    return phN.replace("0", "+33");
  }, []);
  const findUserFirebase = useCallback(
    (phoneNumber: string): Promise<UserFirebaseStorage> =>
      new Promise((resolve, reject) => {
        const db = getFirestore();
        getDoc(doc(db, `users/${phoneNumber}`))
          .then((value) => resolve(value.data() as UserFirebaseStorage))
          .catch(reject);
      }),
    []
  );

  const onCheckLogged = useCallback(
    (callback: (user: UserFirebaseStorage | null) => void) => {
      const auth = getAuth();
      auth.languageCode = "fr";
      auth.onAuthStateChanged((user) => {
        if (user?.phoneNumber) {
          findUserFirebase(user.phoneNumber).then((u) =>
            callback({
              pseudo: u.pseudo,
              phoneNumber: u.phoneNumber,
              uid: user.uid,
            })
          );
        } else {
          callback(null);
        }
      });
    },
    [findUserFirebase]
  );

  const saveUserIntoDatabase = (phoneNumber: string, pseudo: string) => {
    const db = getFirestore();
    setDoc(doc(db, "users", phoneNumber), {
      phoneNumber,
      pseudo,
    });
  };

  const signInFirebase = useCallback(
    (phoneNumber: string): Promise<void> =>
      new Promise((resolve, _reject) => {
        const auth = getAuth();
        auth.languageCode = "fr";
        const recaptchaVerifier = new RecaptchaVerifier(
          `recaptcha-container`,
          {
            size: "normal",
          },
          auth
        );
        signInWithPhoneNumber(
          auth,
          formatPhoneNumberFirebase(phoneNumber),
          recaptchaVerifier
        )
          .then((confirm) => {
            confirmationResult = confirm;
            resolve();
          })
          .catch((error) => console.error(error));
      }),
    [formatPhoneNumberFirebase]
  );

  const confirmSignInFirebase = useCallback(
    (code: string, phoneNumber: string, pseudo: string): Promise<User> =>
      new Promise((resolve, reject) => {
        if (confirmationResult) {
          confirmationResult
            .confirm(code)
            .then(({ user }) => {
              saveUserIntoDatabase(
                formatPhoneNumberFirebase(phoneNumber),
                pseudo
              );
              resolve(user);
            })
            .catch(reject);
        } else {
          reject("confirmationResult undefined");
        }
      }),
    [formatPhoneNumberFirebase]
  );

  const logOut = () => {
    const auth = getAuth();
    signOut(auth);
  };

  return {
    signInFirebase,
    confirmSignInFirebase,
    findUserFirebase,
    formatPhoneNumberFirebase,
    logOut,
    onCheckLogged,
  };
};

export default useConnection;

On your jsx you need add div with id recaptcha-container