Laravel 11 Authentication Simplified with Fortify & Breeze - Part 1 | User Registration
Nov 5, 2024
π Laravel 11 Authentication Simplified with Fortify & Breeze - Part 1 | User Registration π
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.
β
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.
π‘ 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.
π¨βπ» Whatβs Next? Stay tuned for the following parts of this series, where we will delve into additional authentication features like email verification, password resets, and user profile management. Each part builds on the previous, so donβt miss out on the complete journey!
Show More Show Less View Video Transcript
0:00
hello developers welcome back to the
0:02
programming Fields I'm UMES R in the
0:04
today's video we will dive into Lille
0:08
1145 this is a robust authentication
0:10
package whether you are a beginner or an
0:13
experienced developer this guide will
0:15
help you set up and customize fortify in
0:18
your larl applications but before moving
0:21
ahead let's quickly know about the larel
0:24
45 but before getting started if you
0:27
have not subscribed at to programming
0:28
Fields then please subscribe it and hit
0:31
the like button because this takes lots
0:33
of effort to prepare contents for you
0:36
all right so let's continue to what is
0:38
larel 4tify the fortify is an
0:41
authentication backend for larl this
0:44
provides all the routes and controllers
0:46
necessary for user authentication it
0:49
covers the features like user
0:51
registration login two Factor
0:54
authentication email verification
0:56
password reset profile update and many
0:59
other features
1:00
so you can think of it as a customizable
1:02
scaffolding for building secure
1:04
authentication systems unlike laral
1:07
Bridge or jet stream 45 focuses purely
1:10
on backend authentication logic and it
1:13
leaves the front end entirely up to you
1:15
so there won't be any front-end
1:17
involvement of laral 45 and that's why
1:20
it is called a front-end agnostic
1:23
package that means it will deliver the
1:25
backend logic only since 4tify is
1:27
headless that means it does not provide
1:29
any front end views out of the box
1:32
instead it is designed to handle
1:34
authentication via API or custom views
1:37
to implement the front end views 445
1:40
authentication features you can either
1:42
manually create views and forms using
1:45
blade or any other front end framework
1:47
or you can use any laral starter kits
1:50
just like Bridge or jet stream these
1:52
starter kits will quickly provide the
1:54
authos scap folding that provides the
1:57
front end views for registration login
2:00
password reset Etc hence you are free to
2:03
go with the custom fuse or any inbuilt
2:06
starter kit for the auor scaffolding for
2:08
the front end views only rest laral
2:11
4tify will manage the backend
2:13
authentication process behind the hood
2:15
so let's get started to implement the
2:18
authentication in the Lille 11 using
2:21
[Music]
2:27
45 first thing first let's start with
2:29
the larl
2:31
installation so I will type larl new and
2:35
I will give the application name let's
2:37
suppose 4y a app let's hit enter here it
2:42
prompted do you need any starter kit for
2:45
this laral project if you want to opt it
2:48
and you want to go with the custom views
2:51
then don't go with the any starter kit
2:53
but if you want to use any inbuilt
2:55
authentication views just like from
2:57
Lille Bridge or from jet stream then you
3:01
can choose any starter kit from here so
3:03
it totally depends on you if you want to
3:05
manage the authentication views that
3:08
means all the front end blade files
3:10
manually then you don't need to choose
3:12
any starter kit from here but if you
3:14
want to use the inbuilt authentication
3:17
blade files which are provided by laral
3:20
Bridge or Lille jet stream then you can
3:22
choose any of these starter kit so I
3:25
will choose laral bridge I will hit
3:28
enter here it asks asked which Bridge
3:30
stack would you like to install I will
3:32
choose the default Blade with
3:35
alpine next it asked would you like dark
3:38
mode support I will choose no and for
3:41
the testing framework I will go with the
3:43
past let's hit enter I don't want to
3:46
initialize the G repository so I will
3:49
say no now this started creating laral
3:52
fortify
3:57
app yes the application has been
4:00
installed now regarding the database it
4:03
is asking which database we want to use
4:06
I will choose SQ light let's hit enter
4:09
this said would you like to run the
4:10
default database migrations I will go
4:13
with the default
4:20
yes so it installed laral bridge and
4:24
here this installed lar will paste for
4:26
the testing
4:28
framework now it is installing node
4:30
modules for the frontend dependencies
4:33
yes so laral Bridge scaffolding has been
4:36
installed successfully and accordingly
4:38
it installed the front end dependencies
4:40
using node modules now in The Next Step
4:44
let's SE into the project folder so we
4:46
have the project folder as 4tify
4:51
AAP now I will open this in the vs code
4:56
editor okay project has been opened in
4:58
the vs code editor now let's click on
5:00
the composer. JSM file here we can see
5:04
we have the laral bridge package
5:06
installed now in the next step we will
5:09
start the
5:10
application so I will type PHP artion
5:14
serve yes project has been started on
5:17
8,000 Port now let's check out the
5:20
browser let's try to access the
5:24
project yes laral installation is
5:26
successful and our project is running
5:29
here now in the homepage we have the
5:31
login and register option provided by
5:33
laril bridge if we'll click on login we
5:37
are able to open this login page we have
5:40
the forget
5:42
password similarly we have the register
5:45
page all right so these all
5:48
authentications are currently managed
5:50
using the laral bridge package but here
5:53
I don't want to use the bridge Au
5:55
scaffolding for the backend
5:57
implementation only I need the print end
6:00
views that means only the blade
6:02
templates just like we need the login
6:05
form register form for good password
6:08
password reset and the profile things
6:10
and all the backend implementation for
6:13
these all authentication process will be
6:15
handled using the larl 45 package so in
6:18
this case we don't need these all routes
6:21
provided by larl bridge if I will come
6:24
to the
6:25
terminal and here if I will type PHP
6:29
artion route column list you will see
6:34
larel Bridge provided these all
6:36
authentication routes so firstly let's
6:38
comment these all routes so let's come
6:41
to the application inside the routes
6:43
folder we have the web.php and we can
6:46
see we have the Au route added here and
6:50
this Au route is coming from this laral
6:53
bridge so what I will do firstly I will
6:56
deregister this o. PHP route and and now
6:59
regarding these profile options let me
7:02
comment this also this
7:05
dashboard all right so now in the
7:07
web.php we don't have any registered
7:10
route apart from the Welcome blade let
7:13
me remove this profile controller as
7:15
well because lar 45 does not need any
7:18
controller to manage the authentication
7:20
process now let's come to the terminal
7:23
again let's rerun the command PHP artion
7:26
route list now you can see we have only
7:30
three routes by default this is for
7:33
homepage all right now let's come to the
7:35
browser again and let's go back to the
7:38
homepage let's refresh our
7:41
application and now we can see we don't
7:43
have any login and register option
7:46
activated here so let's navigate to the
7:48
official documentation of larel
7:52
45 here we have the Lille 45 this
7:56
package is managed by laril Community
7:58
itself
7:59
so let's click on this lar 4tify now
8:03
let's scroll
8:05
down and let's come under this
8:08
installation section here we have the
8:10
command to install laral 45 package
8:14
let's copy this let's come to the
8:17
terminal let's paste this command let's
8:21
hit
8:22
enter now this is installing lar
8:26
45 let's verify this installation in the
8:28
composer do Json
8:30
file yes we have the larel 4tify
8:34
installed now let's complete the other
8:37
steps now we will have to install the 45
8:41
so that this will publish the resources
8:43
provided by 45 but before executing this
8:47
command if you'll come to the project
8:50
folder inside app we have the
8:53
controllers and inside this controller
8:56
we have the Au folder and this Au folder
8:59
is managed by laral Bridge package so
9:02
what I will do I will remove this entire
9:05
o folder because this is not required
9:08
because when we will install 4tify that
9:10
will provide all the resources to manage
9:13
the authentication process so let me
9:15
delete the bridge authentication
9:18
controllers
9:19
first we have deleted the Au folder and
9:23
all the respective controllers we have
9:25
the profile controller only so we will
9:27
use this profile controller in order to
9:30
delete the profile so as of now I will
9:33
keep it here now next we have the
9:36
request folder inside HTTP so inside
9:39
this request we have the out folder
9:41
inside this we have the login request so
9:44
also we don't need this let me delete
9:46
this folder also this profile update
9:48
request is not required so better I will
9:51
delete this entire request
9:54
folder this is done and let's check this
9:57
providers folder inside the provider
9:59
folder we have the default app service
10:02
provider now if we come under the
10:05
resources folder we have the views and
10:08
we have the Au folder so mostly we will
10:11
be using the front end views to manage
10:14
the authentication process so let's keep
10:17
these all views here as it is now let's
10:20
come to the official documentation again
10:23
and here let's copy this command PHP
10:26
artian 4tify
10:27
install come to the terminal
10:30
let's paste that command and let's hit
10:33
enter here we can see this added the 45
10:36
scap folding now let's come to the
10:39
project folder
10:40
again we can see inside app folder we
10:43
have the exence folder now and inside
10:46
the accents we have the 4tify
10:48
action and 4tify provided these all
10:52
action to manage the authentication
10:54
process now inside the controllers it
10:56
has not added any controller this is
10:58
same let's check out this providers
11:00
folder now inside this providers folder
11:03
this has added a 4tify service provider
11:06
all right inside this 4tify service
11:09
provider if you scroll down we have the
11:12
boot method and inside this boot method
11:15
fortify has registered these all actions
11:17
to manage the authentication process all
11:20
right I will come to this later now
11:23
let's come to the config folder inside
11:25
config folder we can see this added one
11:28
configuration file for the 4tify let's
11:31
click on this we have the default 4tify
11:33
guard as web guard next we have the
11:37
password things so this will be managed
11:40
through users table only next we have
11:43
the username and email so Lal 4tify
11:46
considers username to email by default
11:49
and emailed is by default email so in
11:53
the case if you want to change the
11:55
username from email to any other field
11:58
then you can customize it from here
12:01
let's scroll down here we have the
12:03
property to store the usern names in the
12:06
lower case next we have the home path so
12:09
by default fortify will redirect on the
12:12
Home Route after the successful login
12:15
next if we'll scroll down we have the
12:17
route prefixes and subdomain that we can
12:21
change it here next we have the
12:23
middleware so this is by default web
12:26
middleware also this provides rate
12:28
limiter for the login and two Factor
12:32
authentication and next we have the
12:35
register view routes so 4tify provides
12:37
the authentication for the single page
12:40
application that means if you are
12:42
creating any single page application in
12:45
that case you don't need the views so
12:48
you can disable it from here and in that
12:50
case 4tify will manage the
12:52
authentication using API only therefore
12:55
you can use this fortify for the rest
12:58
API as well now let's come to the
13:00
feature section larel 45 provide these
13:03
all features just like registration
13:06
reset password email verification update
13:10
profile information update password and
13:12
two Factor authentication in the case if
13:15
you don't want to use these all features
13:18
you can simply comment that now let's
13:20
come to the browser let's come to the
13:23
application let's refresh it again yes
13:27
now we have the login and register
13:28
option provided by fortify author
13:31
scaffolding if you will try to click on
13:34
login you can see this said login view
13:37
response is not instantiable why because
13:41
fortify does not contain the front end
13:44
views to manage the forms just like
13:47
login and register So currently it is
13:50
not able to understand on the login
13:53
route which blade file or which view
13:56
this should open so if you will come to
13:58
the terminal again and if you will run
14:01
PHP artian route list then you can see
14:05
larel 45 has added these all routes here
14:09
we have the forget password login log
14:12
out register receip password two Factor
14:16
challenge confirm password profile
14:19
update and two Factor authentication
14:22
things all right and if you will disable
14:24
some of the features from the laral
14:27
4tify configuration
14:29
let's suppose I want to disable these
14:30
all features I have commented these all
14:33
if I will try to rerun this route list
14:36
command we can see all those routes are
14:39
not displaying now if we'll come to the
14:41
browser if we go back and let's refresh
14:44
this application and now you can see we
14:47
don't have the register option only we
14:49
have the login option here so in this
14:52
video I will start with the registration
14:54
option first so I will simply uncomment
14:57
this registration option okay and if I
15:00
will refresh it here we can see we have
15:02
the login and register option now now if
15:04
I will click on the register option this
15:07
thrown error that means register view is
15:10
not instantiable so by clicking on the
15:13
register we will have to open the
15:15
register View and if we come to the
15:17
project
15:19
folder inside the resources views folder
15:23
we have the Au folder and this Au folder
15:27
is added by laral Bridge pack package
15:29
inside this o folder we have the
15:31
register. blade. PHP we have the login
15:36
all right so what I want when I will
15:39
redirect to the register route I want to
15:42
open this form this is basically our
15:45
register form so for this larl 45
15:48
provides few function that we will have
15:51
to add it inside the 4tify service
15:54
provider so if we'll search for the
15:56
registration
15:59
here we have the registration option so
16:01
inside the fortify service provider we
16:04
will have to add this function in order
16:06
to display the register form so let's
16:09
copy this let's come to the vs code
16:12
editor Let me close these all under the
16:16
providers we have the 4tify service
16:19
provider so we can see inside the boot
16:21
method we have the 45 accents registered
16:25
here so at the bottom I will paste that
16:29
register view function this is inbuilt
16:32
function provided by 45 and if we'll
16:35
click on this register view function we
16:37
can see this is returning the added view
16:41
here so inside this function basically
16:43
we are passing the view name and 4tify
16:46
will load that view in the front end let
16:49
me add the comment here this is for
16:52
register okay this is done let's come to
16:55
the browser now let's refresh our
16:57
application yes we can see now using the
17:00
45 route we are able to access the front
17:04
end that was provided by Lal Bridge
17:07
package okay now if will try to click on
17:11
register the required field of this HTML
17:15
is triggering now so what I will
17:17
do I will remove that from the form so
17:21
inside the register. blade PHP we have
17:24
the required validation added by HTML so
17:28
I will remove
17:30
this required attributes all right this
17:33
is done let's come to the browser let's
17:37
refresh now now let's try to click on
17:39
the register button again yes we can see
17:43
this is triggering the required field
17:45
validation here but as of now we have
17:47
not added any form submission handling
17:50
and validation thing for this
17:52
registration form so how this is
17:54
managing by larel 45 if we'll come to
17:58
the route route list
18:00
again here we can see we have the
18:03
register route defined as a post method
18:06
and this is added in the larel 45
18:10
registered user controller all right so
18:13
when we are submitting the form that
18:15
form action is triggering to this
18:17
register route and if we'll come to the
18:20
vs code editor again inside the 4i
18:22
service provider we have the acction
18:24
registered for this create new user if I
18:28
will commit this
18:29
and if I will refresh this application
18:32
if I will try to
18:33
submit now you can see this triggered
18:36
this error create new users is not
18:39
instantiable that means when we are
18:41
submitting the form this is triggering
18:44
this action now what is this action
18:47
actually so to know more about this
18:49
action let's come to the app folder
18:53
inside app we have the exence folder
18:56
inside this action 45 we have the create
18:59
new user
19:00
action let's open this inside this we
19:04
have the create function and this create
19:07
function consist the form validation for
19:10
these fields name email and the password
19:14
once the validation is successful this
19:16
will insert the form data into the users
19:20
table so if we will add dump and die
19:24
dollar input here because in the create
19:27
function this this is capturing the form
19:30
data in the form of array let's come to
19:33
the browser let's go back let's refresh
19:36
the application and let's try to submit
19:39
this yes we can see the form has been
19:43
submitted and we are getting the array
19:45
of the form input
19:47
Fields so when we submitted the form
19:50
this triggered this function now let's
19:52
remove this dump and die and let's
19:54
refresh now this triggered the
19:57
validation if you want you can customize
20:00
the validation error messages in this
20:02
function itself so inside this validator
20:05
make function we have the validation
20:07
rules defined now here I will Define one
20:10
more array in order to customize the
20:12
error messages so let's suppose if I
20:15
want to customize the error message for
20:18
name. required rule then I will add a
20:21
message just like please enter your name
20:24
let's check this let's submit now the
20:27
message has been changed similarly we
20:29
can update the other messages from here
20:33
so let me duplicate this this will be
20:35
name do a
20:37
string name must be a valid string next
20:42
we have the max rule so we'll add the
20:46
message
20:47
as name must not be larger than 255 C
20:53
same thing we will add for the email I
20:56
will add email. required please ENT
20:58
enter your email address
21:02
string email address must be a valid
21:08
string and same thing we will add for
21:10
the
21:11
email next we have the max rule so I
21:15
will add it for email Max email address
21:18
must not be larger
21:22
than 255 C lastly we have the password
21:27
so if we check the password inside the
21:30
password rules there is a function
21:32
called as password rules here basically
21:35
this is one more password rules action
21:38
and this password rules action is
21:40
defined here inside the accs fortify
21:43
itself here we have the password
21:44
validation rules inside this we can see
21:47
we have the password validation rule
21:49
defined as required a string and this is
21:52
the password default that means this
21:54
will check the length all right and this
21:57
is for the confirm password so we can
22:00
customize the error messages accordingly
22:03
firstly I will add it for password.
22:04
required
22:06
as please enter your password next we
22:10
will have password dot
22:14
string
22:16
password must be a valid string yes this
22:19
is fine and here this will validate the
22:22
validation rules and accordingly this
22:24
will display the error messages after
22:27
the successful value validation this
22:29
will insert the user record here in the
22:32
users table and it will automatically
22:34
redirect to the dashboard page but here
22:37
in the laral 45 this will automatically
22:40
redirect to the Home Route if you'll
22:43
check the config folder inside the
22:45
config 45 we can see the default route
22:49
is Home Route so after the successful
22:52
login or authentication this will
22:55
redirect to this Home Route Okay so
22:58
let's come to the browser again let's
23:01
try to register first so I will create a
23:04
user
23:06
as programming Fields I will add a
23:10
email as admin theate
23:13
test.com password I will provide eight
23:18
characters now if I will click on
23:20
register we can see this landed on the
23:24
Home Route and it said 44 that means the
23:28
this route is not defined here let's
23:31
check the route first so inside the
23:33
route list we can see we don't have the
23:36
Home Route defined in the application so
23:40
let's create this route manually so
23:42
let's search for the web.php route and
23:45
here I will enable this route provided
23:48
by Lille bridge I will change this
23:51
endpoint name as home and Route name
23:54
will be home all right but for this home
23:58
route I will open this dashboard View
24:01
and this dashboard page is provided by
24:03
larel Bridge so inside this views folder
24:07
we have the dashboard. blade. PHP added
24:10
here let's come to the browser let's
24:13
refresh this application now this said
24:15
route dashboard not defined because
24:19
laral Bridge uses the dashboard route
24:22
instead of home so inside the navigation
24:24
blade or in the dashboard blade we will
24:27
have to change this route so instead of
24:29
changing the route end point in the
24:31
dashboard blade or in the navigation
24:34
blade for the views what I will do I
24:37
will keep the route name as dashboard
24:41
itself all right and I will change this
24:44
in the config of fortify so inside the
24:48
config 4tify we have the home path added
24:51
as/ home so instead of home will change
24:55
this to dashboard okay this is done now
24:58
let's come to the browser and if we'll
25:01
try to refresh this again this will
25:03
throw 44 but instead of home if you'll
25:07
try to access the
25:10
dashboard you will be able to redirect
25:13
to the dashboard page but again it said
25:16
profile do edit not F because in the
25:20
larable bridge have the profile section
25:22
at the top right corner and from there
25:25
this is expecting this profile. edit r
25:28
out all right what I will do I will
25:31
comment that option first so inside this
25:34
navigation. blade.
25:37
PHP this is added here inside this
25:40
layouts
25:43
navigation I will commit this profile
25:47
route all right and also if we scroll
25:50
down there will be one more profile edit
25:53
route for the mobile view let's comment
25:55
this let's save it now let's come to the
25:58
Brower owser let's refresh now yes we
26:01
can see we have landed on the dashboard
26:04
page after the successful login all
26:06
right in the profile option we have the
26:09
log out now if you click on log out we
26:13
have successfully logged out and we have
26:15
redirected to the
26:17
homepage let's try to register one more
26:19
user so I will add admin admin at theate
26:24
test.com password I will provide
26:29
characters if the email is already taken
26:33
then this will throw the error all right
26:36
I will change this to admin at theate
26:39
past mail.com I will add the
26:43
password let's register
26:46
now yes again we have registered and we
26:49
will be able to click on this dashboard
26:52
links here we have the username
26:54
displaying and now if we try to redirect
26:57
to the the homepage here we have the
27:00
dashboard option only we don't have the
27:02
login and register option because we are
27:05
already logged into the application okay
27:09
again if we click on the log out yes we
27:12
have redirected to the homep page so
27:15
that's it for this episode in the next
27:17
episode we will see how we will set up
27:19
the login page and the login
27:22
functionality because currently if we'll
27:24
click on the login we can see we are not
27:27
able to Direct on the login page so that
27:30
we will cover in the next episode so
27:33
thanks for watching see you soon in the
27:35
next episode until then Happy coding
27:39
[Music]
