Up next in 10
Laravel 11 Authentication Simplified with Fortify & Breeze - Part 2 | Login and Profile Update
Nov 5, 2024
🚀 Laravel 11 Authentication Simplified with Fortify & Breeze - Part 2 | User Login and Profile Update 🚀
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.
✅ Code Walkthrough: Watch as we break down each piece of code, explaining how it fits into the larger authentication system and why it’s necessary.
✅ Troubleshooting Tips: Discover common issues that may arise during setup and how to resolve them effectively.
Show More Show Less View Video Transcript
0:00
hello developers welcome again to the
0:02
programming Fields I'm UMES Rana and
0:04
this is second part of the Lille 1145
0:07
authentication Series in the last video
0:10
we explored the fundamentals of larel
0:13
45 and its features then we did the
0:17
larel project setup along with the 45
0:19
with Bridge package we used Bridge
0:22
author scafolding for managing the front
0:24
end views this provided the user
0:27
interface for managing the
0:29
authentication thing
0:30
also we implemented the user
0:33
registration functionality using the
0:35
4tify backend logic and here for the
0:38
user registration I have used the
0:40
inbuilt form that is provided by Lille
0:43
Bridge package after the successful
0:45
registration this will be redirected to
0:47
the dashboard route so let's try to
0:50
register a new user from here so I will
0:54
create
0:56
okay I have entered the password
1:00
and if I will click on
1:01
register yes the user has been
1:04
registered and it redirected to the
1:06
dashboard page now if I will log out
1:08
from here then we are redirected to the
1:11
homepage here we have the login option
1:14
now in the today's video we will
1:16
implement the user login along with the
1:18
profile edit and update functionality So
1:21
currently if you will try to click on
1:23
this login option here it thrown the
1:26
error as login view is not found so
1:29
let's continue to the implementation of
1:31
this login functionality so before
1:33
implementing the login functionality
1:35
let's come to the terminal and we will
1:37
see the route list so here we will type
1:40
PHP artion route colon list and here we
1:45
have the bunch of routes provided by
1:47
larl 45 so we can see we have the login
1:50
route as gate and post both methods when
1:54
we clicked on the login option this
1:56
triggered this login route of this get
1:59
method and here this is expecting one
2:02
view or blade file through that we will
2:05
be able to login and for this Lille 45
2:09
provides inbuilt function and by using
2:11
that function we will be able to display
2:14
the login view so let's come to the
2:16
official documentation of laral 4tify
2:19
again and here under this authentication
2:23
section we have a function to return the
2:26
login view response so we will have to
2:29
add this in the fortify service
2:31
provider. PHP so let's add it so inside
2:35
this app providers we have the 4tify
2:38
service provider and here we already
2:41
added this register view similarly we
2:44
will have to add the login view here so
2:48
we will write
2:50
fortify
2:52
login view function inside this function
2:55
we will have to add this Anonymous
2:58
function and and here inside this
3:00
function we will have to return the
3:04
login view so inside this resources
3:08
views we have the O folder this is
3:11
provided by laril Bridge so here we have
3:14
the login. blade.
3:17
PHP all right so we will return this
3:20
login view here so we will write au.
3:25
login let's come to the browser
3:28
now let's ref press we have the login
3:31
view displaying here now if you will
3:33
check out this form
3:37
action we have the form action as route
3:40
login and this is the post method here
3:43
so if we'll check the route we already
3:45
saw we have the login route as a post
3:48
method and this will trigger the Lille
3:51
4tify authenticated session controller
3:54
so if we'll try to log in this this
3:57
triggered the HTML required rute so let
4:00
me remove this HTML required attribute
4:03
so that we will be able to see the
4:05
server side validation provided by LEL
4:08
45 so let's remove this required
4:14
field yes I have removed the required
4:17
attribute from here now let's come to
4:20
the browser again let's refresh it let's
4:23
try to click on login again yes this
4:26
triggered the required field validation
4:28
by larl 4
4:30
now we will be trying to login through
4:32
the registered email address so we have
4:34
created few users so I will try to login
4:38
here I will add the password and if I
4:41
will try to click on
4:43
login yes we can see we have
4:46
successfully logged in and we have
4:47
redirected to the dashboard page if you
4:50
will try to log in through the invalid
4:53
credential let's suppose I'm trying to
4:55
login through the invalid credential
4:58
here and this email address is is not
5:01
registered if I will try to login this
5:04
said credentials do not match now let's
5:08
login through the registered email
5:13
address let's click on login yes we have
5:16
logged in again so we have implemented
5:19
the login functionality now in the
5:21
profile option we can see we don't have
5:23
the profile edit option here because in
5:26
the previous video we disabled that
5:28
option so let's come to the navigation.
5:31
blade. PHP provided by laral bridge and
5:35
this will be inside this layouts
5:38
navigation. plate this is for mobile
5:41
view so let's enable this and also we
5:45
will have for this web view okay so we
5:49
have enabled this profile option but
5:51
here we can see the route added as
5:53
profile. addit if you'll come to the
5:57
browser if we'll refresh this will throw
6:00
error as profile. edit route not defined
6:03
because lar 4tify does not provide edit
6:06
route for this profile if we'll check
6:08
out this route list we don't have the
6:11
profile related routes here so in order
6:14
to work with the profile related
6:15
features we will have to enable that
6:18
feature in the configuration of 4tify so
6:21
let's come under the config
6:24
folder we have the 45. PHP if you scroll
6:28
down under the feature section we have
6:32
the update profile information so let's
6:35
uncomment this first now if will come to
6:37
the terminal again let's rerun this
6:40
route list command we have the user
6:42
profile information put route and this
6:46
is for updating profile information but
6:49
according to the browser error this said
6:51
profile. edit not defined and here in
6:54
the route list we cannot see that
6:57
profile. edit route so we will have to
6:59
create that route manually because Lille
7:02
4tify does not provide that profile.
7:05
edit route so let's create this profile.
7:07
edit route in order to render the
7:10
profile edit view so let's come to the
7:12
web.php file here we have the profile.
7:15
edit route provided by Lille Bridge so I
7:19
will simply enable this route and here
7:22
this will trigger from the profile
7:24
controller edit function so we already
7:27
have the profile controller provided by
7:29
larel bridge if you'll come under the
7:32
app HTTP controllers we had the profile
7:36
controller we had not deleted that
7:38
profile controller inside this profile
7:41
controller we have the edit update and
7:46
Destroy function okay so according to
7:49
this profile. edit route this will
7:52
trigger this edit
7:54
function and we already have the edit
7:56
function here and this is returning this
7:59
profile do edit view all right so here
8:02
in the web.php let's import this profile
8:05
controller first all right profile
8:08
controller has been imported here now
8:11
this will trigger the edit
8:13
function and inside this edit function
8:16
this will load this profile. edit View
8:19
and here inside this resources views we
8:23
have the profile folder inside this we
8:26
have the edit. blade file let's come to
8:29
the browser now let's
8:31
refresh that error has gone now now if
8:34
we try to click on this profile option
8:37
we have the profile link here let's
8:39
click on this profile
8:41
link now this said route verification.
8:45
send not defined because lar Bridge
8:48
authenticates the account before
8:50
redirecting to the profile page and in
8:52
the current case we don't have the
8:55
verification do send thing so I will
8:57
come to this letter and as of now now I
9:00
will simply Commit This profile option
9:02
inside the update profile information
9:05
blade so under the profile we have the
9:07
partials we have the update profile
9:10
information and inside this blade we can
9:13
see we have a form and that action is
9:17
verification do send and if you'll check
9:20
out the route we don't have the
9:22
verification do send route so as of now
9:25
I will commment this and I will come to
9:28
this functionality letter for the email
9:30
verification even this is not required
9:32
so we can remove this from here this is
9:35
done now let's refresh it
9:38
again now this said again profile.
9:41
update Route is not defined so larel 45
9:44
provides different route to update the
9:47
profile so let's check out the route
9:49
again we can see we have the put route
9:53
defined as user profile information so
9:56
in the form action we will have to
9:58
provide this user profile information.
10:01
update Route and this will trigger the
10:04
larel 45 profile information controller
10:07
and inside that there is an update
10:09
function let's change this form action
10:12
so we'll write user profile
10:17
information do update all right and here
10:20
we can see L Bridge uses this patch
10:23
method instead of put so according to
10:26
larel
10:27
45 we will have to change change this to
10:30
put method because route is expecting as
10:32
a put method so let's change this to put
10:35
method this is done let's come to the
10:38
browser now let's refresh it again now
10:42
we have the another error as password.
10:45
update not defined so in the larel
10:48
bridge under the profile section there
10:51
are total three subsection the first
10:54
will be profile update the second is
10:56
password update and the last one is the
10:58
profile delete option so as of now we
11:01
have enabled the profile update
11:03
functionality only so I will simply
11:06
comment this password option and I will
11:08
enable this later so if we come to the
11:11
edit. blade again we have the update
11:14
password and profile delete option so as
11:18
of now I will commit these two sections
11:21
and in the edit blade only profile edit
11:24
option is enabled now let's come to the
11:28
browser let's refresh we can see the
11:31
profile option is enabled here and this
11:34
profile information is prepopulated here
11:37
okay if you'll try to update this
11:40
profile let's click on Save yes the
11:43
profile is updated and we can see this
11:46
populated the updated name also that
11:49
name is reflected here after the
11:51
updation but after the profile updation
11:55
we could not see any success message
11:56
here also if I will keep this name empty
12:00
and if I will try to save this triggered
12:02
the HTML required validation so that I
12:05
want to remove and I want to see this
12:07
server side validation here so let's
12:09
come to this profile edit
12:12
blade and inside this update profile
12:14
information form let me dock this we
12:18
have the required attribute so I will
12:21
remove this required attribute from here
12:23
now we don't have any required field
12:25
here now let's come to the browser again
12:29
let's refresh now let's try to remove
12:32
this name and if we'll try to
12:35
submit we can see this triggered the
12:38
validation error but here we are not
12:40
able to see that error message okay so
12:44
let's check this profile update action
12:46
in the 45 service
12:49
provider so if you scroll up we have the
12:53
update user profile information using
12:56
and this is registering this action as
12:58
update user profile information now if
13:01
will come under the app action we have
13:05
the update user profile information
13:07
inside
13:09
this we have the update function here we
13:12
have the validation rules defined for
13:14
the name and email and after the
13:17
validation this will keep the validation
13:20
error thing inside this bag that is
13:23
update profile information okay so if we
13:26
come to the profile edit again
13:30
and here let's add dump dollar errors
13:35
let's come to the browser let's refresh
13:38
now and currently this bag is mty ARR
13:42
now if we try to remove this name and if
13:45
we try to submit we can see in the bags
13:48
we have the one array and inside this
13:51
array we have the update profile
13:53
information and under that we have the
13:56
messages for this name as name fi is
14:00
required all right so we will have to
14:02
capture this error here in the update
14:05
profile blade so what I will do while
14:09
getting the errors I will capture that
14:12
error from this bag so I will add errors
14:16
implies update profile information and
14:19
from there this will fetch the name
14:21
error message let's come to the browser
14:24
let's refresh let's try to remove this
14:27
name again and will submit now we are
14:30
able to see the required validation
14:32
message same thing we will have to add
14:34
it for email so let's copy this here
14:37
under the email option we will have to
14:40
add
14:41
it all right let's refresh now let's try
14:45
to remove the email and name as well and
14:48
if we try to submit this trigger the
14:51
name field is required email field is
14:53
required okay now we are getting the
14:56
validation error responses here but
14:58
after updating the profile still we are
15:00
not seeing that success message so let's
15:03
update this
15:05
first under the update user profile
15:08
information action we have the save
15:10
function added here so this will update
15:12
the profile information that is coming
15:14
through the form so larel Bridge handles
15:17
the success or error message through the
15:20
session after the successful updation so
15:23
that we will see here in the update
15:25
profile Information Form if we will
15:27
scroll down
15:30
we can see there is a condition added if
15:33
the session status is profile updated so
15:36
here if we add
15:38
dump
15:40
session status and if we come to the
15:43
browser if we refresh by default this is
15:46
empty now if we try to update something
15:50
and if you'll click on Save we can see
15:52
the profile is updated and this returned
15:55
the status key as profile information
15:58
updated so let's copy this and here
16:02
instead of this profile updated we will
16:05
have to change this to profile
16:07
information updated because that was
16:09
previously added by laril bridge now
16:12
according to the Lille 45 we will have
16:15
to change this
16:17
status this is done let's come to the
16:20
browser let's refresh now now let's try
16:23
to update
16:24
something let's click on Save yes we are
16:28
able to SA see the success message here
16:30
this is done so we have successfully
16:33
implemented the login functionality and
16:36
the profile edit and update
16:37
functionality so that's it for this
16:39
episode I hope this entire larel 45
16:42
series will be helpful to you if you
16:45
find helpful to this video please give
16:47
it a thumbs up and don't forget to
16:49
subscribe to programming fields for more
16:51
tutorials like this so thanks for
16:53
watching see you soon in the next video
16:55
Until Then happy coding
#Programming
#Software