This episode is for members only
Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.
Get started
Already a member? Sign in to continue
Playing
10. Signing in
Episodes
01. Setting up
02. Authentication
03. Feature management
04. Building a toast feature
05. Profile management
06. Password confirmation
07. Two factor authentication
27. Building the two factor modal
9m 7s
0%
28. Showing a QR code
7m 44s
0%
29. Enabling two factor authentication
6m 52s
0%
30. Disabling two factor authentication
1m 35s
0%
31. Showing recovery codes
4m 37s
0%
32. Fixing password confirm redirect
9m 42s
0%
33. Fixing password confirm flow when enabling
3m 26s
0%
34. Challenging the user when signing in
5m 58s
0%
08. Email verification
09. Account recovery
10. Fixes and improvements
Transcript
00:00
OK, so signing a user in is going to be pretty much the same process as when we registered.
00:04
We need to build out our modal, create our form, which we can just copy and paste over, and then send a request through to Fortify, and we will be signed in.
00:13
So let's get started. And first of all, create out our controller. So this is going to sit next to register, which I'm actually going to prefix with auth.
00:22
Now, remember we introduced Ziggy routing, which means that everything still works here. So that's why we did that. I have the freedom to change these over.
00:30
So we'll go ahead and create out a login one here, and we'll reference the controller in just a second. Let's build that out. So let's go and make out a controller here,
00:41
and let's call this login index controller, which is just going to be responsible for showing that modal. So let's switch this over to login index controller, open this up, and we'll just do the same thing.
00:55
So create our invoke magic method. We'll go ahead and return an inertia response here, and we'll use modal. And we will put this in an auth directory and call it login.
01:07
Now, the base route here is, again, just going to be the home page. Now, while we're here, let's add some middleware to this. We can either do that at the root level
01:16
or within the controllers. So let's say this middleware, and we know that we have to be a guest to be able to access this. That kind of makes sense.
01:26
The same for our register index controller as well. We don't want people who are already signed in accessing these pages. So there we go.
01:34
Great. OK, we just need to build this modal out now, and we're good to go. So let's go over to where our modals live, just over in here,
01:43
and let's create out a login.viewModal. I'm pretty much just going to copy the entire register modal over because it pretty much functions in the same way. We just need to get rid of a couple of things
01:54
that we don't need. So let's go over to our login modal, paste this in, change this over to sign in, and we'll just change everything else over as well.
02:05
So let's start at the very top here. Now, we don't need a name. We just need an email and a password to sign in, and we'll change this to sign in,
02:14
and this will go through to a different route. Let's get rid of this just for now, and let's get rid of the name here. Email, we can keep.
02:23
Password, we can keep. Confirm password, we can get rid of, and we can change this to sign in. OK, so let's go over to here and hook this up,
02:34
and then we should see that new modal. So over in our navigation, let's go over to where we have sign in. Let's hook this up to go through to that authLoginRoute,
02:45
and we'll hook that up there. And of course, we'll do that for our mobile navigation as well. So route auth, did we call that login or sign in? Let's have a look.
02:57
Login. Let's just check the other one. Yeah, all good. So let's click on sign in, and there we go.
03:03
There is our sign in modal. Now, we'll be adding the remember flag to this to set the remember token if the user wants to be remembered in just a minute,
03:11
but let's get the actual functionality working first of all. OK, so again, we're going to come over to our route list. So let's go ahead and say phpArtisanRouteList,
03:20
and let's go ahead and look for login here. So we've got our login route. Again, it's not named. It's probably one of the only other ones
03:27
that are not named in here. So in our login modal, we are just going to go up. When we submit this through, we're going to post this through to slash login,
03:39
and let's see what happens. So we're not signed in at the moment. Let's enter the details that we registered with before, and the credentials do not match our records.
03:48
OK, it probably deleted it. So let's create an account again, and once we're in, we will get rid of that token. So let's go to Storage, get rid of the session cookie,
04:05
and let's click Sign In, and we'll try and sign in. There we go. We're signed in as easy as that. All that functionality behind the scenes is working for us,
04:15
so we just need to post this data through. That's pretty much it. OK, so we'll go ahead and work on the Remember Me functionality.
04:21
So that is just going to be an additional thing down here that has a Remember checkbox. So let's go ahead and set this in here inside of this container, and we will actually
04:34
have a Remember Me, and then next to that, we will have a forgotten password, so Forgot Password. We'll put these together so we can save a little bit of room. So for Remember Me, let's go and set this overall wrapper
04:49
to Flex and Item Center and Justify Between, and let's have a look at that. So again, we need to, because we haven't implemented the ability to log out just yet, we are going to go ahead and just get
05:03
rid of these two, and let's hit Sign In. So that's what it's going to look like. Let's go and set this to Flex and Item Center so we can have the input and the label next to each other.
05:17
So we'll have an input in here with a type of checkbox, and we'll get rid of the name because we're not going to need that, but we will have a label just below that. And again, that will sit next to each other because of the Flex.
05:31
So this will say Remember Me, and that will just hook up to Remember, and we'll call that Remember. So let's check it out. OK, not looking great, but we can improve on it.
05:43
So for the input itself, let's set this with a height of 4 and a width of 4, and we'll set the text to blue 500, and we'll set when we focus this a ring of blue 500,
05:56
and we should have a nicer looking checkbox. OK, great. So for the label itself, let's set a margin on the left of 3. We'll set this to a block, text small,
06:07
and we'll set the text to gray 900, and we should have something that looks OK. Maybe we can bump that down just a little. OK, great.
06:16
So I'm going to get rid of the forgot password stuff. We'll do that a little bit later, but at least we've got that in there so we can add it in. OK, so for this, we're going to hook this up to our form,
06:26
and this is going to be called Remember. So let's just do a little bit of digging. I'm going to add this to here, but then we're going to figure out how we know that this is called Remember.
06:39
So when we installed Fortify, this comes with a bunch of controllers and loads of stuff behind the scenes. And of course, because this is just a package
06:47
that you've installed, you can dig into it and find out what you need. So if we come up to the authenticated session controller, which is the controller
06:56
that this hooks up to, and you can find all this out in the root. So you can see we've got this authenticated session controller mapped up to the login here.
07:04
So you can just dive into these and see what you get. So if we just look inside of here, let's say we've got Create, which will give the login view response, which we're not
07:14
using because we're using an inertia app. But we've got things like Store here. So this goes ahead and passes this through a login pipeline. So let's go ahead and open this up and have a look inside of this.
07:26
And you can see that we've got some Fortify checks here if we want to modify how we actually authenticate the user. And if we go down here, we've got a bunch of stuff down here, whether this feature is enabled in terms
07:38
of two-factor authentication. So all of this stuff just gets checked, basically. Then we have this attempt to authenticate here. So let's just open this up.
07:47
And that's an action within Fortify itself. That's not published to us. But we can go ahead and open that and check this out. So we can just dive in, basically,
07:57
and see what's going on. So you can see here that we've got this guard, which will be the guard that we're using, whether that's web or API, attempt,
08:05
which is just a standard method to sign us in, using the username that's specified within the Fortify config. In our case, it says username, but that's referencing email.
08:15
Remember, that came from the Fortify config just over here with the username and email thing. So username is set to email, so that's what we're authenticating with.
08:25
Password, and then there we go. We've got the Boolean there called Remember. So we can kind of dig into stuff. And I'd recommend you do that to find out
08:32
what is going on behind the scenes here as you're implementing each feature. So we're passing down Remember now with this form, which, of course,
08:39
is a Boolean value hooked up to that checkbox. When that gets submitted, it's going to be either true or false. So now that we've got that in there,
08:47
we can go ahead and sign in. And if we just open up our console again and have a look under our storage, under Cookies, when we check Remember Me, we will get a Remember token set.
09:00
We don't see anything here. But if we head over to the database, we now have a Remember token in the database. So we know that that functionality is now working.
09:09
So we can now sign in. Everything works. It's as easy as just copying everything over, because we already have our standard form layout,
09:17
and just sending the request through to a different place. Now, it's really bugging me that we can't sign out now. So let's head over to the next episode and implement how we're going to sign ourselves out.
40 episodes•5 hrs 21 mins•1 year ago
Overview
Let’s build our own Laravel starter kit with Inertia and include all the features you’d expect. We’ll implement authentication, email verification, profile photo uploads, two factor authentication, and more.
Fortify is a frontend agnostic authentication package for Laravel, meaning most of the work is done for us — we just need to build the frontend and make requests to the endpoints that Fortify registers.
Once you’re done, you’ll have a clean slate for building your next project, with the ability to control everything in your own starter kit.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!