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
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:27
45 first thing first let's start with
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: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:20
yes so it installed laral bridge and
4:24
here this installed lar will paste for
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: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: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: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:59
so let's click on this lar 4tify now
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:22
enter now this is installing lar
8:26
45 let's verify this installation in the
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: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: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: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: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: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: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: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:29
and if I will refresh this application
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
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: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:37
string name must be a valid string next
20:42
we have the max rule so we'll add the
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:11
email next we have the max rule so I
21:15
will add it for email Max email address
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:06
as please enter your password next we
22:10
will have password dot
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: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: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:37
PHP this is added here inside this
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: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