Up next in 10
Laravel 11 Authentication Simplified with Fortify & Breeze - Part 4 | Email Verification
926 views
Nov 5, 2024
🚀 Laravel 11 Authentication Simplified with Fortify & Breeze - Part 4 | Email Verification 🚀 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.
View Video Transcript
0:00
hello developers welcome back to the
0:02
programming Fields I'm UMES Rana and
0:05
this is the fourth part of our laral
0:07
1145 authentication Series in the last
0:09
video we set up password updates and
0:12
forgot password functionality we also
0:14
configured email settings so that user
0:17
could receive password reset links
0:19
directly in their inbox and on the back
0:22
end we used larel fortify to manage the
0:25
logic and security for these acction
0:28
this makes it easier to handle password
0:31
Management in our application today we
0:33
are going to look at another important
0:35
feature that is email verification this
0:38
step is really useful because it ensures
0:41
that users verify their email addresses
0:44
before they can fully access the
0:46
application also this helps protect your
0:49
application and builds trust with users
0:52
we will go through how to set up email
0:54
verification using larel 45 from start
0:57
to finish and we'll make sure every
1:00
everything works smoothly so without
1:02
further delay let's jump right into the
1:04
Practical implementation so as of now if
1:07
I will try to login by any of the
1:09
registered email
1:10
address I have the registered email
1:13
address as admin atate test.com and
1:17
password is admin at 1 2 3 4 5 if I will
1:22
click on login yes it is logged in
1:25
successful and it redirected to the
1:27
dashboard page but after the successful
1:31
authentication it has not asked to
1:33
verify the registered email address if
1:35
it is not verified so this functionality
1:38
is needed when you are doing a fresh
1:40
sign up let's suppose I will register a
1:43
new account here so let's register one
1:45
more user from
1:48
here okay password I will set 1 2 3 4 5
1:52
6 7 8 1 2 3 4 5 6 7 8 if I will click on
1:57
register yes after successful register
2:00
rtion it logged in that account and it
2:02
redirected to the dashboard page but
2:05
here we have noticed it has not asked to
2:07
verify email address before logging to
2:10
that account all right so laral 45
2:14
provides one more feature and that we
2:16
will have to enable it inside fortify
2:18
configuration file so let's come to the
2:20
code editor under the config file we
2:23
have the 4tify and if you scroll down
2:27
and if you will come under the features
2:28
array
2:30
we have the email verification features
2:33
but before enabling this email
2:35
verification if we come to the terminal
2:38
and if we check the route
2:40
list here we can see we don't have any
2:43
email verification route enabled but as
2:46
soon as you enabled that
2:49
feature and if we'll check the route
2:51
list
2:52
again you can see this added these email
2:55
verification related routes all right
2:58
but this is not done yet
3:00
after enabling the email verification
3:02
feature you will have to enable the
3:04
notification feature for the users so in
3:07
the next step you will have to come
3:09
under the user model so we have the
3:12
models as user.php here you can see we
3:16
have an interface added as must verify
3:19
email and by default this is commented
3:21
so we will have to uncomment it all
3:23
right now in the next step we will have
3:26
to implement that interface so we will
3:28
write implement
3:30
must verify email all right this is done
3:34
now we will have to restrict the users
3:36
to access the dashboard or other related
3:39
Pages without verifying the email
3:41
address so if we come to the browser and
3:44
here we can see without email
3:46
verification I can access this dashboard
3:49
page I can access the profile I can
3:52
update this profile information from
3:54
here but we will have to restrict these
3:56
all actions without verifying the email
3:59
address and here you can see this is a
4:01
warning this added the email address is
4:04
unverified click here to resend the
4:07
verification email okay and if we'll
4:10
click on the dashboard page we are
4:12
easily able to access this dashboard
4:14
page so in order to restrict these
4:16
routes larl provides one middleware that
4:20
is verified email address all right and
4:23
in the Lille 11 that middleware is added
4:26
inside Lille Foundation itself so if if
4:29
you will come inside the boot St folder
4:32
we have the app.php
4:34
inside this we can see we don't have any
4:38
middle wees registered here by default
4:40
all the inbuilt middle Wares have been
4:42
moved inside larel Foundation itself and
4:45
if we'll create any custom middleware
4:47
then we will need to register that
4:49
middleware here so we will be using the
4:52
inbuilt middleware that is verified
4:54
email address all right so we will have
4:57
to apply that middleware in the route so
4:59
let come under the routes web.php here
5:03
we can see for the dashboard we have the
5:06
Au middleware applied only that means if
5:08
the user is not authenticated then the
5:11
user cannot access the dashboard route
5:13
let's check
5:15
this here I have logged out now and if I
5:19
will try to access the dashboard page it
5:22
redirected back to the login page okay
5:25
let me log to that account again
5:31
okay yes so the O middleware is working
5:34
here now similarly we will have to apply
5:37
one more middleware as
5:40
verified okay so when you apply the
5:43
verified email address this will check
5:45
if the current user email address is
5:48
verified before accessing that route
5:51
let's come to the browser let's refresh
5:53
now this dashboard route only now before
5:56
accessing the dashboard route this
5:58
redirected to the email/ verify route
6:01
and if we'll come to the terminal and if
6:04
we'll check here we have the email
6:06
verify route added by lar 45 okay now if
6:11
we will come to the browser here the
6:13
error is verify email view response is
6:16
not instantiable that means again we
6:19
will have to add one blade file or view
6:23
in order to verify the email address and
6:25
for this larel 45 provides another
6:28
function that will have to add it in
6:30
fortify service provider so let's come
6:33
to the fortify service provider
6:36
again so inside app we have the
6:39
providers and here we have the fortifi
6:41
service provider if we'll click on this
6:44
if we'll scroll down here we have added
6:47
this view so similar to this we will
6:50
have to add one more view here so I will
6:52
add email
6:56
verification view okay and we will have
6:59
to
7:00
add 4tify colon colon verify email view
7:05
all right so this is a function and
7:08
inside this again we will have to add
7:10
the anonymous function to return the
7:13
blade file so we will write return View
7:17
and we will have to check the available
7:19
view inside resources views
7:22
folder so if you will come under the
7:25
resources views inside the O folder we
7:28
can see we have the verify email blade
7:31
provided by laral Bridge package okay so
7:35
this is a view here we have a form
7:37
having post method and we have an action
7:40
as verification do send inside this form
7:44
we have a submit button to recent
7:46
verification email and also we have
7:49
another form to log out that current
7:51
authenticated user all right so let's
7:54
render this view here so I will add au.
7:58
verify email
8:00
okay this is fine let's save and come to
8:03
the browser let's refresh now now we can
8:06
see that view is rendered out inside
8:09
this view we have a recent verification
8:11
email button and we have the log out
8:13
option if you will click on recent
8:15
verification email this will trigger an
8:18
email to your registered email address
8:20
with a verification link all right but
8:23
you will have to make sure your email
8:25
function is working that means you have
8:27
configured the email credentials prop L
8:30
and if you'll click on the log out
8:31
option this will log out this current
8:33
session and you will be redirected back
8:36
to the login page so I have configured
8:38
the email credentials properly and I
8:41
already have the mail trap account so in
8:44
my case I have configured the email
8:47
credentials properly in theb file and
8:50
also I have a registered mail trap
8:52
account so if I will try to click on
8:54
recent verification email here you can
8:57
see the email verification link is
8:59
generating and this email is in
9:03
process so let's wait for a couple of
9:06
seconds yes here we can see we received
9:10
a success message as a new verification
9:13
link has been sent to the email address
9:15
you provided during registration okay so
9:19
the email is sent out now we will have
9:20
to check that email so I will come to
9:23
the mail trap
9:24
mailbox and if I will refresh the
9:27
mailbox here we can see
9:30
I have received an email here we have
9:32
the verify email address button also we
9:35
have the email verification Link in the
9:38
case if you are unable to click on this
9:40
verify email address or if it is not
9:42
working then you can simply copy this
9:45
verification link and you can open this
9:47
in the browser window so I will copy
9:49
this link from here and I will come to
9:52
that same window where the application
9:54
is
9:55
running now here in the new tab I will
9:58
just paste that verification link and if
10:01
I will hit enter here you can see the
10:04
email is verified now it won't ask to
10:07
verify the email address again because
10:09
that email is verified now if you will
10:11
click on the profile settings here that
10:14
notification has gone now it is not
10:16
asking to verify the email address
10:18
because the current email address is
10:20
verified okay now if you will change the
10:23
email address here then again this will
10:25
ask to verify that email address let's
10:28
test that so I I will change the email
10:30
address and if I will click on
10:34
save this is updating the profile and
10:37
you can see again it notified your email
10:40
address is unverified because the
10:43
previous email has been updated and now
10:46
in order to continue with this current
10:48
email address you will have to verify
10:50
this email address again okay now if you
10:53
will try to come to the dashboard route
10:55
again you can see we are not able to
10:58
access that dashboard route again it
11:00
redirected to the email verify route
11:02
here we have again the recent
11:04
verification email option all right now
11:07
before resending the verification email
11:10
I will come to the route web.php here we
11:13
can see I have applied the middleware
11:16
only on the dashboard route okay so
11:19
instead of dashboard only I will apply
11:21
these Au and verified middleware for all
11:24
the routes that we want to keep inside
11:27
authentication and verified middleware
11:29
so in the current scenario we need to
11:32
keep these profile routes inside the O
11:35
and verified middle wees so without
11:37
authentication and without verified
11:40
these two routes won't be accessible
11:42
directly so I will simply uncomment this
11:45
middleware o group all right and I will
11:48
remove this middleware from here and I
11:51
will keep inside this middleware
11:54
function just like this and we will have
11:56
to keep it in the form of array because
11:58
we have multiple middleware applied here
12:01
and I will keep this dashboard route
12:03
inside this middleware itself just like
12:07
this okay this is fine now so we have
12:10
kept all these routes inside Au and
12:12
verified middlewares now if will come to
12:15
the browser and if we'll refresh it and
12:18
instead of email verify if I will try to
12:21
access profile route then it won't allow
12:25
you to access that again it redirected
12:27
back to the email verification
12:29
now let's try to access the dashboard
12:32
route the redirection is same if we'll
12:35
go to the homepage here we have the
12:38
dashboard link only and from here if
12:40
you'll try to click on the dashboard
12:42
again you will be redirected to the
12:44
email verification first okay if you
12:46
will try to log out and again if you
12:49
will try to log to that account so this
12:51
time I will have to log in through the
12:53
updated email address because we have
12:55
updated that email so I will add
13:02
okay and if we'll click on login I have
13:05
logged in but again due to unverified
13:07
email address again it prevented to
13:09
redirect to the dashboard page so anyhow
13:12
we will have to verify the email address
13:14
before accessing the application routes
13:16
so let's click on recent verification
13:18
email again this will process the email
13:21
so let's
13:23
wait yes a new verification link has
13:26
been sent again so let's come to that
13:28
mailbox again if I will refresh this
13:31
mailbox again here we have the two
13:33
verification emails this verification
13:36
email was sent almost 6 minutes ago when
13:39
we updated that email address and this
13:42
is the newly one when we requested to
13:44
verify the email address so again if we
13:47
copy this link and if I will come to
13:49
that same browser window and in the new
13:52
tab let me paste it if I will hit enter
13:55
yes that email is verified again and if
13:58
we come back back to the previous tab
14:00
and if you'll refresh it now it
14:02
redirected to the dashboard page because
14:04
that email is verified now if you'll
14:06
check the profile settings again we
14:08
don't have any notification to verify
14:10
the email because that is already
14:12
verified all right and that's the appap
14:14
developers you have just labeled up your
14:17
larl skills by adding email verification
14:19
to your app using larl 45 this feature
14:23
not only protects your app but also
14:25
gives user that extra layer of trust
14:28
when they sign up if you enjoyed this
14:30
video show some love by Smashing that
14:32
like button it really helps the channel
14:35
grow also if you have not already
14:37
subscribed hit that subscribe button and
14:40
turn on notifications so you can be the
14:43
first to catch the next part of this
14:45
Lille 1145 authentication series if you
14:48
got any thoughts or if you have any
14:50
questions or even suggestions for the
14:53
future videos please don't forget to
14:55
drop them in the comment section I'm
14:57
always reading them and would love to
14:59
hear from you in the next video we will
15:02
be diving into two Factor authentication
15:04
so get ready for even more security
15:06
upgrades to your application until then
15:09
keep building awesome stuff once again
15:12
thanks for watching and I will see you
15:14
in the next episode till then stay
15:16
curious and stay coding
15:19
[Music]