Download "How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FvHXZ4jJFgT0%252Fmaxresdefault.jpg&w=1139&q=75)
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FtF-T0q2DlWo%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F5aFDj54RWQw%252Fsd2.jpg%253Fsqp%253D-oaymwEoCIAFEOAD8quKqQMcGADwAQH4AbYIgAKAD4oCDAgAEAEYZSBTKFMwDw%253D%253D%2526rs%253DAOn4CLDxKXLaZZVbDX0rek-EZoU_Oo4oXQ&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FBZ2Ee3HgIVY%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FRfZd2tjDa8U%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FYoSv2xbs-9s%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FZBgH6fenExA%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FbXxW9vxSU5w%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fh7lzKar7m0g%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FmqsXRxWvR3o%252Fsddefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FoR1tCXv9pVU%252Fmaxresdefault.webp&w=1139&q=75)
Video tags
Subtitles
00:00:00
today I'm going to teach you how to let00:00:01
users sign in with just their phone00:00:03
number we're going to build a secure00:00:05
onetime password signin system for our00:00:07
nextjs app using Firebase authentication00:00:10
let's dive straight into it my name is00:00:12
sunny AKA Papa react and I'm here to00:00:14
make nextjs and react super simple for00:00:16
you if that sounds good all you need to00:00:18
do is go ahead and smash that like00:00:19
button and subscribe to the channel for00:00:21
more videos like this step one head over00:00:23
to console. firebase.com now in this00:00:26
tutorial we're going to be using00:00:27
Firebase Firebase is a free service and00:00:30
it's a really powerful tool by Google00:00:32
that allows us a range of different00:00:34
services including authentication they00:00:36
let us use a number of different signing00:00:38
techniques the one that we're interested00:00:40
in today is of course SMS so what I need00:00:43
you to do is simply head over to the00:00:45
build section go down to authentication00:00:48
and we're going to go ahead and toggle00:00:49
our signin method you want to click on00:00:51
get started first then you'll see this00:00:54
screen right here so we're going to go00:00:55
ahead and click on phone simply pop over00:00:57
to enable and then all you need to go00:00:59
ahead and do is click on Save now we've00:01:01
enabled our signin method for this00:01:03
project so in this project we're going00:01:05
to be using nextjs but how do we00:01:06
actually connect Firebase to our nextjs00:01:09
app well we need to Simply go over to00:01:11
our settings project settings and we're00:01:13
going to create a nextjs app over here00:01:16
so we're going to go ahead and register00:01:17
our app let's go ahead and call this one00:01:18
OTP demo go ahead and click on register00:01:21
app and this will go ahead and give us a00:01:23
configuration file so you simply want to00:01:25
go ahead and copy that and we're going00:01:26
to head over to our application so here00:01:28
I have a blank xjs app you're going to00:01:31
do command B pop over to your side and00:01:34
in the package Json level I want you to00:01:35
create a file called Firebase dots00:01:38
simply paste in that configuration now00:01:41
you can go ahead and replace these00:01:43
values with environment variables00:01:45
however these are all public keys so00:01:47
it's okay to go ahead and expose them we00:01:49
then need to install Firebase into our00:01:51
project so command J to pull up our00:01:53
terminal I'm going to add a new terminal00:01:55
and I'm simply going to write mpm I00:01:57
Firebase to install Firebase into the00:01:59
project so first first off we're going00:02:00
to import some dependencies that we're00:02:01
going to need then we have our base00:02:03
configuration for Firebase and once00:02:05
we've done with that we're going to go00:02:07
ahead and set up our app so initially00:02:09
what we have to do is basically just go00:02:11
ahead and say con app equals get apps.00:02:13
length equals z and this basically just00:02:14
checks if we've already initialize the00:02:16
app before if we haven't then we're00:02:18
going to go ahead and initialize it for00:02:19
the first time otherwise we're just00:02:21
going to get the app that we've already00:02:22
initialized and this prevents us from00:02:24
having several Firebase instances at one00:02:26
time which can cause unexpected issues00:02:29
especially in an environment like next00:02:30
chair now what we need is we need to go00:02:32
ahead and get the or object this is00:02:33
going to allow us to basically go ahead00:02:35
and do that handy function that will00:02:37
send the SMS to the user's phone we're00:02:39
then going to set the language based on00:02:40
the user's current default language once00:02:43
that's done we're going to Simply export00:02:44
our or objects that way we can use it00:02:46
outside of this file now with that ready00:02:47
we're going to Simply head over to our00:02:49
page. TSX file which is in our home00:02:51
directory and this just resembles the00:02:52
homepage we're going to go ahead and00:02:54
create a OTP login component so in order00:02:57
to create that we simply head over to00:02:58
our folder structure we jump to the top00:03:00
level we type in components and I'm00:03:02
simply going to place it inside of the00:03:04
components folder like so we're going to00:03:06
create a react functional component like00:03:08
so this is going to be a client00:03:09
component as we're going to be using00:03:11
lots of interactive elements and also00:03:13
keep track of the user's State now that00:03:14
it's worth mentioning in order to get00:03:16
that Sleek input OTP UI that we're used00:03:19
to like so we're going to go ahead and00:03:21
use the shadan library so you see this00:03:23
Behavior where if I go ahead and hit00:03:25
backspace and so forth all of this stuff00:03:27
I'm going to go ahead and use from the00:03:28
shadan library so let's go ahead and00:03:29
install that before we carry on head00:03:31
over to the installation on ui. shen.com00:03:34
click on nextjs and we've already done00:03:36
the top step so we just simply need to00:03:37
run this command inside of our project00:03:39
head over to our project command J and00:03:41
simply pop that in and it will ask us a00:03:43
couple of questions so at this point00:03:45
you're want to click on default slate00:03:47
and we're just going to do all of the00:03:48
defaults for now that's completely fine00:03:50
you can skip the rest of the steps and00:03:51
we're going to jump down to this bottom00:03:53
step where we go ahead and add the00:03:54
button component from the shadan library00:03:57
so go ahead and Pop That in we're also00:03:58
going to go ahead and use the UT00:04:00
component so you simply head over to the00:04:01
input copy the command and run that in00:04:03
our terminal and to finish things off00:04:06
the input OTP which we're going to go00:04:08
ahead and do the same step for as well00:04:11
once that's done you'll see all three00:04:13
components have been copied and pasted00:04:14
essentially into our UI folder so back00:04:17
over our OTP component we're going to00:04:19
hide the terminal and we're going to00:04:20
import some of the dependencies that00:04:21
we're going to need now it's worth00:04:22
mentioning that all of this code is00:04:24
actually Linked In the GitHub down below00:04:26
so you can simply go there pop in your00:04:28
email and we'll send you all of the code00:04:30
for free so you can follow this tutorial00:04:32
with no problems at all now once that's00:04:34
done we're actually going to need a00:04:35
couple of things well firstly when the00:04:36
user successfully signs in we're going00:04:38
to redirect them so we're going to use00:04:40
something called the router and this is00:04:42
going to be pulled from next navigation00:04:43
secondly when the user inputs their00:04:45
phone number we're going to keep track00:04:46
of this in the state we're also going to00:04:48
keep track of the OTP that they enter00:04:50
when we're going ahead and verifying00:04:51
them we're going to have a error and00:04:53
success state to go ahead and make sure00:04:55
that everything is showed to the user if00:04:57
anything goes wrong at any point and00:04:59
we're going to have a countdown timer00:05:01
which makes sure that the user does not00:05:02
abuse our login method so we're going to00:05:04
actually restrict them to 60 seconds00:05:07
after so that way they if they want a00:05:09
second code sent to their phone for00:05:10
whatever reason if it wasn't sent the00:05:12
first time then we're going to implement00:05:13
that by using this piece of state right00:05:15
here next up we have something called a00:05:17
recapture this recapture essentially00:05:19
just checks if the user is a robot or00:05:21
not now this right here is simply a00:05:24
piece of state so it's actually not00:05:25
doing anything but we're going to use00:05:27
this piece of State in the following bit00:05:29
of code to do that check that I talked00:05:31
about and then we have something called00:05:32
the confirmation result so all this is00:05:34
is when we request the OTP we're going00:05:36
to get this back from Firebase and then00:05:39
what we can do is we can actually call a00:05:41
confirm function on this confirm result00:05:44
and we've basically passed it in a00:05:45
number and at that point it will say yep00:05:47
that's the correct number for the OTP or00:05:49
it will say no that's wrong and it will00:05:51
not let us through and authenticate us00:05:54
so that's exactly what that's going to00:05:55
be used for and finally I'm going to00:05:56
teach you about the used transition hook00:05:58
a very handy hook for handling when00:06:01
we're doing anything asynchronous so00:06:03
we're going to be using this to handle00:06:05
the loading States whenever the user is00:06:08
either requesting the OTP or once00:06:11
they're actually verifying the number00:06:12
they've entered whilst it's waiting to00:06:15
check if that's the correct number or00:06:16
not we're going to use this to go ahead00:06:18
and make this is pending true or false00:06:21
so first up we're going to go ahead and00:06:22
Implement a use effect now this is going00:06:24
to be used for this countdown timer00:06:27
right here so if I was to go ahead and00:06:29
in the US effect it look something like00:06:31
this now what we're doing here is we're00:06:33
essentially saying that this bit of code00:06:34
here runs when the component mounts and00:06:37
when the component mounts it will go00:06:39
ahead and run the code and it will also00:06:40
go ahead and rerun the code when the00:06:42
resend countdown variable changes so00:06:45
this is very simple we just have an00:06:46
empty variable here called timer if the00:06:48
recent countdown variable at any point00:06:50
is greater than zero it's just00:06:52
essentially ticking down that's all this00:06:55
means so if it was 60 it's going to go00:06:57
ahead and set it to 60 minus 1 which is00:06:59
going to be 50 59 and essentially we00:07:00
just have a timer here it's just ticking00:07:02
down as you see right here and then what00:07:04
we do is if it was to ever change this00:07:06
value we have something called a cleanup00:07:08
function here and this cleanup function00:07:10
just essentially means that it will not00:07:12
have several different countdowns at a00:07:14
given time right so if it goes ahead and00:07:16
changes you want to actually cancel the00:07:17
old one by clearing it setting the new00:07:19
one and then going ahead and doing the00:07:21
following the next step is to actually00:07:23
add something called recapture now00:07:24
Firebase requires us to do this so that00:07:27
the user does not misuse the the00:07:29
authentication Service provided by00:07:31
Firebase otherwise you can imagine you00:07:33
could have robots just act continuously00:07:35
requesting different SMS cards and it00:07:37
will cause a lot of harm to the servers00:07:39
over at Firebase so down here you can00:07:41
see we've got this recapture I'm going00:07:42
to show you how we can add that very00:07:44
simply well it's actually pretty simple00:07:46
we're going to have a use effect and all00:07:48
it uses is the recapture verifier00:07:50
function so this actually takes our00:07:52
authentication object that we prepared00:07:54
earlier over at Firebase file and then00:07:56
we can go ahead and pass in this ID00:07:58
which is recapture container and I'm00:08:00
going to show you how to do that in just00:08:01
a second and we're actually using an00:08:03
invisible one at the moment now you can00:08:05
go ahead and change this so it's00:08:06
actually visible on the screen but this00:08:08
is more of a nicer user experience in my00:08:10
opinion so to go ahead and mount it to00:08:12
the page all we have to do is simply go00:08:13
ahead and pop it in a div like so and00:08:16
this can actually be a self-closed div00:08:17
like this and this is where the00:08:20
recapture container is actually going to00:08:21
get mounted to so before we carry on00:08:23
we're just going to go back to our page.00:08:24
TSX and import the component like so and00:08:27
now any changes I make should be visible00:08:29
on the screen so first things first we00:08:31
want to First request the user's phone00:08:33
number and we want to have the ability00:08:35
to send the OTP so heading back over to00:08:37
our app what we're going to do is we're00:08:39
basically going to say if we do not have00:08:41
the confirmation result which is00:08:42
basically proof of the users actually00:08:44
tried to request the OTP then we're00:08:47
going to go ahead and render the00:08:48
following so in this case we've got a00:08:50
confirmation result and then we have a00:08:52
form which has it on submit function00:08:54
called request OTP which we're going to00:08:55
write in just a second we have the input00:08:57
field from shadan which takes a type of00:09:00
telephone which is essentially just00:09:02
supporting a telephone number then we00:09:04
have a value here called phone number00:09:06
and that's mounted to our state and then00:09:08
every time we change the value there it00:09:10
will simply update our phone number00:09:12
State and then you need to make sure00:09:13
that you actually enter the number with00:09:15
the country code as well so what we're00:09:18
going to do now is actually create this00:09:19
request OTP function and this is going00:09:21
to be the one that is responsible for00:09:24
all of the goodness inside of our app so00:09:26
in order to do this we're simply going00:09:27
to pop in the following signature so00:09:29
this is actually the header for our00:09:31
function so we've got request OTP it's00:09:33
an asynchronous function and it00:09:36
sometimes will take the event for the00:09:38
form action Handler so in this case the00:09:40
on submit will actually go ahead and00:09:41
pass in E and we can go ahead and do e.00:09:43
prevent default and this basically just00:09:45
prevents the form from submitting and00:09:47
refreshing the page now why have I made00:09:50
this optional because we're actually00:09:51
going to trigger this also from a button00:09:53
click later on when we want the user to00:09:55
resend the OTP so hitting save you can00:09:58
now see we have our in field and it's00:10:00
worth mentioning by having a form like00:10:02
so when we actually go ahead and type in00:10:04
like for example was typing ABC and I00:10:06
hit enter now that will actually submit00:10:08
the form when I hit the enter key that's00:10:09
why we want that kind of behavior so00:10:11
next up we're going to have a button00:10:12
underneath it very simply it's just00:10:14
going to be a button and yes you might00:10:16
be wondering this is outside the form00:10:18
because this button is actually going to00:10:19
trigger itself based on the on click the00:10:21
reason why we have this is because00:10:22
afterwards we're actually going to still00:10:24
have this button visible even when we00:10:26
have the input OTP field so this point00:10:28
this is going to be disable if we00:10:29
haven't entered the input uh for the00:10:31
phone number so in this case you see as00:10:33
I type in it will go ahead and enable us00:10:35
to go ahead and do this or if it's00:10:37
loading at any point or if the recent00:10:39
countdown is greater than zero so if it00:10:41
said 60 seconds that we've still got00:10:44
this would still be disabled which is00:10:45
good and then we change the text00:10:47
accordingly by using two nested tary00:10:50
operators when we click this button it00:10:52
will go ahead and request the OTP so00:10:54
here's a prime example of how we can use00:10:56
this in two different ways like so so we00:10:58
can either have it with the form event00:11:00
or simply pass it without any argument00:11:02
now we're going to go ahead and prepare00:11:03
a few things so underneath all of this00:11:05
we're going to go ahead and pop in a div00:11:07
with a pading of 10 and just centered00:11:09
text and basically if there's an error00:11:10
at any point or if there's a success SC00:11:12
at any point we're simply going to00:11:14
update that text onto the screen like so00:11:16
if these variables exist and finally00:11:19
before we carry on with the OTP stuff00:11:20
we're going to have a is pending loading00:11:22
indicator that is going to show on the00:11:23
screen now this is simply a little bit00:11:25
of nice Tailwind CSS that I've got here00:11:28
all of the code as I mentioned is in the00:11:29
description down below but if you go00:11:31
ahead and just simply pop in the00:11:32
following all this is guys is an SVG00:11:36
right so this is simply an SVG I got00:11:38
online and it just resembles a circle00:11:40
loading spinner so if you remember00:11:42
clearly when we actually went ahead and00:11:44
implemented it in the actual demo so I'm00:11:46
going to go ahead and pop in an example00:11:48
like so you see this little spinner00:11:50
right here this will go ahead and do it00:11:51
and then as you can see we have an00:11:53
invalid error right in this case where00:11:56
it's just shown up down below so that's00:11:57
perfect example of how we want it it to00:11:59
look so back over to our implementation00:12:02
the first step when the user goes ahead00:12:03
and clicks or hits enter on the input00:12:05
field is we're actually going to set the00:12:07
resend countdown timer to 60 because we00:12:10
do not want them to go ahead and spam00:12:12
the button by doing this we disable the00:12:14
button immediately for 60 seconds we're00:12:17
then going to call it the start00:12:18
transition function now what this does00:12:21
is essentially while anything is pending00:12:24
inside of here for example if we have00:12:25
any await core it will actually change00:12:28
our is pending state to true and this is00:12:31
a really really handy function I've been00:12:33
using this a lot more lately and I00:12:35
highly recommend you guys check it out00:12:36
as well so the first step is we're going00:12:38
to set the error to empty if there was00:12:40
an error before we're going to go ahead00:12:42
and remove that the second step is we're00:12:44
going to go ahead and check if for some00:12:46
reason the recapture failed we're simply00:12:49
going to go ahead and return a error so00:12:51
in this case and we're going to set our00:12:53
error to basically say recapture verify00:12:55
is not initialized and this might happen00:12:57
for example for screen readers or00:12:59
anything like that um or if you're00:13:01
actually a programmed robot for some00:13:04
reason you know you made a python web00:13:05
scrape or something we actually want to00:13:07
go ahead and prevent the user from00:13:08
misusing this login page then we're00:13:10
going to have a try catch block and this00:13:12
is where the magic happens over at00:13:14
Firebase so we're going to go ahead and00:13:15
call the sign in with phone number00:13:18
function this is an asynchronous00:13:19
function so we're going to await on it00:13:21
and then we're going to store the result00:13:23
inside the confirmation result and00:13:24
essentially all this does if we hover00:13:26
over sign in with phone number you'll00:13:28
see it send sends an SMS to the user's00:13:30
given phone number and it returns a00:13:32
confirmation result we can then go ahead00:13:35
and once we have the code sent to their00:13:37
phone called confirmation result.00:13:39
confirm with the code to sign the user00:13:41
in okay and as you can see here it00:13:43
requires a recapture based00:13:46
implementation so it takes the auth00:13:47
object from Firebase so it knows where00:13:49
we're going to go ahead and initialize00:13:50
the user so which Firebase project takes00:13:52
the phone number to send the SMS to and00:13:54
then the recapture verifier to make sure00:13:56
that you're not a robot and you're00:13:58
actually genuine when you request this00:13:59
once that's done we simply update the00:14:01
confirmation result and we set the00:14:03
success message to be OTP sent00:14:05
successfully now after that if there was00:14:07
ever any error we're going to go ahead00:14:09
and log out the error and we're going to00:14:10
reset the countdown timer to zero to00:14:13
give the user a second chance inputting00:14:15
the input field and submitting it so00:14:18
we're also going to improve our error00:14:19
handling a little bit so whenever00:14:21
Firebase returns an error they actually00:14:23
have something inside of the code object00:14:26
in the error um returned response so in00:14:28
this case we can check against that we00:14:30
can say if error. code is or invalid00:14:32
phone number this means that you passed00:14:34
the invalid phone number to Firebase we00:14:36
also have one for rate limiting the00:14:37
number of requests and for everything00:14:39
else we've got a generic error message00:14:41
saying failed to send OTP so let's give00:14:43
it a quick try if we go here and we00:14:45
simply pop our number in so in this case00:14:47
we're going to go ahead and pop in a00:14:48
number like so and I'm going to00:14:50
purposely put a wrong number here to go00:14:52
ahead and show you what happens in that00:14:54
event so in this case you can see an00:14:55
invalid phone number so let's go ahead00:14:57
and actually pop in a real number so I'm00:14:58
going to pop pop in a r number like so00:15:00
we're going to click on send OTP and as00:15:02
you can see it says OTP sent00:15:04
successfully now heading over to my00:15:06
phone you can see I just received a text00:15:08
message on my phone for the OTP code you00:15:12
also notice that the input field is00:15:13
hidden that's because we've actually00:15:15
populated the confirmation result and00:15:17
this is actually really handy because00:15:18
now what we can do is we can00:15:20
conditionally show the inut OTP on the00:15:24
screen for the user to enter in the code00:15:27
that they received on text what we're00:15:29
going to do is we're going to pop it in00:15:30
like so so you can see the top one is00:15:32
showing the first input field if we00:15:35
hadn't already requested the code so in00:15:37
that case confirmation result wouldn't00:15:39
have been populated so I'm refreshing00:15:40
now so we've got fresh date and then00:15:43
once we've requested for that code and00:15:44
it comes back we will have the00:15:46
confirmation result inside of our state00:15:48
and this means that we can go ahead and00:15:49
render out the six digigit input OTP00:15:53
fold from Shaden so what we're doing00:15:55
here is we're setting a max length of00:15:56
six the value we're mapping it to our00:15:58
state and when Weck change the value00:16:00
we're actually setting it like so so we00:16:01
update our state then we have these00:16:03
input OTP groups and I've got a nice00:16:05
little separator between the first three00:16:07
and the last three because it's a nicer00:16:09
UI element experience and this is00:16:11
typically how we see it on websites so00:16:13
let's go ahead and give it a second try00:16:14
and now you can see if we do the same00:16:16
thing what you'll notice is that once we00:16:18
submit it you'll see it gets sent00:16:20
successfully so we're going to add a bit00:16:22
of styling here to fix this but you can00:16:24
see that now we've actually got a nice00:16:26
input field like so so it goes ahead and00:16:28
handles the user input and if even it's00:16:30
got the default Behavior if I was to hit00:16:31
backspace accordingly it goes ahead and00:16:34
does the following now if I try to do00:16:35
this you see nothing happens what we00:16:37
want to do is when it hits final number00:16:40
being added then we want to00:16:42
automatically trigger a function called00:16:44
verify OTP at which point we can log the00:16:46
user in if all is good so first up we're00:16:48
going to go ahead and add a little bit00:16:50
of styling to Center all our elements00:16:51
that looks a lot nicer and now we're00:16:53
going to go ahead and actually make sure00:16:55
that the user can actually verify the00:16:57
OTP so how do we do this well we00:16:59
actually you might be wondering we could00:17:01
do it with a sort of button click and00:17:02
that kind of aspect but I want to do it00:17:04
automatically I want to make sure that00:17:06
it's very easy for the user and it's a00:17:07
seamless experience the way we can do00:17:09
this is we can have a use effect so what00:17:11
I'm going to do is I'm going to have a00:17:13
use effect so let's go up to our use00:17:14
effects I'm going to pop it under this00:17:15
one and we got a use effect which00:17:17
basically will go ahead and this will00:17:20
run when the component mounts and it00:17:21
will run whenever the OTP value changes00:17:23
so every time I change a value here that00:17:26
is the OTP value changing and all I'm00:17:28
going to simply do is I'm going to00:17:30
basically have a check here and as you00:17:32
can see we have a check to say if the00:17:34
OTP length is six so I've entered in all00:17:36
the characters then we're going to have00:17:37
has entered all digits become true and00:17:40
then we say if has entered all digits00:17:42
which is true so basically once I've00:17:43
entered in all six values then we're00:17:45
going to trigger the verify OTP function00:17:49
and this function is fairly00:17:50
straightforward so we have the signature00:17:52
like so so it's simply a asynchronous00:17:54
function and then we're going to use our00:17:56
helper function which is the start00:17:58
transition and as you can see this is00:18:00
such a handy function and I'm actually00:18:01
going to be using it way more in my00:18:03
projects because anything I put in here00:18:05
like while we're verifying we can00:18:07
basically have that is pending state to00:18:08
update the user's UI we're going to go00:18:10
ahead and firstly set the error message00:18:12
to uh empty to start things off then00:18:14
we're going to go ahead and check to00:18:16
make sure that if there is no00:18:18
confirmation result for whatever reason00:18:20
we're going to say you need to actually00:18:21
request the OTP first so we're going to00:18:23
handle the edge case in the event that00:18:25
that ever happened then we're going to00:18:27
have a try catch block so that way we00:18:28
can safely execute the next step and00:18:31
then all we need to do here to make it00:18:33
work the way we expect is go ahead and00:18:35
say await confirmation result. confirm00:18:39
and we pass in the OTP value now we00:18:41
don't actually know what the correct00:18:43
code is on the front end and this is00:18:45
actually the safe way we want it to be00:18:47
because the user will have received the00:18:49
text message so all we do is we simply00:18:51
pass the OTP value into the confirm00:18:53
function this will go ahead and send the00:18:55
value to Firebase and it will basically00:18:57
say yep you're good or it will go ahead00:18:59
and basically say nope you failed to00:19:01
verify the OTP so in that case we're00:19:03
going to go ahead and actually catch the00:19:05
error if anything went wrong here and it00:19:07
will go ahead and say yep you failed to00:19:09
enter the correct OTP value uh please00:19:12
check your OTP and try again and you can00:19:14
see this bit right here if you were00:19:15
successfully able to log in then we're00:19:17
going to go ahead and actually send you00:19:19
over to the home screen like so now you00:19:21
might be wondering but Hang on we're00:19:22
already on the home screen well we're00:19:23
actually going to do a little shift00:19:24
afterwards and I'm going to teach you00:19:26
how to check if the user is00:19:28
authenticated or not not and if they're00:19:29
not authenticated we're going to send00:19:30
them to this screen which is actually00:19:32
going to be changed to the login screen00:19:34
afterwards so we're going to handle that00:19:36
in just a second but let's give it a00:19:38
full try so I'm going to go ahead and00:19:39
pop in my number once more time so in00:19:41
this case let's go ahead and pop it in00:19:43
like so I'm sending the OTP you can go00:19:46
ahead and make sure that you receive an00:19:47
OTP so in this case boom I got an OTP on00:19:50
my phone I'm going to go ahead and pop00:19:51
it in like so so00:19:53
669 02 0 and as I hit this key I want00:19:57
you to pay attention to a couple coup of00:19:59
things it's going to start a transition00:20:00
we should see a loading indicator for00:20:02
the is pending and then it's going to00:20:03
literally trigger the verify OTP because00:20:05
I've entered in the last digit so let's00:20:07
go ahead and pop that in like so and you00:20:09
can see it's verifying the OTP00:20:11
everything went well and it redirected00:20:14
me to the home screen right so in this00:20:15
case it just simply said OTP sent00:20:18
successfully already because we hadn't00:20:19
already changed anything but that was00:20:21
actually the correct Behavior if it00:20:22
failed at any point we would have seen00:20:24
failed to verify the OTP so I guess the00:20:27
next step is we need to go ahead and00:20:29
actually change our pages so that this00:20:31
is the login page and then we have our00:20:33
homepage and we need a way to check if00:20:35
the user is actually authenticated or00:20:36
not so what I'm going to do is I'm going00:20:38
to actually simply make a login page so00:20:40
we create a folder called login and00:20:42
inside we create a page. TSX file inside00:20:44
of here we're going to Simply have our00:20:46
login page like so so we're going to00:20:49
have our login page like so and this is00:20:52
going to Simply go ahead and import the00:20:54
following so we're going to have the H100:20:57
which is going to say how to add add00:20:58
onetime password phone authentication00:21:00
we're going to import our component like00:21:02
so and I'm just going to add a minor bit00:21:04
of styling to it to make sure it looks00:21:06
all good okay and then on our page. TSX00:21:10
we're simply going to change this one00:21:12
now to basically know if the users00:21:14
logged in or not so on this page you see00:21:16
this is actually going to be resemble00:21:18
the homepage okay and then if we go to00:21:20
the for/ login page we will now see the00:21:23
login aspect so going back to the00:21:25
homepage right here I now need to check00:21:27
if the user is authenticated or not and00:21:30
essentially I want to have something00:21:32
like this I want to be able to basically00:21:34
say in my code if there is a user00:21:36
welcome to the app and I want to00:21:38
basically say welcome to the app as a00:21:39
logged in user and pass in the U ID00:21:41
otherwise I'm going to say you're not00:21:42
logged in and then I'm actually going to00:21:44
go ahead and render the following if00:21:46
that is the case so I'm actually going00:21:48
to have a user here check again saying00:21:51
if there is a user render a sign out00:21:53
button in which case we call the sign00:21:55
out function from Firebase which we can00:21:57
go ahead and import like so00:21:59
otherwise if there isn't a user we're00:22:01
simply going to send them to the login00:22:03
page to go ahead and sign in so let's go00:22:05
ahead and import all of the dependencies00:22:07
like so so this is simply a next tag and00:22:09
as you can see the only thing missing00:22:11
here is the user so we need to create a00:22:13
way in which we can just check if the00:22:15
user's authenticated and it needs to00:22:17
listen and actually make sure that it00:22:19
updates when the user's authentication00:22:21
State changes so the way we're going to00:22:23
do this is we're going to go ahead and00:22:24
firstly convert this to a client00:22:26
component uh as we have Interactive00:22:28
elements on the page and we're going to00:22:29
use our own custom hook that custom Hook00:22:32
is actually going to be this one right00:22:33
here use or so right now I'm going to00:22:35
teach you how to go ahead and create00:22:37
something called a higher order00:22:38
component so that we can go ahead and00:22:40
actually wrap our entire app around00:22:43
something called a or context provider00:22:45
so it's very simple actually in reality00:22:47
what we're going to basically be doing00:22:49
is inside of our layout function so00:22:51
inside of our layout. TSX file we're00:22:54
simply just going to wrap our entire00:22:56
component with this thing called a or00:22:59
provider okay so I'm going to go ahead00:23:01
and pass this in like so this is just00:23:03
going to be something called an or00:23:04
provider and this is actually going to00:23:06
come from our components now of course00:23:08
we're going to have to create this00:23:09
function so head over to your components00:23:12
or provider. TSX and inside of here guys00:23:15
what this essentially does this is known00:23:17
as something called a higher order00:23:19
component and essentially it wraps our00:23:21
component to provide authentication00:23:23
context and it's going to be using00:23:26
something called the context API inside00:23:28
of react so I'm going to do a couple of00:23:31
imports and we're also going to convert00:23:32
this to a client component to get00:23:35
everything ready for what we need now a00:23:37
higher order component as we saw00:23:39
previously here actually has something00:23:42
inside of it so this is actually known00:23:44
as the children of the higher order00:23:46
component so the way that this works is00:23:49
we actually pass in props as an argument00:23:51
here we can D structure that to become00:23:53
the children and then this is actually00:23:55
of type react node and basically all00:23:58
that means is that everything that is wrapped00:24:00
inside is rendered out like so here so00:24:04
anything that is wrapped inside of this00:24:07
essentially like for example you saw00:24:09
here all of this would be considered the00:24:12
children being passed through as react00:24:14
nodes okay so once we've done that we00:24:17
now need to go ahead and actually create00:24:19
something called our orth context and00:24:21
we're going to be using the context API00:24:23
now very simply the way you can think00:24:25
about this is imagine your app has like00:24:27
a global storage place but we can go00:24:30
ahead and store information now of00:24:32
course this can be broken up into00:24:33
different parts of the storage uh space00:24:36
so in this case we've got the or context00:24:37
we could also have like a basket context00:24:40
if we have shopping cart items in ins00:24:41
side of our app and so forth but in this00:24:43
case we're going to have our type which00:24:45
is called or context type and this is00:24:47
basically what we're storing in this00:24:49
slice of our state and we have the or00:24:52
context and in this case we basically00:24:54
just type in create context from react00:24:56
so this is actually using the context00:24:57
API I mentioned we pass in our own type00:25:00
and then we give it an initial State and00:25:02
you see if I don't pass this in it00:25:03
actually has an error so we're going to00:25:05
say initially the user is no okay and00:25:08
then what we do is inside of our uh00:25:11
component right here we basically have a00:25:13
piece of State okay and what we do is in00:25:16
order to provide this to the rest of our00:25:19
application what we're going to do is00:25:21
we're actually going to have something00:25:22
called a orth context. provider right so00:25:25
you can see here the or context provider00:25:27
is like so and this is freaking out00:25:29
because it doesn't have a value so at00:25:32
this point the state that we actually00:25:33
prepared here all we do is we simply00:25:35
pass it in and inside we pass an object00:25:38
with the user object like so now this is00:25:41
exactly what we wanted except you can00:25:42
see we have an error and this is00:25:43
happening because inside of layout. TSX00:25:46
we haven't actually imported this00:25:48
correctly right so in this case if I was00:25:49
to go back here you can see now if we00:25:52
import it you will go ahead and see but00:25:54
it has another issue which is the use or00:25:57
that's because we didn't actually finish00:25:58
theal provider so we're going to go00:25:59
ahead and finish this right now remember00:26:01
I said we need to listen if the user00:26:04
State changes on Firebase so we're going00:26:06
to have a use effect to do this so here00:26:09
we have our use effect and all this does00:26:11
is it runs when the component mounts and00:26:13
here you can see it only runs that00:26:15
single time and this is because we're00:26:18
actually going to tap into something00:26:19
called the onof state changed function00:26:21
from Firebase so this is an observer00:26:24
that checks if the user sign in state on00:26:26
Firebase changed and if it does we00:26:28
simply fire off a new user and we can do00:26:31
whatever we want with it in this case00:26:32
we're going to store that in our user00:26:34
State and then basically provide that to00:26:36
the rest of the app via the context API00:26:39
so you need to make sure you do one00:26:41
thing and that's when you use the onor00:26:43
state changed it actually returns this00:26:45
thing called the unsubscribe function00:26:47
and that's important because for00:26:49
whatever reason in this case we're not00:26:50
rendering it but for whatever reason if00:26:52
we were to basically go ahead and in00:26:54
this case we can consider or as an00:26:55
actual dependency here if the or object00:26:58
changed right what we might end up with00:27:01
is two of these listeners the unauth00:27:03
state change listeners so in our cleanup00:27:06
function so this is known as a cleanup00:27:07
function and every single use effect has00:27:10
a cleanup function you can check my00:27:11
video linked over here right now if00:27:13
you're confused on use effect and how to00:27:16
use it but every single use effect has a00:27:18
cleanup function so what we do is we00:27:19
simply call the unsubscribe function so00:27:20
that way it would detach that list00:27:22
number before it reattaches another one00:27:24
for if any case like the object changes00:27:26
now the final thing is is how to go00:27:28
ahead and consume it so we did the first00:27:31
part which is actually go ahead and00:27:33
provide our app so all of this now can00:27:35
actually access the authentication of00:27:37
the user however how do we actually get00:27:39
the value right so you might be00:27:41
wondering okay you've done all this work00:27:42
but how do you actually get that value00:27:44
well it's very simple we need to create00:27:46
our own use or hook and you might be00:27:48
wondering that's going to take a bit of00:27:49
time but it's actually way easier than00:27:51
you think once we've actually got our00:27:53
context set up like so we can simply go00:27:55
ahead and have our hook like so it's an00:27:57
arrow function and it simply says use00:28:00
context and we just pass it the or00:28:02
context like so and this is now a custom00:28:05
hook so what we can do is we can go over00:28:07
to our page import it like so and we can00:28:09
pull the user through so you can see we00:28:11
basically now have this hey we've got00:28:13
our user logged in and this is the00:28:15
user's actual logged in state so to00:28:18
prove the point we're going to go back00:28:19
to our application we're going to go00:28:21
over to our authentication right here so00:28:24
in this case I'm going to head over to00:28:25
authentication and boom you can see it00:28:27
starts off with h16 so let's just go00:28:29
ahead and prove that point h16 and you00:28:32
can see h16 perfect we have our user00:28:34
authenticated and you have the users00:28:36
number like so and as you can see the00:28:38
provider is the telephone so it works00:28:40
exactly as we expected it now with that00:28:43
done we can go ahead and demo the entire00:28:44
app and I made a little mistake here on00:28:46
the login we don't actually need the on00:28:48
sign out that was a mistake so in this00:28:50
case it should be a simple login button00:28:51
if you're not already signed in so now00:28:53
if I go ahead and click this right00:28:55
because we're signed in it will go ahead00:28:57
and call these sign up function so if I00:28:58
click that you see how the00:29:00
authentication state from our context00:29:01
API actually updated perfect okay and00:29:04
now if I click sign in it should do link00:29:07
to me to the login page so let's give00:29:09
that a try okay perfect now we'll do the00:29:12
full flow let's go ahead and log to my00:29:14
account so I'm going to go ahead and00:29:16
pass in my number I will get an OTP on00:29:18
my phone I'm restricting the user to00:29:20
requesting a second one for 60 seconds00:29:23
so we've got that protection there right00:29:25
there and then I get the OTP on my phone00:29:27
so I'm going to go ahead and pop that in00:29:28
like so and I'm just going to prove to00:29:31
you as well if I put a wrong OTP in so00:29:33
let's just say I put a wrong number in00:29:34
you can see failed to verify please00:29:36
check your OTP right so let's go ahead00:29:38
and change that okay I corrected my00:29:40
mistake and just like this guys boom00:29:43
once it was successful it logged me in00:29:45
and as you can see there we are now00:29:47
logged into our app so just like that00:29:49
you've added in user authentication Via00:29:52
SMS and otps pretty simple right so00:29:56
there we have it guys I hope this is giv00:29:57
you a clear understanding as to how you00:29:59
can go ahead and add in telephone00:30:02
authentication via SMS otps into your00:30:05
app and how we can do so for free using00:30:08
Firebase authentication remember guys00:30:09
don't forget the code is in the00:30:10
description down below so if you get00:30:12
stuck at any point you can refer to that00:30:14
to have a nice little reference if you00:30:15
found this content useful do not forget00:30:17
to like And subscribe and if you want to00:30:19
learn more about this kind of stuff or00:30:20
you want to dive deeper into either00:30:22
nextjs react all of the backend00:30:24
technologies that we've spoken about00:30:25
today and so much more including weekly00:30:28
mentorship calls every single Wednesday00:30:30
then check out Z to4 stacko ata.com00:30:33
until next time guys happy coding and00:30:35
stay awesome peace00:30:40
[Music]Description:
Free GitHub Source Code: 👉 https://www.papareact.com/otp-code 🚨 Join the world’s BEST developer course & community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course 🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️ https://www.papareact.com/offers/MXV3vdLQ 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 👉 https://www.papareact.com/newsletter 👇🏻FOLLOW ME HERE: Instagram: https://www.facebook.com/unsupportedbrowser Facebook: https://www.facebook.com/unsupportedbrowser LinkedIn: https://www.linkedin.com/in/saajansangha Twitter: https://links.papareact.com/twitter Discord: https://discord.com/invite/9auBmCneMx 💰 WANT TO SUPPORT THE CHANNEL? Donate here: https://donate.stripe.com/9AQ03Lard2fC3U4dQU Grab some PAPAFAM Merch: https://teespring.com/en-GB/stores/papa-react 🕐 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 🔥.
Mediafile available in formats
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)" video?
http://univideos.ru/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "How to add Phone OTP Authentication to any Next.js app with Firebase! (Tutorial for Beginners)"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
How do I play and download streaming video?
- in video formats, hover your mouse over "Streaming Video**";
- right-click on "Copy link";
- open VLC-player;
- select Media - Open Network Stream - Network in the menu;
- paste the copied link into the input field;
- click "Play".
- copy the video address (URL);
- select "Open Network Stream" in the "Media" item of VLC player and paste the link to the video into the input field;
- click on the arrow on the "Play" button and select "Convert" in the list;
- select "Video - H.264 + MP3 (MP4)" in the "Profile" line;
- click the "Browse" button to select a folder to save the converted video and click the "Start" button;
- conversion speed depends on the resolution and duration of the video.
For this purpose you need VLC-player, which can be downloaded for free from the official website https://www.videolan.org/vlc/.
How to play streaming video through VLC player:
To download streaming video via VLC player, you need to convert it:
Warning: this download method no longer works with most YouTube videos.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.