0:00
hello developers welcome back to the programming Fields I'm UMES Rana and this is the fifth part of our larav 1145
0:07
authentication Series in the last video we set up email verification functionality when the user will try to
0:14
login without verifying the registered email address that will force the user to verify the email address first before
0:21
log to the account also we configured the email settings so that users could
0:26
receive email verification links directly in their inbox and on the back end we used laral
0:32
fortify to manage the logic and security for these action now today we are going to explore another essential feature
0:39
that is two Factor authentication this feature adds an extra layer of security to your application and this require
0:47
users to verify their identity through an additional authentication code and usually this can be generated by an
0:54
authenticator app just like Google Authenticator or Microsoft authenticator
0:59
by enabling two Factor authentication we ensure that even if someone gains access
1:04
to a user's password they won't be able to login without this authenticator code
1:10
this makes the application significantly more secure so in this video we will go step by step through how to enable and
1:17
configure two Factor authentication using larl 4tify we will also take a look at how to handle both
1:24
authentication codes and Recovery codes as well for a seamless user experience so without further delay let's jump
1:31
right into the implementation of this two Factor authentication so before getting started let's quickly come to
1:37
the terminal and if we check the route list here we don't have the two Factor
1:43
authentication related routes now in order to enable the routes firstly we will have to enable that two Factor
1:50
authentication feature in the fortify configuration file so let's come to the code editor come under the config here
1:57
we have the 4y. PHP if if you scroll down to the Future section here we have the two Factor
2:05
authentication let's enable this okay and first time I will comment
2:11
these two options confirm and confirm password now let's come to the terminal again and if we check the route
2:18
list this added a bunch of new routes for the two Factor authentication
2:23
recovery codes secret key and two Factor challenge now we can implement this
2:29
functionality in the application so let's come to the browser now and let me log in through the
2:35
registered email address I have the password as 1 2 3 4 5
2:41
6 7 8 yes I have logged in now now if we
2:46
check the route list again we will have to enable the two Factor authentication
2:51
and for this Lille 45 provides one post route that is two factor. enable and
2:58
currently we are using laral Bridge package for the front end implementation but laral Bridge does not provide the
3:05
two Factor authentication feature so we don't have the two Factor authentication view in the laral bridge package so we
3:12
will have to create this form manually in order to enable and disable this two Factor authentication feature so what I
3:19
will do inside this profile settings I will add one more sub section here for
3:24
enabling and disabling two Factor authentication currently in the profile section we have the profile information
3:31
password update and delete account feature so similar to this I will add one more subsection here in order to
3:38
manage the two Factor authentication feature so let's come to the code editor again and let's scroll down to the
3:45
resources views inside this profile we have the edit blade in this edit blade
3:52
we have three subsections included this is for update profile information this
3:57
is for password and this is for account deletion so after this profile information I want
4:03
to add one more subsection in order to manage the two Factor authentication so simply I will duplicate this section
4:11
here this is for profile information here I want to add this for two Factor
4:18
authentication this is for password update and lastly this is
4:25
for account deletion all right here we will have to change the view so I will
4:30
create another view for this and this path is included from the profile. partials folder so inside the profile we
4:37
have the partials folder so I will change this to two
4:44
Factor authentication and inside this partials I will create one view as two
4:53
Factor authentication do blade. PHP now inside this we will have to add a form
5:00
and there will be the submit action so what I will do I will simply replicate
5:06
this update profile information form I will copy it from here and I will paste
5:11
it inside this two Factor authentication and I will modify this so I will change this title as two Factor
5:20
authentication and regarding the subtitle I will change this to add additional security to your
5:31
account using two Factor authentication okay let me dock this
5:38
window here we have the form and this form action is triggering to user
5:44
profile information. update so instead of this we will have to add the two Factor authentication do enable Okay so
5:52
let's change this to two factor. enable now we don't need
5:58
this put method because this route is expecting post method okay so this is
6:04
done now here we don't need these input Fields so I will remove
6:12
this only I need this submit button here so I will change this text to enable
6:20
this is fine let's come to the browser Let me refresh this page here we have the two Factor authentication section
6:27
now in order to add the form X ction for enabling or disabling firstly we will have to check if the two Factor
6:34
authentication is enabled for the logged in user so what I will do I will add
6:40
dump Au user so here we will say authenticated
6:45
user data let's come to the browser Let me refresh now yes we can see we have
6:52
the authenticated user data coming from users table and if we expand this here
6:58
we can see we have the attributes as two Factor secret and two Factor recovery codes and currently these two fields are
7:05
null so this indicates the two Factor authentication is not enabled for this
7:11
current user so firstly we will have to enable this by clicking on this enable button so this will make one post
7:17
request and that will enable the two Factor authentication let me click on this yes that post request is
7:26
executed and if we scroll down here we could not see that that success message so if we'll expand this attributes again
7:33
now we have the two Factor secret and two Factor recovery codes all right so
7:39
firstly I will check one condition for the current user if the two Factor authentication is enabled that means if
7:45
the two Factor secret is generated then we will change this button text to disable so let's add this
7:53
condition here I will add one condition Au user
8:00
two Factor secret is there then the text will be disabled else it will be enabled
8:09
and in order to display the success message I will display the session status so I will add
8:17
dump session status okay let me remove this Au user now let me
8:25
refresh yeah so currently the two Factor authentication is enabled that's why we are getting the disable option here and
8:33
here we will change this button Type To Danger so we will have the button in the red background color let's change this
8:40
so what I will do I will add if directive and I will cut this condition
8:46
from here and I will add it here if we have two Factor secret enabled then I
8:51
will call another button and if it is not there then I will call this primary
8:57
button here okay and I will remove this condition from
9:03
here and instead of this primary button I will call the danger button here if
9:08
we'll check this component inside this components we have the danger button added here so I will call this button
9:16
here so let me copy this I will add it here and instead of primary I will
9:22
change this to Danger button same thing we will have to change it here and instead of enable the text will be
9:30
disable let's check now let me refresh yes we have the disable button
9:36
in the red background color now for disabling the two Factor authentication we will have to change the form action
9:43
method so if we'll check the route list again for the disabling we have another route as to factor. disable and this
9:51
needed delete request so we will have to add one more condition here regarding the form action so what I will do I I
9:59
will add this two Factor secret condition here for this form route so I will check if two Factor secret is there
10:08
then this will call another route as two factor. disable else it will call two Factor do
10:15
enable and here we have the form method as post by default so I will have to change form method to delete if the two
10:24
Factor authentication is enabled so inside this if condition I will add method directive here and this method
10:32
will be delete okay this is done let's come to the browser now let me refresh
10:39
and now let's try to disable the two Factor authentication let's click on this yes the two Factor authentication
10:47
is disabled and here we received the session status as two Factor
10:53
authentication disabled and if we'll try to click on enable again the session status is two Factor
11:00
authentication enabled so we will have to add the condition to display the session message so let's add
11:08
it here I will add PHP syntax and I will Define one variable as session status
11:15
and I will capture this here using the session function and I will check if
11:21
session status has two Factor authentication enabled then I will change the message
11:28
as two Factor authentication is
11:35
enabled else I will add one more condition if the S and status has two
11:40
Factor authentication disabled
11:45
okay then I will add message as two Factor authentication is
11:55
disabled all right so we have added this tary op operator for this condition now
12:01
I will check if we have this SN status so I will remove this condition from here and instead of this static message
12:09
I will add this Dynamic message here this is done let me remove this dump
12:14
here and here let me increase this time out to 4 second let me come to the
12:20
browser now let's refresh currently two Factor authentication is enabled now if
12:26
we try to click on disable yes two Factor authentication is disabled and here we got that success
12:34
message again if we'll try to click on enable yes this is enabled now now while
12:40
enabling and disabling the two Factor authentication we need to confirm through the current password so that
12:46
this will detect that you are authenticated user and you want to enable and disable that feature and for
12:53
this larel 45 provides option in the configuration of 45 so if we come under
12:59
the fortify features here we have the confirm password option so let's enable
13:04
this confirm password to True okay let's come to the browser let's refresh now
13:10
and now if we try to click on disable here it redirected to the user
13:15
confirm password so currently this is expecting one form in order to confirm the password so this will capture the
13:22
entered password and then this will perform that action to enable or disable the two Factor Authentication so we will
13:29
have to add the confirm password view in the lar 4tify service provider as we
13:34
already did for login register and password reset so let's come to the fortify service provider under the app
13:42
providers we have the fortify service provider here we will have to add
13:49
password confirm view I will add 45 colon colon confirm password view again
13:58
we will have to add this Anonymous function and we will have to render that view so before rendering The View let's
14:05
check if the view is available by lar Bridge package so if we'll come to
14:11
resources views under the O folder we have the confirm password blade okay so
14:18
we can render that view return view so we will write Au do confirm password
14:26
okay so this will open this confirm password view let's come to the browser
14:32
let's refresh now yes that confirm password view is rendered successfully
14:38
now before confirming let me check the route first so we have the post route as user confirm password and this route
14:45
name is password. confirm now if we come to the password confirm View and if we
14:50
check the form action we have the correct form xtion as password. confirm so this will work as expectedly now
14:58
let's come to the browser and let's confirm the current password here so I will add 1 2 3 4 5 6 7 8 if I
15:05
will click on confirm yes password is confirmed now here we can disable this two Factor
15:12
authentication let me click on disable now yes that is disabled now now if the
15:18
two Factor authentication is enabled then we will have to display the QR code here so that by scanning that QR code we
15:25
will get the authentication code so that you can enter that recovery code while login so in order to display the QR code
15:33
we will check out the official documentation of laral 45 and if we scroll down under the two Factor
15:39
authentication we will have to add one trait as two Factor authentic cable so this will be added in the user model so
15:47
that this will apply the two Factor authentication for the user so let's come to the user model
15:54
first here we will have to import that use
15:59
larel 45 to factor authentic cable all right after importing this trit we will
16:07
have to use it here so I will add two Factor authentic cable this is
16:13
done so this is applied for the user now in the next step we will have to display
16:19
that QR code because we have already implemented this functionality to enable and disable two Factor
16:26
authentication so for displaying the QR code code we will have to add this two
16:31
Factor QR code SVG function okay so let's come to the code editor under the
16:37
two Factor authentication view here if the two Factor authentication is enabled then I will
16:45
display that QR code okay so I will add Au
16:53
user to factor QR code SVG function let's come
16:59
to the browser let's refresh the application here we can see this printed the SVG in
17:06
the HTML format but here we needed the QR code image so for that we will have
17:12
to change the syntax here so instead of double curly brasses I will use single curly brasses and double exclamation
17:18
mark so this will render the HTML let's refresh now yes now we have two Factor
17:26
authentication QR code I will keep this in div so that this disable button will
17:31
come in the next row so what I will do I will remove this FL Center from here
17:38
okay let me refresh now and here we will have to give some space from Top I will
17:44
wrap this QR code in a div so I will add class as as margin bottom of six because
17:51
this is tail CSS let's refresh now this is fine now now we will have to scan
17:57
this QR code in the authentic Ator app so you can use any authenticator app that is Google or Microsoft so I will
18:04
use Microsoft authenticator in the authenticator app I will scan this QR
18:09
code yes the QR code is scanned now and if I will log out this application and
18:16
now if will try to login so I will add my email
18:21
address password is 1 2 3 4 5 6 7 8 if I will click on login here it said Factor
18:29
challenge view response is not instantiable because while loging this
18:34
checked if the two Factor authentication is enabled then instead of dashboard page this redirected to the two Factor
18:41
challenge route if we will come to the route list if we'll check we have a two
18:46
Factor challenge routes here so we'll have to add this blade file in order to render that two Factor challenge view
18:54
okay so let's come to the code editor so inside resources views o I will create
19:00
one blade file as two Factor challenge. blade.
19:07
PHP okay and we will have to render this view in the fortify service provider
19:12
again I will come to the fortify service provider and here we will have to render
19:17
that two Factor challenge view okay let's add this
19:24
45 two Factor challenge view inside this we will render that blade file so I will
19:31
render Au do two Factor Challenge and here we will have to design this form
19:38
currectly if we refresh this rendered this blank blade file we will have to design this to factor challenge form
19:45
here so what I will do I will come to this confirm password blade I will copy
19:50
this form from here and I will add it inside two Factor challenge okay let me
19:56
dock this here we have the subtitle so I will change this
20:02
to two Factor Challenge and here we have the form action so we will have to
20:08
provide the form action of this two Factor challenge we have the two Factor Challenge and this route is provided by
20:15
Lal 45 okay so let's add this and this will be two factor.
20:22
login okay and here I will customize this label and input field from here we
20:29
will capture the recovery code so let's change this to code this is text input
20:37
ID I will change this to code Type will be text name will be code and in the
20:43
autoc complete I will change this to onetime code okay I will add one more
20:49
attribute as input mode and this will be numeric this is fine I will add margin
20:57
here from from Mt 4 and uh regarding this errors get password I will change
21:05
this to code here this is fine and I will change this button text as login
21:13
this is fine let's come to the browser let's refresh now yes we have the two
21:19
Factor challenge here we will have to provide the recovery code so I will
21:24
change this description as meaningful let's customize this please
21:31
confirm access to your account by entering
21:36
the authentication code provided
21:42
by authenticator app okay this is fine let's refresh now yes now here if we'll
21:51
try to click on login without providing that authentication code this triggered the validation error message as Prov Ed
21:58
two Factor authentication code was invalid now I will provide that correct code from the authenticator app so I
22:05
will add 78206 now if I will try to click on
22:11
login yes we can see have successfully logged in by entering that
22:17
authentication code if I will log out now again if I will try to click on
22:29
again it redirected to two Factor authentication okay every time when you
22:34
will try to log in this will ask for that authentication code now let me provide another authentication code if I
22:41
will click on login yes I'm logged in now if you will come to the
22:47
profile if you will disable this two Factor authentication let's confirm the
22:54
password and let's disable this yes two Factor Authentication is disabled
23:00
now if we log out and if we try to click on
23:08
login it didn't ask for that authentication code and here I'm redirected to the dashboard page okay
23:16
now let's come to the profile settings again and let me enable the two Factor authentication
23:23
again yes I enabled now now in some cases if you don't have the phone
23:31
access and you have enabled the two Factor authentication then every time when you will try to login this will ask
23:38
for that authentication code all right and if you don't have your phone access
23:43
then you will not be allowed to log to the application but don't worry larl provides another feature that is
23:50
recovery code in this case if you are not allowed to access your phone then
23:55
you will be able to login through that recovery code let's Implement that recovery code
24:00
functionality as well so if we'll come to the code editor inside two Factor authentication blade when we dumped and
24:08
die user records then we saw two Factor recovery
24:15
codes inside this we can see we have two Factor recovery codes okay so we will
24:21
have to display this two Factor recovery codes and for this larel 45 provides one
24:27
function if you scroll down here we have the recovery codes okay so let's call
24:34
this function recovery codes if we'll
24:41
refresh we have the recovery codes here I will convert this to
24:47
array and I will iterate these recovery codes in order to display it
24:55
here and here I will display that recovery code for each recovery codes as
25:02
dollar recovery code and here I will display that recovery code better I can
25:08
add it in a paragraph tag so I will copy this and I will add it
25:15
here okay this is fine come to the browser let's refresh now if will come
25:21
down here we have the recovery codes so let me add one title here so better I
25:27
can copy this and here I will add it and I will change this
25:34
to recovery codes okay let's refresh now
25:39
yeah we have the recovery codes here and I will add it in a
25:45
div okay let's refresh now yeah we have the recovery codes now in order to implement this
25:52
recovery code functionality you will have to copy these entire recovery codes and we'll keep it safe somewhere in
25:59
editor so here I will paste these all recovery codes okay and I will log out
26:06
the application now when I will try to log
26:12
in here it asked for the authentication confirmation code so instead of this
26:17
authentication code here I want to use recovery code okay therefore I will add
26:24
one hyperlink here to change the form here so that when we will click on that
26:30
hyperlink that will help toling this form from the authenticator app to
26:36
recovery code form okay so inside this form let's add one hyperlink here so I
26:42
will come to the code editor in the two Factor authentication challenge here I will add one hyperlink so inside this I
26:51
will add one hyperlink so I will copy that from login blade in the login blade
26:57
we have one hyperlink here so I will copy this and I will add it inside this
27:02
div and I will change this to use recovery code okay and we will have to
27:10
change this hyperlink here so I want to navigate to the same route with one query string parameter so I will add the
27:17
same form action as two factor. login okay and here in the parameter I will
27:25
use recovery and I will set this to True okay this is fine let me refresh now
27:33
here we have the recovery code I will give some space between these so here I
27:38
will add flax Center class and inside this primary button I will add a class
27:45
as margin start of four let's refresh now yes now when I will click on this
27:51
use recovery code this appended one query string as recovery one so we will
27:56
have to capture this query string inside that fortify service provider function so I will come to the fortify service
28:02
provider here in the two Factor challenge view I will capture that request
28:08
parameter okay so I will Define one variable as recovery equals and I will
28:16
capture this from request recovery and by default I will
28:22
set this to false okay and here in The View I will pass in the form of
28:30
compact this is fine okay now we will have to capture this recovery here in
28:36
the two Factor authentication challenge so I will add
28:41
dump dollar recovery let's refresh now yes we are getting one that means this
28:48
is true and if I will remove this query string this is false so we will have to
28:53
add one condition based on this recovery value if it is true then we will display
28:59
another form here and in that form basically that will capture the recovery code from that input okay so let's
29:06
change this here I will add one condition this is for authentication code I will add condition as if not
29:14
dollar recovery then I will display this input field here else I will display
29:21
another input so I will simply copy this HTML and I will add it here and this
29:27
will be for recovery code and here I will change this label for as recovery code this is
29:35
for recovery code Type will be text name will be recovery _ code and this input
29:42
mode numeric is not required because this can accept string as well and I will set autofocus here as well this is
29:51
onetime code and while fetching the validation error message this will fetch from the recovery code this is fine now
29:59
regarding this hyperlink based on the recovery query string we will have to change this okay so I will add condition
30:08
if recovery is there then I will copy and paste this route here else if
30:14
recovery is not there means if it is authentication code then this will set the recovery to True okay same thing I
30:22
will have to add one condition here for this hyperlink label so I will use if not recovery
30:28
then this will display the text as use recovery code else
30:34
use authentication code all right this is fine let's save and come to the
30:41
browser Let me refresh now this is authenticator app if I will click on use
30:47
recovery code this changed this label to recovery code and here I will change
30:52
this description as well I will add condition if it is not recovery then
30:58
this will display this description message else I will copy and add same
31:05
message and I will modify this as please confirm access to your account by
31:10
entering the recovery code provided by two Factor authentication all right this is
31:18
fine let's save and come to the browser again let's refresh okay the message has
31:24
been changed now now if I will try to click on use authentication code code
31:29
yes this will accept authentication code and if I will click on use recovery code
31:35
this will accept the recovery code so we already tested the authentication code login now we will check through the
31:42
recovery code so we already copied and pasted the recovery codes from the application and we kept it here so now
31:49
let's copy one of the recovery code and come to the application and let's paste
31:55
it here now let's try to click on login yes we can see now we have logged in
32:02
through that recovery code as well all right if we'll come to the profile and if we scroll down here the recovery
32:09
codes have been changed now because previously we had different recovery codes but when we logged in successfully
32:16
using the recovery code those recovery codes have been reset now okay now in
32:22
the case if you want to regenerate these recovery codes larel 45 provides another
32:28
route so if we'll check out the route list we have a post route as user /2
32:34
Factor recovery codes and for this we will have to create a form and in that
32:39
form action we will have to add this post route so let's Implement that as
32:44
well and we will have to add it here inside this two Factor authentication blade okay so what I will do we have the
32:53
form closed here so I will just cut this form and uh I will keep it here inside
33:00
these buttons only all right also this div let me
33:08
format it yes now regarding the status I will copy this
33:15
div and I will keep it here and I will close this div here okay now before this
33:22
session status I will create one more form method will be post and action I
33:30
will set as URL user SL to
33:38
factor recovery codes all right and inside this form we will have to add
33:44
this csrf token and I will create one submit button so simply I will copy this
33:50
primary button here okay and I will change this button
33:55
text as regenerate recovery codes this is for
34:02
regenerating recovery codes this is fine let's come to the browser let's refresh
34:08
now if we scroll down we have another Button as regenerate recovery codes but
34:14
here I want to keep this button inside this recovery codes block so that this button will be visible only when we have
34:21
enabled the two Factor authentication so we'll have to keep it inside this condition so what I will do I will move
34:28
these submit buttons just above here so what I will do I will cut these QR and
34:35
Recovery codes from here okay and that I will keep it inside this another div
34:42
okay and also we'll have to add this condition if we have to factor authentication enable then I will add
34:49
this condition so that it will display the authentication code and Recovery codes also this form all right and I
34:57
will and that if block here this is fine so for regenerating recovery codes we
35:04
will have to check if that two Factor authentication is enabled let's come to the browser let's refresh now scroll
35:11
down we have the disable button at the top and thereafter we have the QR code
35:17
and here at the bottom we have the recovery codes okay here we can add margin so in the QR code I will add
35:25
margin top as four let's refresh yes this is correct now now if
35:33
we click on regenerate recovery codes this is asking for password confirmation
35:39
so I will add password I will confirm now when I will try to
35:46
regenerate the recovery codes and if you scroll down yes you can see the recovery
35:53
codes have been changed now every time when we'll click on regenerate this will change the entire recovery codes so by
36:00
using this way you can reset your recovery codes okay now if you'll click on
36:07
disable this is disabled now and now we are not able to see that recovery codes
36:13
and that QR code okay again if you will enable it yes we have the QR code
36:20
visible and we have the recovery codes as well let's copy these recovery codes again let's keep it safe here
36:29
okay let's come to the application let's log out now now if
36:35
will try to login let me enter email address and
36:42
password yes this redirected to the authentication code first now instead of authentication code I will use recovery
36:49
code here so I will click on recovery code and here we will have to add the recovery code so let's add any of the
36:56
recovery code this time I will add this last one let's copy and let's paste it here now let's
37:04
try to login yes we have logged in now and there you have it we have successfully
37:10
implemented two Factor authentication in our Lille 11 application using 45 with
37:16
this feature in place your app is now more secure and your users can have peace of mind knowing that their
37:23
accounts are protected by an extra layer of security remember security is crucial
37:28
for any application and adding features like two Factor authentication is an excellent way to safeguard user data
37:36
while maintaining a smooth login experience if you enjoyed this video and
37:42
this entire series make sure to give it a thumbs up and subscribe to the channel for more practical laral tutorials also
37:49
drop any questions if you have in the comment section and I will be happy to help you out so thanks for watching stay
37:57
secure keep coding and I will see you in the next tutorial until then Happy