开发者问题收集

' TypeError:无法读取未定义的属性(读取‘appVerificationDisabledForTesting’)'

2023-08-03
3720

我试图在 react+vite 中通过电话号码使用 firebase 实现 OTP 身份验证。我收到此错误: ' TypeError: 无法读取未定义的属性(读取“appVerificationDisabledForTesting”)'

这是我在代码中实现的方式

// firebaseConfig.jsx file

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp)

export { firebaseApp, auth };
// signup.jsx component page

import { auth } from '../../../../firebaseConfig/firebaseConfig';
import { RecaptchaVerifier, signInWithPhoneNumber } from 'firebase/auth';

const [formValues, SetValues] = useState({
        name: '',
        email: '',
        phone: '',
        password: '',
        confirmPassword: ''
    })

const [confirmationResult, setConfirmationResult] = useState(null)

const handleSendOtp = async () => {
        try {
            const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
                size: 'invisible',
                callback: () => {
                    console.log('recaptcha resolved..')
                }
            }, auth)
            signInWithPhoneNumber(formValues.phone, recaptchaVerifier).then((result) => {
                setConfirmationResult(result);
                alert("code sent")
                setshow(true);
            })
                .catch((err) => {
                    alert(err);
                    window.location.reload()
                });
         
        } catch (error) {
            flag = false
            console.log('error sending otp ' + error)
        }
    }

我给 recaptcha-container div 如下:

return(
<>
<div id='recaptcha-container'></div>

*//and here,im conditionally rendering the component based on the state 'confirmationResult'
*
{confirmationResult===null?(<component1.....lines>):(<component2.....lines>)}
</>
)

有人能帮我找到问题吗?

我检查了我的导入和导出语句是否有任何问题,初始化了 firebase 应用程序,我参考了几个文档,但我找不到问题是什么。'recaptchaVerifier' 有什么问题吗?或者为 'recaptcha-container' 设置 div。

2个回答

auth 是第一个参数,而不是最后一个。

因此,不是这个

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
            size: 'invisible',
            callback: () => {
                console.log('recaptcha resolved..')
            }
        }, auth)

应该是

const recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
            size: 'invisible',
            callback: () => {
                console.log('recaptcha resolved..')
            }
        });

因此,参数顺序是 auth、容器、参数。无论出于何种原因,文档都使用您在发布此帖子时使用的顺序。

SABANTO
2023-12-18

我不确定这是否有帮助,但我在 Flutter 上遇到了类似的问题,这有所帮助,将其添加到 index.html,尽管有一些警告。

<head>
<script>window.flutterfire_web_sdk_version = '9.22.1';</script>
</head>
Prince Kelvin
2023-08-18