@sh1net

Как авторизоваться с помощью сервиса firebase по номеру телефона?

У меня возникла проблема при прохождении каптчи для отправки кода на номер телефона используя сервис authentication firebase. Проблема следующая : Cannot read properties of null (reading 'style')
TypeError: Cannot read properties of null (reading 'style')
at Array. (https://www.gstatic.com/recaptcha/releases/rKbTvxT...)
at Se. (https://www.gstatic.com/recaptcha/releases/rKbTvxT...)
Код авторизации связанный с самой отправкой формы:
function onCaptchVerify() {
    if (!window.recaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(
        auth,
        'recaptcha-container', {
          size: 'invisible',
          callback: (response) => {

          },
          'expired-callback': () => { },
        }
      );
    }
  }

  function onSignup() {
    setLoading(true);
    onCaptchVerify();

    const appVerifier = window.recaptchaVerifier;

    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
        setLoading(false);
        toast.success("OTP sent successfully!");
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
      });
  }

  function onOTPVerify() {
    setLoading(true);
    window.confirmationResult
      .confirm(otp)
      .then(async (res) => {
        console.log(res);
        setUser_3(res.user);
        setLoading(false);

        if (isRegistration) {
          const ph = '+' + phoneNumber
          const regUser = await registration(nickName, password, ph);
          localStorage.setItem('isAuth', true);
          localStorage.setItem('user', JSON.stringify(regUser));
          navigate('/game');
          window.location.reload();
        } else {
          const ph = '+' + phoneNumber
          const tryLogin = await login(nickName, password, ph);
          localStorage.setItem('user', JSON.stringify(tryLogin));
          localStorage.setItem('isAuth', true);
          navigate('/game');
          window.location.reload();
        }
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  }


  const onRegClick = async () => {
    let hasError = false
    if(nickName === ''){
      setNickError(true)
      hasError=true
    }
    if(phoneNumber === ''){
      setPhoneError(true)
      hasError=true
    }
    if(isRegistration && nickName!=='') {
      if (user) {//Если нашло с такмим же никнейном при регистрации аккаунта
        setErrName(true);
        setNickError(true);
        hasError = true;
      } else {
        setErrName(false);
        setNickError(false);
      }
      if(user_2 && phoneNumber!==''){
        setPhoneErrVis(true)
        setPhoneError(true)
        hasError = true;
      }else {
        setPhoneErrVis(false);
        setPhoneError(false);
      }
    }
    if(password === ''){
      setPassError(true)
      hasError=true
    }
    if(password.length<8){
      setErrVis(true)
      setPassError(true)
      hasError=true
    }else{
      setErrVis(false)
      setPassError(false)
    }
    if(!hasError){
      if(!isRegistration){
        const tryLogin = await login(nickName,password,phoneNumber)
        if (!tryLogin) {
          setHelperText('Неверно заполнены данные!');
          setNickError(true);
          setPassError(true);
          setPhoneError(true)
        } else {
          onSignup();
        }
      }else{
        onSignup();  
      }
    }
  }


Код связанный с подключением firebase:
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    ...
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export default getFirestore()
  • Вопрос задан
  • 164 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы