How to do Firebase OTP verification using react-dom-router - reactjs

Question

I am doing a project in react based no Firebase OTP authentication.
I get the OTP part right but the trouble comes in the OTP verification part, because it's done in another page. But when i run the verification code on the other page i get an error as Cannot read properties of undefined (reading 'confirm').
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

Install the react-dom-router package.
Create a new React application and add the react-dom-router package to it.
Create a new page in your application and add a form to it. This form should include fields for the user's phone number and a button to send the OTP.
Use the Firebase Authentication API to generate an OTP and send it to the user's phone number.
Create a new page in your application and add a form to it. This form should include fields for the user's OTP and a button to verify the OTP.
Use the Firebase Authentication API to verify the OTP entered by the user.
If the OTP is verified, redirect the user to the page you want them to see.