Phone Authentication in React JS with Firebase

In this video, we will learn about phone authentication in React js with Firebase. This tutorial is for beginners and intermediates. If you are already know how to integrate firebase than you can skip the first 3 minutes.

I cover each and every step to make this video better for learners. If you enjoy this video plz like share and subscribe

Source Code Link

Firebase Authentication React js
Send Otp using firebase
Phone Authentication in React
Phone Authentication in Firebase
How to send otp using react and firebase

[pituboy]

OMG This video is way better than other blogs and some paid content, so straightforwar.

[jaidev]

Hey there! Can you please help me out here, I keep getting this error:
"TypeError: Cannot read properties of undefined (reading 'auth')"
on the line : "setUpRecaptchaVerifier = new

[diversecontent]

yes I did that but soon removed that, because captcha is asked some times even though invisible and it takes some time for otp to come, better to use bulk sms for website and phone auth for android apps ( there everything is very fast)

[charminarchaupal]

how do i set the value of phoneNumber dynamically i.e. when I submit the form with a number in the input box, how do I assign the submitted data to phoneNumber to it?

[programmingwithraza]

hi sir hope you are fine ... sir i am getting the same error that you face during the lecture and that is "signInWithPhoneNumber failed: Second argument "app…lementation of i followed the same steps but not getting rid of this error here is my code
import firebase from "../config/firebase";
setupRecaptcha=()=>{
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
console.log("captacha resolved");
this.onSignInSubmit();
}
});
}
onSignInSubmit=(event)=>{
console.log("captacha");
event.preventDefault();
this.setupRecaptcha();
var phoneNumber = "[phone]";
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with
window.confirmationResult = confirmationResult;
}).catch(function (error) {
// Error; SMS not sent
// ...
});
}
form
<div
<button className="btn btn-primary btn-block" type="submit">Sign Up</button>

</form>
can you pls help me how to fix this error?

[mouninischal]

Thanks a lot for the video. It would be beneficial if you uploaded the source code and put the link in description

[shreyashgiri]

hey squad can you tell me how to get otp input in input box on same form instead of prompt ?? please help i am damn worried.

[windyboy]

Hi @Coding Squad,
After submit, this would trigger the onSignInSubmit
The onSignInSubmit will then run the function setUpCaptcha
And within the setUpCaptcha, it redirect to onSignInSubmit
I thought that we would enter an infinite loop but it doesnt happened. Could you help me explain why


And in the link source code you provide, there seems to have an unused function onSubmitOpt, just wondering is there any mistake here.

Thank you.

[vittorianojimenez]

i love u bro! thank. u help me <3 i subcribe

[rajatadhikari]

bro it would be better you can put app.js file in commment

[kapilsharma]

Thank you so much! How do I change the name local host to website app name?