如何使用react-dom-router进行Firebase OTP验证

Question

我正在做一个基于react的项目，没有Firebase OTP认证。我把OTP部分弄对了，但麻烦出现在OTP验证部分，因为它是在另一页完成的。但是当我在另一个页面上运行验证码时，我得到一个错误无法读取未定义的属性(读取'确认')。

OTP_SEND.JS

onsignInSubmit =(event)=>{
event.preventDefault();
this.setupRecaptcha()
var phoneNumber = "+91"+this.state.mobile
console.log(phoneNumber)
var appVerifier = window.recaptchaVerifier;
authentication
.auth()
.signInWithPhoneNumber(phoneNumber,appVerifier)
.then(function(confirmationResult){
window.confirmationResult = confirmationResult;
console.log("otp sent")
}).catch(function(error){
console.log("OTP not send")
}) 
}

OTP-VERIFICATION.JS

otpSubmit=(e)=>{
e.preventDefault();
const code = this.state.otp;
console.log( code);
window.confirmationResult.confirm(code).then((result)=>{
const user = result.user;
console.log(JSON.stringify(user))
alert("user verified")
}).catch((error)=>{
console.log(error)
})
}

<代码>

<代码>

Answer 1

1. 安装react-dom-router包

2. 创建一个新的React应用，并将React -dom-router包添加到其中。

3. 在应用程序中创建一个新页面并添加一个表单。这个表单应该包括用户的电话号码字段和一个发送OTP的按钮。

4. 使用Firebase Authentication API生成OTP并将其发送到用户的电话号码

5. 在应用程序中创建一个新页面并添加一个表单。这个表单应该包括用户的OTP字段和验证OTP的按钮。

6. 使用Firebase Authentication API验证用户输入的OTP。

7. 如果OTP被验证，将用户重定向到您希望他们看到的页面。