React js firebase phone authentication | Send OTP And Verify phone number |

[@ManishYadav-vm6lk]

Brother, I was very worried, I was not able to do it. When I saw your video, my problem got solved. Very very thanks brother.

[@ashik_mahmood]

Got the lesson useful. That's why subscribing the channel. Hope for the best brother.

[@dhayanandt5011]

@ashik_mahmood send code

[@matei5054]

17:06 for firebase

[@ankitprajapati3728]

love you bro code is working i face error on phone authentication many times but you solved

[@pawanyadav4024]

Thanks sridhar , the video and code was really helpful

[@SharadT-i9m]

Very useful tutorial, it is working for me. Thank you.

[@developerakhter______0076]

*You are a genius mann.... Gained 1 subscriber*

[@Podcast_ai_01]

Please make a video for email verification also using firebase and tailwind also.

[@anassamire2980]

This was useful but I ran into a problem when I accessed the global file and entered the Index.html project I find this page is blank, please reply

[@lokesh7004]

I always getting firebase error auth/billing not enabled, so couldn't i get an otp for mobile number in free plan?

[@SwapnilSoni]

so keeping these credentials on client side is safe?

[@rfryanfavour4369]

But now ill use all of these 😂❤ appreciate bro

[@shreeyanshsingh6623]

How you added that recaptcha which you had shown in the starting "Send Code Via SMS"?

[@satyamkumar6469]

You can put size to normal instead of invisible in recaptchaVerifier

[@dhayanandt5011]

​@@satyamkumar6469 bro unnoda code send pannu bro

[@rfryanfavour4369]

That input was all i needed thanks❤

[@Shahriyor-c3j]

0000000000000000

[@danielvega646]

Is this freemium? Or do I have to pay something from the beginning? thank you so much for uploading this!

[@Frontend-oy5cx]

Why does he only send SMS to my number and not others?

[@lahikahmed9253]

I think it's for free version. You should pay for verify other numbers

[@Frontend-oy5cx]

@@lahikahmed9253 thanks

[@santhoshanupoju-l3w]

Component auth has not been registered yet , getting this error could anyone please solve this

[@MyWorkup-e5s]

I'm getting an error that says "cannot read undefined (reading 'appVerificationDisabledForTesing') so what can I do now??? 😭

[@vaibhawkr3904]

found any solution?

[@feelthemusic3511]

I also get it bro you found any solution

[@biraniv]

I faced the same issue and fixed it by editing the function like this: const onSignup = () => { setLoading(true) onCaptchVerify() const appVerifier = window.recaptchaVerifier; const formatPh = '+' + ph; signInWithPhoneNumber(auth, formatPh, appVerifier) .then((confirmationResult) => { window.confirmationResult = confirmationResult; setLoading(false) setShowOTP(true) toast.success("OTP sended successfully!") }).catch((error) => { console.log(error) setLoading(false) }); }

[@web-Girish]

bro just do npm uninstall firebase then npm i firebase9.15.1

[@web-Girish]

npm i firebase@9.15.1

[@msdrd]

Dude , I can sign in with phone number also I can sign out with phone number but I couldnt solve how can I login with phone number ???

[@prathmeshsagole4325]

Does the otp code comes from the sms??

[@prajjwalsharma6700]

i am getting "Error updating phone" while saving phone auth in firebase

[@preshndams]

Impressive guys

[@nithishar2781]

TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') I used the same method but I am ending up with this error, can u please help me with it

[@hardikmaind9833]

i am facing the same error bro

[@vaibhawkr3904]

any solution?

[@santhoshanupoju-l3w]

Component auth has not been registered yet I am getting this error

[@mahimaarora2841]

did you get the solution?

[@biraniv]

I faced the same issue and fixed it by editing the function like this: const onSignup = () => { setLoading(true) onCaptchVerify() const appVerifier = window.recaptchaVerifier; const formatPh = '+' + ph; signInWithPhoneNumber(auth, formatPh, appVerifier) .then((confirmationResult) => { window.confirmationResult = confirmationResult; setLoading(false) setShowOTP(true) toast.success("OTP sended successfully!") }).catch((error) => { console.log(error) setLoading(false) }); }

[@santhoshanupoju-l3w]

Component auth has not been registered yet , bro can make solution for this

[@pintudebnath1524]

Thank you it worked without any problems thank you so much

[@sakavytech9141]

bro can u help doing vue 3 js too . i tried but it's not working well

[@2JZ-it8ug]

localhost is not allowed as a hosted domain for the purposes of phone auth. how do you run on localhost?

[@MuhammadAhmad-vc6xd]

it give me Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') ........and soo on

[@MuhammadAhmad-vc6xd]

I FOUND THE SOLUTION: (Use this function in the code) function onCaptchVerify() { if (!window.recaptchaVerifier) { window.recaptchaVerifier = new RecaptchaVerifier( auth, "recaptcha-container", { size: "invisible", callback: (response) => { onSignup(); }, "expired-callback": () => {}, } ); } }

[@sajidhmohammad7976]

Same bro

[@lokesh7004]

Auth mention as first parameter in funtion

[@adamdevelops]

Thank you so much bro. You saved the day!

[@luisaquinoc6548]

Me encantó.... Excelente !!! gracias por compartir !!!

[@msdrd]

Hello I did it also I can signout but how can I login ???

[@asfandkhan6206]

can you help, its not working on my web... :(

[@vanpariyadeep2084]

Very impressive But how to keep logged in?

[@shreebaskar2002]

I did everything but appVerificationDisabledfor testing error is coming

[@Vampion]

yes i created video for solution kzbin.info/www/bejne/paCye4ytbK6Yl5I

[@web-Girish]

just change your firebase version just do unistall your firebase then npm install firebase@9.15.1

[@mahipalkeluth3740]

For me it is showing toast not defined

[@BeingChoudhary]

what is the name of your code editor theme and who built that?

[@TheRageCommenter]

It's vsCode as the editor and the theme is called Synthwave '84. To get the glow around the words you need to do extra set up described on the theme's install page. Good luck.

[@ArbazKhan-qm2vc]

can you do an example using webotp api

[@OnlyJavascript]

can we do this in MERN stack?? If possible can you teach us?

[@OnlyJavascript]

Can you please teach us complete auth system in MERN stack including this otp feature.

[@moises-native4829]

Si quieres editar el numero e ir atras lo pensaste ? Como harias ? dos paginas o trabajar el back button ?

[@yashsinha9204]

FirebaseError: Firebase: Exceeded quota. (auth/quota-exceeded). Do I need to upgrade the firebase plan?

[@nimat9034]

Yes you have to upgrade to blaze or create a new project.

[@roar3850]

bro what is theme name? your code have gradient effect.

[@CodeAProgram]

Synthwave 84

[@roar3850]

Thanks bro

[@AbhayDeshwal-sj5bg]

please tell me what is your theme name of vs code

[@nftcafe]

getting error Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') help me out with solution?

[@biraniv]

I faced the same issue and fixed it by editing the function like this: const onSignup = () => { setLoading(true) onCaptchVerify() const appVerifier = window.recaptchaVerifier; const formatPh = '+' + ph; signInWithPhoneNumber(auth, formatPh, appVerifier) .then((confirmationResult) => { window.confirmationResult = confirmationResult; setLoading(false) setShowOTP(true) toast.success("OTP sended successfully!") }).catch((error) => { console.log(error) setLoading(false) }); }

[@nftcafe]

thank u @@biraniv

[@OutsidePro9]

i error : appVerificationDisabledForTesting

[@suhanisha-rl4yr]

otp not come 24 daily quat over also

[@mohammedehab8987]

is it on laravel ?

[@chukslite]

This is wonderful.

[@garryparker4753]

thanks bro this video is very helpful

[@CodeAProgram]

Share and subscribe ❤️

[@garryparker4753]

@@CodeAProgram ok

[@ZakirBhai-y2d]

can anyone give code beacuse this github is not working in my vs code.

[@ajayratnaparkhi7069]

which vscode theme u r using

[@CodeAProgram]

Synthwave 84

[@macanari]

can't run it on vscode

[@dragonwarrior7246]

is capcha verification compulsary for phone authentication ?

[@satyamkumar6469]

Not sure that it is necessary but firebase doc says it needs to be verified to check this requests comes from the right person (not from attacker)

[@Andres-mu3ng]

Thanks its very interesting

[@Andres-mu3ng]

Only i have a cuestion why return Recapcha error? FirebaseError: Firebase: Recaptcha verification failed - DUPE (auth/captcha-check-failed).

[@TrustChocha]

Great content

[@CodeAProgram]

Thank you, share and subscribe

[@PavanArjunSR]

thank u sooooooooooooooooooooooo much bro.

[@mohdarish4195]

Awesome🎉

[@priyanksoni1235]

bro i can't write the css in the section in classname

[@sagarsagu4788]

import tailwindcss then again if problem persists then press debug option in package.json file

[@muunuu157]

Too many unnecessary things, just get straight to the point!

[@ayushmanbarick8007]

Really useful

[@anhnguyenhoai9003]

done it. thanks

[@mahimaarora2841]

Can someone please help me with this error: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') at new RecaptchaVerifier

[@Nh_Sohan]

same problem

[@biraniv]

I faced the same issue and fixed it by editing the function like this: const onSignup = () => { setLoading(true) onCaptchVerify() const appVerifier = window.recaptchaVerifier; const formatPh = '+' + ph; signInWithPhoneNumber(auth, formatPh, appVerifier) .then((confirmationResult) => { window.confirmationResult = confirmationResult; setLoading(false) setShowOTP(true) toast.success("OTP sended successfully!") }).catch((error) => { console.log(error) setLoading(false) }); }

[@nandinirouth8737]

hey i tried your code still getting the same error @@biraniv

[@Marina-1-7]

In Firebase v10 - ther order of arguments in RecaptchaVerifier changed, 'auth' comes first: window.recaptchaVerifier = new RecaptchaVerifier( auth, "recaptcha-container", { size: "invisible", callback: (response) => { onSignup(); }, "expired-callback": () => { }, } );

[@Marina-1-7]

in Firebase v.10 RecaptchaVerifier seems to have another order of arguments, 'auth' comes first. Try this code: window.recaptchaVerifier = new RecaptchaVerifier( auth, "recaptcha-container", { size: "invisible", callback: (response) => { onSignup(); }, "expired-callback": () => { }, } );

[@RudraShejwal-jv2bf]

Its really worked

[@dhayanandt5011]

Send copy bro

[@RudraShejwal-jv2bf]

@@dhayanandt5011 are bhai Pehele run hogya fir badme do tin din bad try kiya to Run nhi ho rha hai

[@dhayanandt5011]

@@RudraShejwal-jv2bf send code bro GitHub

[@dhayanandt5011]

Send code bro GitHub

[@yogeshpal8946]

it is free or paid???????????????????

[@PulkitMalhotra]

Good content bad code quality

[@OnlyJavascript]

perfect.

[@ShoxzodRunning]

❤❤❤❤❤❤❤

[@SandeepMaraboina]

i am getting this error when i solve captcha Uncaught TypeError: Cannot read properties of null (reading 'style') at Array. (recaptcha__en.js:506:268) at b1. (recaptcha__en.js:449:86)

[@msdrd]

{ "error": { "code": 400, "message": "TOO_MANY_ATTEMPTS_TRY_LATER", "errors": [ { "message": "TOO_MANY_ATTEMPTS_TRY_LATER", "domain": "global", "reason": "invalid" } ] } }

[@askarzhaanbaev5834]

index-9a76d29a.js:8079 Uncaught TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') HELP

[@biraniv]

I faced the same issue and fixed it by editing the function like this: const onSignup = () => { setLoading(true) onCaptchVerify() const appVerifier = window.recaptchaVerifier; const formatPh = '+' + ph; signInWithPhoneNumber(auth, formatPh, appVerifier) .then((confirmationResult) => { window.confirmationResult = confirmationResult; setLoading(false) setShowOTP(true) toast.success("OTP sended successfully!") }).catch((error) => { console.log(error) setLoading(false) }); }