How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)
HTML-код
- Опубликовано: 27 июл 2024
- Free GitHub Source Code: 👉 www.papareact.com/otp-code
🚨 Join the world’s BEST developer course & community “Zero to Full Stack Hero” NOW: www.papareact.com/course
🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️
links.papareact.com/github
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?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPAFAM Merch: links.papareact.com/merch
🕐 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
![MAF Teeski - Whole Thing (feat. VonOff1700) [Official Music Video]](http://i.ytimg.com/vi/SHWEj-ndz6g/mqdefault.jpg)
More unsponsored content please!
This wasn’t sponsored! I’m not sure if you meant it was or not haha - but I only promote the tech I believe in just a heads up!😄💪🏽
Thank sonny for always putting all that energy for us
my bro keeps on blowing my mind......its true..am still learning development but the way you make it easier for me ..its amazing ...keep on doing the great work we appreciate
Thank you for your great contribution in my life as a developer
Thank you so much Sonny!
You’re welcome!!!
Thank for your work Sonny.
It would be cool if you made the next/react tripadvisor website one of these days
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.
Merci beaucoup.
Sonny man you the GOAT!
Appreciate you!!
Supper amazing!
Nice!
Thanks
Papafam❤
Je suis le premier sur cette vidéo 💖💖 Merci beaucoup
Papa React 🔥🔥🔥
🫡❤️
nice
Can we use web Firebase in react native expo nextjs??
@sonny this video is both React js and Next js
Yes except the client & server component logic from next.js
Knock knock
Who's there ?
CLERK
It’s always good to learn a broad range of skills! But yes Clerk is friggin’ awesome🔥💯
@SonnySangha oh yea, totally appreciate your work 😊👍
❤️💪🏽
Didn't receive any OTP?
Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox.
Find any solution?
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??
Moi aussi j'ai le même problème. tu as finalement trouver la solution.
Is this react native ??