EhsanHadid

 const user = useUser();

  const registerFormHandler = async ({ fullname, password }) => {
    if (user && user.phoneNumber) {
      const email = convertPhoneToEmail(user.phoneNumber);
      const credential = EmailAuthProvider.credential(email, password);
      const userCred = await linkWithCredential(user, credential);
      await updateProfile(userCred.user, {
        displayName: fullname,
      });

EhsanHadid

const verifyCode = ({ code }) => {
  const credential = PhoneAuthProvider.credential(verificationId, code);
  signInWithCredential(auth, credential).then((userCredential) => {
    console.log(userCredential);
  });
};

EhsanHadid

export const convertPhoneToEmail = (phone: string) => {
  // replacing special characters( +,-, (, ), and #. ) to alphabet chars
  console.log(phone);
  const cleanedPhone = phone
    .replace("(", "A")
    .replace(")", "B")
    .replace(",", "C")
    .replace("#", "D")
    .replace(" ", "E");

EhsanHadid

const sendVerificationCode = async () => {
    setLoading(true);

    try {
      const email = convertPhoneToEmail(phoneNumber);
      const providers = await fetchSignInMethodsForEmail(auth, email);
      if (providers.length == 0) {
        const confirmationResult = await signInWithPhoneNumber(
          auth,
          phoneNumber,

EhsanHadid

import { useState } from "react";
import { Button, Form } from "antd";
import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
import { auth } from "../../firebase";
import { PhoneNumberInput } from "./phone-input";

export default function PhoneVerification({ codeSent }) {
  const [phoneNumber, setPhoneNumber] = useState<string>("");
  const [loading, setLoading] = useState(false);
  const [isPhoneEmpty, setIsPhoneEmpty] = useState<boolean>(true);