Laravel 11 Authentication Simplified with Fortify & Breeze - Part 5 | Two Factor Authentication
Nov 5, 2024
π Laravel 11 Authentication Simplified with Fortify & Breeze - Part 5 | Two Factory Authentication π
Welcome to the first installment of our comprehensive series on Laravel 11 authentication! In this in-depth tutorial, we will explore the essentials of setting up user registration with Fortify and Breeze, the powerful tools that make authentication in Laravel both robust and straightforward.
π In This Video, You Will Learn:
β
Introduction to Fortify & Breeze: Get an overview of what these packages are and why they are the go-to solutions for authentication in Laravel 11.
β
Step-by-Step Setup: Follow along as we configure Laravel Fortify for handling authentication logic and Breeze for creating a beautiful and functional user interface.
β
User Registration Flow: Learn how to implement user registration from scratch, including setting up registration routes, creating the registration form, and handling user input securely.
β
User Login Flow: Learn how to implement user login from scratch, including setting up login routes, creating the login form, and handling user input securely.
β
User Profile Edit and Update Flow: Learn how to implement authenticated user profile edit and update functionality from scratch, including setting up routes, creating the form, and handling user input securely.
β
Password Update and Forgot Password Flow: Learn how to implement password update and reset password functionality for the user from scratch, including setting up routes, creating the form, and handling user input securely.
β
Email Verification: Learn how to implement email verification while login. Before verified, it won't allow user to access the dashboard and other authenticated routes.
β
Two Factor Authentication: Learn how to implement 2FA with Recovery Codes.
π‘ Why This Series? This series is designed for both beginners and experienced developers who want to streamline their authentication process in Laravel. Weβll cover everything from the basics to advanced configurations, ensuring you have all the knowledge you need to build secure and efficient applications.
π Resources:
Fortify Documentation: https://laravel.com/docs/11.x/fortify
Breeze Documentation: https://laravel.com/docs/11.x/starter-kits
Github Code Repository: https://github.com/UmeshKrRana/laravel-fortify-auth-app
Our Official Blog: https://programmingfields.com
β More Tutorials From Programming Fields
π Livewire 3 Playlist: https://www.youtube.com/playlist?list=PLei32-mZRyeUv0ItgRT0cFnvoqKsGSrCe
π Laravel 11 Multi Auth Guard Series: https://www.youtube.com/playlist?list=PLei32-mZRyeXaBme-ZsvIptnC7EMPnK9_
π Hands-On Laravel Examples:
https://www.youtube.com/playlist?list=PLei32-mZRyeUc0jDscfJEFC5_X0bcuGVj
π Laravel Breeze Authentication Tutorial:
https://www.youtube.com/watch?v=UwSmNzdLxS0
π Laravel RESTful APIs:
https://www.youtube.com/playlist?list=PLei32-mZRyeU-KGx-0vAb7zMwRSd7mRqX
π Sending Emails with Laravel 10 via Gmail Step by Step Guide:
https://www.youtube.com/watch?v=H5ipv4vu0to
π If you find this video helpful, please like, comment, and subscribe to our channel for more tutorials and updates. Hit the notification bell to be the first to know when new content is available!
@programmingfields
π Connect with Us:
Facebook: https://facebook.com/@UCsCAhWLi5XNDhVQDz8zVwnQ
Instagram: https://instagram.com/programmingfields
Letβs get started on making your Laravel 11 authentication setup as smooth and secure as possible!
Two Factor Authentication
2FA in Laravel
Recovery Codes in Laravel
Fortify Auth
Fortify Authentication in Laravel
Laravel 11 tutorial
Laravel 11 authentication
Laravel 11 user registration
Laravel 11 user login
Laravel 11 user profile update
Laravel 11 Fortify tutorial
Laravel 11 Breeze tutorial
Laravel 11 Fortify and Breeze
Laravel 11 step-by-step guide
Laravel 11 for beginners
Laravel 11 auth setup
Laravel Fortify setup
Laravel Breeze tutorial
Laravel Fortify user registration
Laravel Fortify Password Reset
Laravel Fortify Verify Email
Fortify Laravel 11
Breeze Laravel 11
Laravel authentication package
How to use Laravel Fortify
How to set up authentication in Laravel
Laravel 11 registration form
Laravel 11 authentication example
Laravel 11 Fortify features
Laravel Fortify vs Breeze
Laravel authentication without Jetstream
Laravel 11 Fortify login
Laravel 11 email verification
How to add authentication to Laravel
Fortify Reset Password
Fortify Update Password
Laravel 11 authentication full guide
Easy Laravel 11 authentication setup
Laravel Fortify
Laravel Breeze
Laravel authentication
Fortify Email Verification
#laravel11 #fortify #breeze #programmingfields #umeshrana #authentication #userregistration #laraveltutorial #webdevelopment #coding
Show More Show Less View Video Transcript
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:22
login
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
38:02
coding [Music]
Science
