How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)

🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️

Join me as I show you how to implement Phone OTP Authentication using Firebase Authentication. You'll learn the following in this video:

👉 What is Firebase Authentication and How to Set it up
👉 How to Implement Firebase Authentication to send an OTP SMS to any Phone Number
👉 How to Implement the ability to verify the OTP sent to your phone to Login the User
👉 How to Implement reCAPTCHA for the OTP Form
👉 Implementing Error Handling for the OTP Input Form
👉 How to Implement Higher-Order Components to get the User's Authentication State

📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?

👇🏻FOLLOW ME HERE:

💰 WANT TO SUPPORT THE CHANNEL?

🕐 TIMESTAMPS:
00:00 Introduction
00:23 Setting Up Firebase Authentication
03:15 Implementing Shadcn
04:17 Building the OTP Login Component
06:21 Implementing the OTP Count Down Timer
07:41 Implementing reCAPTCHA
08:30 Implementing the OTP SMS Feature
16:14 Implementing the OTP Verification Feature
23:14 How to Implement a Higher-Order Component to get the User’s Authentication State
28:53 Full OTP Feature Demo
29:56 Lesson Summary
30:16 Zero to Full Stack Hero
30:35 Outro

Let’s get it PAPAFAM 🔥.

#nextjs #OTP #firebase #ios #android #google #tutorial #typescript #testing #reactjs #javascript #nextjs15 #phone #shadcn

[shahinetoi]

apperciate it man, there is alot of methods and even chatgpt didn't have the job done but you solve it for me . keep it up💯

[mileslegend]

my bro keeps on blowing my true..am still learning development but the way you make it easier for me ..its amazing ...keep on doing the great work we appreciate

[theblueplanet]

Good one. Thanks for share.👍
For security reasons and user experience, I would suggest to clear the otp input if there was a wrong input.

[bfcodinghub]

Thank sonny for always putting all that energy for us

[willbangbang]

Thank for your work Sonny.
It would be cool if you made the next/react tripadvisor website one of these days

[developmentwithtariq]

Thank you for your great contribution in my life as a developer

[nevilpaul]

No matter how much i try Am getting the error
auth/invalid-app-credentials
an error in POST method also
can anyone say how to fix this??

[lynxnunkima]

I need help here, Next JS and React for front end, Firebase, and Capacitor for building IOS, firebase mobile auth is not working in IOS, can you help me, i am willing to pay

[Moviewalaa]

@sonny this video is both React js and Next js

[SourabhBhatt-ti]

I am not able to get otp even i just tried first time, saying need to add billing in it

[adloukondo]

Je suis le premier sur cette vidéo 💖💖 Merci beaucoup

[adithya]

The links are not working anymore. Can you provide a new link?

[Jay-pjob]

Knock knock
Who's there ?
CLERK

[rushikeshgangapurkar]

Can we use web Firebase in react native expo nextjs??

[IpshitaSett]

Didn't receive any OTP. Getting error! How to fix it? Please anybody help?

[SpiderbyteITLimited]

Google no longer supports this in their free pricing plan.

[muskanshekh]

Didn't receive any OTP?

Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox.

[arafatsbackup-data]

Same you as every youtuber just reply if the comment is appreciative it it is bug then not response as I am getting this err like FirebaseError: Firebase: Error