Up next in 10
Laravel 11 Authentication Simplified with Fortify & Breeze - Part 3 | Forgot Password
323 views
Nov 5, 2024
🚀 Laravel 11 Authentication Simplified with Fortify & Breeze - Part 3 | Forgot Password 🚀 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. 💡 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.
View Video Transcript
0:00
hey developers welcome back to the
0:02
programming Fields I'm UMES Rana and
0:04
this is the third part of our Lille 11
0:07
fortify authentication Series so far we
0:09
have successfully implemented user
0:12
registration login and profile edit
0:15
update functionality using larl 45 for
0:18
the front end views we are leveraging
0:21
larl bridge authentication scaffolding
0:24
which provides pre-built views to handle
0:26
all the user interface aspects of
0:28
Authentication on the back end we are
0:31
using fortify to manage the logic and
0:33
security of these actions so if I will
0:36
come to the login page and if I will try
0:38
to login through one of the registered
0:44
user we have successfully logged in and
0:47
redirected to the dashboard page here in
0:49
the profile option we have the profile
0:52
settings if we'll click on this we are
0:55
able to manage this profile information
0:57
we can update it here
1:00
and this entire backend logic is working
1:02
through the larl 45 and for the front
1:05
end we have used the lar Bridge package
1:09
now in the today's video we are going to
1:11
dive into two more important features
1:13
the first one will be password update so
1:16
we will integrate that password update
1:18
functionality here in this profile
1:19
settings itself since larel Bridge
1:22
conveniently includes a section to
1:25
manage the password within the profile
1:26
settings next we will implement the
1:29
reset password password functionality so
1:31
if I will log out and if I will click on
1:34
the login page we don't have the for
1:36
good password option here so this will
1:39
allow users to reset their password if
1:41
they forget it we will work through the
1:43
entire process a step by step and we'll
1:46
make sure everything works smoothly so
1:49
without further delay let's jump
1:51
straight into the Practical
1:53
implementation so firstly we will start
1:55
with the password update functionality
1:57
and for that firstly I will log to the
1:59
registered account so I will again login
2:03
through this
2:05
account and under the profile settings
2:08
we have the profile option only so let's
2:10
come to the vs code
2:12
editor here inside this resources views
2:16
we have the profile folder inside this
2:19
profile we have the edit. blade. PHP
2:23
inside this profile edit blade we have
2:25
included this partial blade to update
2:28
the profile information
2:30
now we will have to include the update
2:33
password form so simply I will uncomment
2:38
this okay so this will include the
2:40
update password form and this password
2:43
form is provided by larel bridge and
2:46
this is inside profile passs we have the
2:49
update password form all right so
2:52
through this form we will be updating
2:54
the password here inside this form the
2:56
action is password. update and this
2:59
route is provided by larl Bridge package
3:02
but again we are not going to use larl
3:04
bridge for managing this password update
3:07
thing we will be handling it through the
3:09
laril 4tify only so if we'll come to the
3:11
terminal and if we'll check the route
3:14
list we don't have the password update
3:16
Route here okay so firstly we will have
3:19
to enable that feature in configuration
3:22
of Lille 45 so let's come to the code
3:24
editor again under the config folder we
3:27
have the 4y. PHP here we have the update
3:31
password functionality so simply enable
3:33
this let's come to the terminal again
3:36
let's recheck this route
3:38
list now we can see we have the user
3:41
password update Route added by Lille 45
3:45
and this is expecting put method so in
3:48
the password update form we will have to
3:50
add this form action as user password.
3:53
update so let's add it inside the update
3:56
password form we have the password.
3:58
update Route defined here now instead of
4:01
password. update according to larel 45
4:04
we will have to update this to user
4:06
password. update so let's change this so
4:10
I will add user password. update this is
4:14
done and the form method is already
4:16
defined as a put method so this is fine
4:19
let's come to the browser let's refresh
4:22
now we can see we have the update
4:25
password section enabled here if we'll
4:28
try to submit this
4:30
form this triggered the password fill
4:32
validation here now let me try to update
4:35
the password from here so here we will
4:37
have to add the current password so the
4:39
current password is 1 2 3 4 5 6 7 8 now
4:42
in the new password I will add admin at
4:45
theate 1 2 3 now we'll have to confirm
4:47
the same password so first time I'm not
4:50
confirming the password I'm going to add
4:53
some different password here and if I
4:55
will try to
4:57
submit this thrown error as the password
5:00
filled confirmation does not match all
5:03
right so the validations are working
5:05
properly using Lille 45 before updating
5:08
the password if will come to the laral
5:10
4tify service
5:12
provider inside app providers we have
5:16
the fortify service provider here we can
5:18
see we have the update user password
5:21
action registered in this boot method so
5:24
let's check out this action we have the
5:26
accents folder inside app here we have
5:29
the update user password inside this we
5:32
have the update function so if you will
5:34
take a look to the route here we can see
5:37
this is triggering this password
5:39
controller update function so laravel 45
5:42
triggers the update function through
5:44
this action here so in this action
5:47
update function we have the validation
5:49
for the current password new password
5:51
and the confirm password after the
5:53
successful validation this will change
5:55
that password here if any error is there
5:58
then that will be captured here in the
6:00
validation bag as update password so if
6:03
we'll come to the update password form
6:05
again and if we'll scroll down while
6:08
capturing the validation error messages
6:10
this is captured through the validation
6:12
error bag as update password and in the
6:15
45 action we have the same validation
6:18
error bag as update password so due to
6:20
the same validation error key we are
6:23
able to see the validation error
6:24
messages here in the form now let's come
6:26
to the browser again now let's try to
6:28
update the passw password so firstly I
6:30
will enter the current password that is
6:32
1 2 3 4 5 6 7 8 now I will add the new
6:36
password so I want to set the new
6:38
password as admin at theate 1 123 next
6:42
this time I will confirm the new
6:44
password so I will add admin atate 123
6:48
now if I will click on Save we can see
6:51
we don't have any validation error
6:53
message that means password has been
6:55
changed but again here we could not see
6:57
that success message after the
6:59
successful updation of the password so
7:01
for this we will have to display that
7:03
session status first so let's come to
7:06
the update password form again if we
7:09
scroll down here we can see the
7:12
condition is added as if session status
7:15
is password updated then this will
7:17
display that success message here here
7:20
we will have to increase the time out
7:22
because after displaying the success
7:24
message that was going away within 2
7:27
seconds so I will add 3 seconds here
7:29
here this is fine now if Will
7:32
refresh again if I will change the
7:34
password as 1 2 3 4 5 6 7 8 and the new
7:39
password I want to set as 1 2 3 4 5 6 7
7:42
8 9 I will confirm
7:45
that if I will click on Save yes the
7:48
password is updated and we can see we
7:51
have the success message here so we have
7:53
successfully added the update password
7:55
functionality here now in the profile
7:57
settings lar will brige provides one
7:59
more functionality as profile delete so
8:02
from there we can delete the current
8:04
account so let's enable that
8:06
functionality that is not related with
8:08
laral 45 but I will enable that because
8:11
here this will come inside this so I
8:14
will uncomment this feature and if will
8:16
come here inside this delete user
8:18
form here we can see we have the form
8:21
action as profile. destroy and the form
8:25
method is delete by clicking on that
8:28
delete button the this will ask for the
8:30
confirmation are you sure you want to
8:32
delete the account and if you'll confirm
8:34
so you will have to add the current
8:36
password in order to delete that account
8:39
all right and thereafter this will
8:41
dispatch the current action so firstly
8:44
we will have to check this route in the
8:46
route list related to profile. destroy
8:49
if I will come to the terminal here we
8:51
don't have the profile. destroy route so
8:54
that we will have to add it manually so
8:56
let's come to the web.php
9:01
here we have the profile. destroy route
9:03
provided by Lille Bridge so I will
9:05
enable this now we have the profile.
9:09
destroy route here okay this profile
9:12
update Route is not needed now because
9:14
we have implemented that using larable
9:16
45 all right let me clean this also this
9:21
auth.php route file is not needed now so
9:24
we can remove this this is fine now
9:27
let's come to the terminal again if I
9:29
will refresh the route list we have the
9:31
delete route added as profile. destroy
9:34
so this will fulfill the functionality
9:36
to delete the account in the profile
9:39
settings so let's come to the browser
9:41
now let me refresh this page we have the
9:44
delete account functionality added here
9:46
if I will try to delete this
9:48
account this ask for the confirmation as
9:52
are you sure you want to delete and in
9:54
order to delete this account firstly we
9:56
will have to give our confirmation by
9:58
entering the current password so if I
10:00
will add password as 1 2 3 4 5 6 7 8 9
10:04
and if I will click on delete account we
10:07
can see that account has been deleted
10:09
and that redirected me to the homepage
10:12
because that account does not exist now
10:14
now if will try to login through that
10:16
account
10:20
again if you click on login we can see
10:24
this said these credentials do not match
10:26
our records next we will be working on
10:28
the reset password functionality So
10:31
currently in the login page we can see
10:33
we don't have the reset password option
10:35
here so let's enable this feature in the
10:37
4tify
10:39
configuration so I will enable this
10:41
reset password functionality now if I
10:43
will come to the browser again if I will
10:45
refresh we can see we have the forget
10:48
password option here now if I will try
10:50
to click on this forget password this
10:52
thrown error as that reset password view
10:55
does not exist so we will have to render
10:57
that View using larl 45 function itself
11:00
unlike register and login we already
11:02
added that functionality to render the
11:05
register and login view here so let's
11:07
come to the code editor so if we'll
11:10
search for Fortify service provider
11:12
inside app providers we have the fortify
11:15
service provider and if you scroll down
11:18
we have the register and login view
11:21
added here so similar to this we will
11:23
have to add it for reset password view
11:26
after
11:27
this for
11:30
password view here we will add 45 colon
11:34
colon request password reset link inside
11:38
this we will have to add the anonymous
11:39
function and we will have to render The
11:42
View here so before rendering The View
11:45
let's come to the
11:47
resources views folder we have the Au
11:51
folder here this is provided by Lal
11:53
Bridge inside this o folder we have the
11:56
for good password blade so if we'll
11:58
click on this we have a form and inside
12:01
this we have a input fi as email address
12:05
and we have a submit button to generate
12:07
the password reset link and this form
12:10
action is password. email and this is
12:13
expecting the post method for this route
12:15
so if I will come to the terminal and if
12:18
Will refresh this route list because we
12:20
already enabled that password reset
12:22
functionality in the 4tify configuration
12:25
now we can see we have two more routes
12:28
added by L level 45 in order to manage
12:31
the password reset functionality all
12:33
right so let's come to the code editor
12:35
again inside this 4tify service provider
12:38
let's render that for good password view
12:40
here so I will add return view au.
12:44
forgot password let's come to the
12:47
browser again let's refresh now we can
12:49
see the forgot password view is rendered
12:52
successfully here we have the email
12:54
password reset link so we will have to
12:57
provide that email address for which we
12:59
want to reset the password so let me
13:01
check the other registered users in the
13:03
database so I will come to the database
13:08
site and inside this users table we have
13:12
two users registered here admin at
13:14
theate test.com all right so we will try
13:17
to reset the password for this
13:19
registered user
13:22
okay so basically in this forgot
13:25
password functionality this will send an
13:27
email link to up upate your password so
13:30
basically in this forgot your password
13:32
functionality when you will enter your
13:35
email address and if we click on email
13:37
password reset link this will send a
13:39
password Reet link on that email address
13:42
and through that you will be able to
13:45
reset your password so here we will need
13:48
email functionality to be enabled and
13:50
for that only we will have to configure
13:53
the email credentials in theb file rest
13:56
lar 45 will manage the email function
13:59
so if we'll come to theb
14:03
file we'll scroll
14:05
down here we have the mail configuration
14:10
and this is the default one so in order
14:12
to send the email we will have to
14:14
provide the credentials here all right
14:17
so I already have one mail trap account
14:19
I will add the credentials from there so
14:22
if I will come to the mail trap account
14:25
here I have the mail trap integration I
14:27
will copy this SMTP host here and inside
14:31
this mail host we will have to add that
14:33
credential this is sandbox. SMTP mail
14:36
trap and in the mail mailer I will have
14:39
to add as SMTP now let's add the port so
14:42
we can add any of the port as 25 465 587
14:47
or 2525 so by default we have the 2525
14:50
this is fine we will have to add the
14:52
male username so let me add this we'll
14:55
have to add the password I will add the
14:58
password Here now regarding the mail
15:00
encryption I will add TLS and we will
15:03
have to add the mail from address so I
15:06
will add mail from address here let's
15:08
suppose M
15:11
theate programming fields.com okay this
15:14
is done so after this example I will
15:17
reset this credentials from here so
15:19
please don't try to use that now let's
15:21
come to the application again let's
15:24
refresh it once I will enter that email
15:26
address for which I want to reset the
15:29
password so if we'll come to the
15:30
database again for that
15:32
user we have the email address as admin
15:36
test.com so let's add that admin at
15:40
theate
15:41
test.com if I will click on email
15:44
password reset link we can see this is
15:46
processing the email let's wait for the
15:49
couple of seconds yes we got the success
15:53
response as we have emailed your
15:55
password reset link all right now let's
15:57
check that mailbox
15:59
if I will refresh it here we can see we
16:02
received a password notification email
16:05
here if I will click on this here we can
16:07
see we have the email template body
16:10
provided by larel Bridge package we have
16:13
the reset password button and also we
16:15
have the reset password Link in case if
16:18
you will have any trouble while clicking
16:20
on this reset password simply you can
16:22
copy this link and you can open this in
16:24
the browser okay and here we have the
16:28
email from address and this is sent out
16:31
to this email address however this email
16:33
address is invalid but in the mail trap
16:36
you can see the delivered email messages
16:39
and this password reset link will be
16:40
expired in 60 minutes so if we'll click
16:43
on this reset password this will throw
16:46
error for the next blade view what I
16:49
will do I will simply copy this link
16:51
from here and I will come to that same
16:54
window where I have application running
16:57
and here I will pay past that reset
17:00
password link and if I will hit enter we
17:03
can see this thrown error as reset
17:05
password view response is not
17:07
instantiable so for resetting the
17:09
password again this is expecting a view
17:12
file in that we have to add the new
17:15
password so let's enable this view again
17:18
in the fortify service
17:20
provider so we will have to add reset
17:24
password view so I will add 45
17:29
reset password
17:31
view okay inside this again we will have
17:33
to call the anonymous function and we
17:36
will have to render The View so let's
17:39
check out the view again in the
17:40
resources views folder again we will
17:44
have to go inside o we have the reset
17:47
password bled inside this we have a form
17:51
and this section is password.
17:53
store and we have the email address we
17:57
have the password fill and we have the
17:59
confirm password fi so let's render this
18:02
view here I will add return
18:04
view Au do reset password this is done
18:09
let's come to the browser again let's
18:11
refresh this view now this said route
18:14
password. store not defined so if we'll
18:18
come to the reset password blade here we
18:21
will see the form route action is
18:23
password. store if we come to the
18:25
terminal and if we verify the routes we
18:28
we don't have any password. store Route
18:30
here instead larl 45 provides password.
18:35
update Route all right so we will have
18:38
to change this route here in the form
18:40
action as password. update okay and the
18:44
method will be post that is same now
18:46
let's come to the browser again let's
18:48
refresh it again now they said undefined
18:51
variable dollar request let's check this
18:54
here we can see we have an input type
18:57
hidden just for the token and this is
19:00
capturing the token from the request
19:02
route function so instead of dollar
19:05
request I will use this request function
19:09
because we will be capturing that token
19:11
from this URL request okay let's refresh
19:15
now again we will have to add it for
19:18
email address as well because in the
19:20
request URL we can see we are getting
19:23
that email address for that we want to
19:26
reset the password so we will have to
19:28
add it
19:30
here so we are getting this request
19:33
email so I will add request function
19:37
email this is for email address all
19:40
right this is fine let's come to the
19:43
browser again let's refresh yes we can
19:46
see that reset password view is rendered
19:49
successfully and we have that email
19:52
address for that we want to change the
19:54
password now here we will have to add
19:56
the new password so I will add password
19:59
as let's suppose admin at theate 1 2 3 4
20:02
5 I will confirm that password Here
20:05
admin at theate 1 2 3 4 5 here we will
20:09
have the form validation as well so if I
20:11
will add something
20:13
different this said password filled
20:15
confirmation does not match let's try
20:17
again by adding the correct password so
20:19
I will add admin at theate 1 2 3 4 5
20:22
admin atate 1 2 3 4 5 let's click on
20:26
reset password we can see we received
20:29
success message as your password has
20:31
been reset and we have successfully
20:33
landed on the login page now all right
20:37
now if you will come to that email
20:38
password reset link
20:40
again and if you'll copy it from
20:43
here and in the new tab if we try to
20:46
open that link and if we'll try to reset
20:49
the password again let's suppose I will
20:52
enter the new password
20:55
here and if I will click on reset
20:57
password now can see this thrown an
20:59
error as this password reset token is
21:02
invalid because this is onetime password
21:04
and every time while resetting the
21:06
password you will have to generate a new
21:08
token so that link is not valid now so
21:11
we have successfully changed the
21:13
password now let's try to login through
21:16
the updated password here so we have the
21:18
email as admin the test.com and we have
21:21
the password as admin atate 1 2 3 4 5
21:25
let's click on login yes we have log in
21:28
now and we have redirected to the
21:30
dashboard page again again we have the
21:32
profile option as profile from here we
21:35
can update the profile information we
21:38
can update the password and even we can
21:40
delete the account all right we have the
21:43
log out option here so that's it for
21:46
today's video I hope this guide on
21:48
implementing password updates and forgot
21:50
password functionality Lille fortify and
21:53
Bridge was helpful we have now covered
21:56
the core authentication features in
21:58
Lille 11 from registration and log to
22:01
profile management and today we have
22:03
added the crucial password management
22:05
features as well with these
22:07
implementations your larel app is well
22:10
on its way to being secure and user
22:13
friendly if you found this video helpful
22:15
please don't forget to like share and
22:18
subscribe to the channel your support
22:20
helps us grow and keeps us motivated to
22:23
bring more tutorials you away however if
22:26
you have any questions then drop them in
22:29
the comments below and I will be sure to
22:31
help you out so stay tuned for next
22:33
video where we will cover more advanced
22:36
topics to take your larel
22:37
authentications to the next level so
22:40
thanks again for watching and I will see
22:42
you in the next one until then Happy
22:45
coding
22:46
[Music]