React Firebase Phone Auth Tutorial | Send OTP & Verify Users | React For Beginners

In this video we will further explore the React + Firebase Authentication combo. We will enhance our Authentication App with new feature of Sign in user with Phone Number and send OTP with Firebase API and Verify the User.
🔥 Testbook👇
Full stack developer is a modern Web developer
Master full-fledged Full Stack development skills with Testbook’s Skill Academy
Use Code “ DPM20 ” to get 50%+20% Extra Off on all Career Programs by Testbook’s Skill Academy
Access Full Stack Career Program- testbk.co/keb8i
Watch Free sessions here - testbk.co/y50o3
⭐️ GitHub link for Reference⭐️
github.com/dma...
⭐️ Reference Videos and Links⭐️
firebase.googl...
react-bootstra...
reactrouter.co...
React Firebase Authentication Crash Course - • React Firebase Authent...
Protected Routes - • Protected Routes in Re...
Context API - • React Context API Tuto...
⭐️ Support my channel⭐️
www.buymeacoff...
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React in One Project - • Learn React JS with Pr...
React Redux Toolkit Tutorial - • React Redux Toolkit wi...
Learn React Redux with Project - • Learn React Redux with...
What is Redux ? - • Understanding Redux Co...
Learn React Redux Thunk with Project - • Learn React Redux Thun...
Learn React Hooks - • Learn React JS Hooks |...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Tags ⭐️
- React Firebase Authentication Tutorial
- React Firebase Login Authentication
- Firebase Phone Authentication
- Send SMS and OTP Verification React
- Firebase v9 Crash Course
⭐️ Hashtags ⭐️
#react #firebase #authentication #tutorial
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[@DipeshMalvia]

Use Code “ DPM20 ” to get 50%+20% Extra Off on all Career Programs by Testbook’s Skill Academy
Access Full Stack Career Program- testbk.co/keb8i
Watch Free sessions here - testbk.co/y50o3

[@RahulKumar-xe7cd]

Exactly what I was looking for. Thanks Dipesh. Excellent job!

[@DipeshMalvia]

Guys, if the video is helpful to you or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉

[@DecentraTalks]

Great video, simple and helpful

[@aviworld1995]

Thank you very much for the video. Great content

[@deepakv8373]

11:04

[@mohamedyoussef8835]

Awesome +++++++++ 😃

[@DipeshMalvia]

Thank you! Cheers!

[@mursleenmushtaq6559]

Hi Brother.....
Solve my issue bro...
Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')
is this error show me....

[@marionirvana4127]

Change order of parameters in UserAuthContext.js, it worked for me.
"
function setUpRecaptcha(number) {
const recaptchaVerifier = new RecaptchaVerifier(
auth,
"recaptcha-container",
{}
);
recaptchaVerifier.render();
return signInWithPhoneNumber(auth, number, recaptchaVerifier);
}
"

[@yugjain385]

very well explained

[@sherothkar1309]

how to validate phone input bro(like checking length according to country )? plz help

[@mishen-thakshana]

Thankyou so much

[@msdrd]

How to login with phone number ?

[@mishen-thakshana]

Error shows as uncaught time out error

[@JiyaKeshwani]

I have implemented the same way but it's throwing an error called cannot read properties of undefined (reading appverificationdisabledfortesting)

[@kratosasdcd]

Hi did u find the answer?

[@preyanshumishra6161]

hey did u find the ans?

[@manojkumars3498]

use 9.14.0 of firebase
@@kratosasdcd

[@shaliniganeshan2004]

Did u got answer for tis pls share

[@karavikiran9932]

We are using auth0 in our project, Need integration of firebase SMS with auth0 please help me to do. Thanks

[@beastuhmodeuhgamingunivers4518]

i am facing this error
Firebase: Error (auth/argument-error).

[@cohcitc]

Don't provide sponsorship at the beginning of video , It will make ugly to watch full video.

[@DipeshMalvia]

Thanks for the feedback.

[@emma.f.mkpurunchi599]

Hello DipeshMalvia, i am implementing the firebase signInWithPhone Number Authentication with OTP, but after creating a function to resend OTP, if i click on resend OTP, it will display this error, : reCAPTCHA client element has been removed: 0.
Please kindly assist me in resolving this issue. I am available to have a Google meet with you if need be. thank you sir.

[@SalmanShah95]

react-script is not recognized as Internal or external command,
I got this error when i entered npm start command....

[@Akash-Th00]

I'm getting the same message

[@Akash-Th00]

What to do please tell

[@sunilnani6717]

firebase sms template how can i change

[@PROTECHRAHUL]

sir getting this error verifying the captcha
Cannot use 'in' operator to search for 'session' in 98******98.

[@NxiusTech]

Anyone facing the below issue:
Cannot create property 'callback' on string 'recaptcha-container'
when hitting send OTP, recpatch verifier is not showing, instaed above erro is displayed on the screen

[@vinothkumars7421]

Thanks Dipesh, been waiting for a video about OTP using firebase. It is what exactly i needed.

[@DipeshMalvia]

Glad it was helpful!

[@justwatcher-py9qm]

is there any tutorial for ecommerce food delivery web app using react and node js with mysql?

[@TmKoCshorts862]

Hii I need a help in Android studio actually my project is about OTP verification via email through Android studio + firebase I am not understanding how can I do please give me any solution about that

[@codascope377]

Is there a way u can use phone number to login and phone number to signup they request for otp like 2 factor authentication

[@navarajpokharel8980]

Hey how can we verify Phone Numbers with Firebase Phone Authentication on our Own Backend ? (without firbase database)

[@abhishekbhure3737]

Hello dipesh would you please help me out.. When I click on send otp am nt getting the confirmation in the console .. Am getting undefined

[@j.mvlogs1485]

When deploy the page why It's not working.

[@benjaminmccloskey4237]

Does this work if you’re using expo go for development ?

[@regilearn2138]

Hi ,
thanks for all the support for react /javascript developers,
my request is please do a react video how to use* All the FORM components like radio btn, select box,Checkbox,input, ,calendar etc,and group of those elements* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.I know u will help on this.

[@dayanandsontakke8456]

this is the tutorial, i'm looking from last mongth

[@DipeshMalvia]

Thanks!

[@ramcapdelivery828]

hi how to add yahoo log in with OTP verification on this tutorial?

[@vanshshah7781]

how to retrive user's information while login with otp?

[@kashmirtechtv2948]

awesome..everything worked

[@DipeshMalvia]

Glad that everything worked!

[@akshayKumar-kx9mm]

Bro, i am getting trouble in initialising firebase in react js

[@JuliiaTerekhova]

Its very clear explanations, thank you)

[@DeepakGupta-pz4fx]

Can you post a video React unit testing crash course

[@Akash-hj5bh]

Thanks Phone Wala code push nhi kiya apne

[@DipeshMalvia]

Separate branch hai please switch the branch - github.com/dmalvia/React_Firebase_Auth_Tutorial/tree/phone-auth

[@gouravchaki7990]

That helped me a lot. Thank you Dipesh

[@thehomelanderrr]

On point explanation thank you

[@DipeshMalvia]

Thankyou

[@shtanmoy]

please make a video for email verification

[@surajdhungana407]

Make video on authentication and authorization

[@Jonan_Sama]

You are a lifesaver... Thank you for this awesome video Dipesh. I was able to fix my errors and learn a lot.

[@hasnatulalam6014]

Sir if you provide another video with email verification with link it will be very helpful

[@alizayn1]

Same way for React native?

[@narensabari2891]

Hi dipesh i recently started my react learning. Before starting my react journey i updated my js knowledge from your videos.thanks for that. I want to know what are the things I need to cover in the react. ?

[@DipeshMalvia]

Hi Naren, you can check the React Roadmap video on the channel that will help you a lot.

[@narensabari2891]

@@DipeshMalvia thank you dipesh

[@cristikrs5686]

Thank you so much!

[@priyankadas4034]

I am getting "Auth null" on the Chrome console on loading the file on local server. After clicking the "Send OTP" button, the captcha doesn't appear. Please help with the same.

[@ritualj0int]

That is a common issue with it, i had the same. Make sure that the phone auth or your number not in testing mode in firabase console anymore, I wasted 5 hours on it trying to figure it out why isn`t workking.
I also had issues with the recapcha, but after doing a bit of trial and error I could make it work. His code is spot on no issues with it. I think you might be in the UserAutthContext with that one. Either not typed in correcntly or exporte itd or with the className. I hope it helps!

[@sahasiyer8471]

@@ritualj0intHi bro, I’m getting ‘appVerificationDisabledForTesting’ error. How to remove auth from testing mode? Help me bro, I have an assignment to submit in 2 days

[@ritualj0int]

@@sahasiyer8471 whitelist your phone number if you are in testing maybe? just a guess

[@preyanshumishra6161]

@@sahasiyer8471 bro did u find the answer

[@tuenguyen9722]

tks for video

[@richestboy_uz]

Thanks a lot 👍👍👍

[@Theatremovieclips-fz4gf]

Thank you much needed 💖💖

[@jupicolombia9069]

Muchas gracias !!! Me ayudaste demasiado.