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
38. Sending a recovery email
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
Okay, let's work on account recovery. The first thing that we want to do is over in the sign-in modal,
00:06
have this link that will go through to a new modal allowing us to enter our email address, click a button and have an email sent. We've already got email set up. All we really need to do is create this modal, figure out where to send the email address
00:20
and we should get that email through. Now, while we're developing this, we need to be careful about our feature flags because remember over in our config and fortify, reset passwords is something that we can disable.
00:32
So over in our login modal, we implemented this forgot password container down here a little bit earlier. So let's go ahead and add this in as a link so we can actually click through. So we're just going to say forgot password and let's link this up to somewhere.
00:47
We're not sure where that's going to be yet. And let's go ahead and say text small and we'll say text blue 500 and font semi bold. Okay, great. So this is where we're going to add that if statement.
00:59
We already know how to do that because our feature clients are all within our main handler inertial request share. So let's go ahead and say page props features and this is reset passwords, I think. So let's just see if this toggles.
01:15
So let's go and open this up and it's not showing. And I think we just don't have our link pulled in. And there we go. So we've got that in there.
01:24
Let's try and disable this and we should see that disappear. Great. Okay, so next up is creating a modal where the user can enter their email address. And we can just link through to that because remember,
01:34
modals are kind of like a page within our app. So let's go ahead and create out a controller. And let's call this reset index controller. So we're going to have a reset process and recovery process.
01:47
So the first one, sorry, is going to be recover index controller. That is where we enter the email. Reset is where we're going to choose our new password. So let's create our recover index controller.
01:58
Let's head over to our web routes and we can just put this down here. And I'm going to pull this entire line down because we're going to need to add this feature check in here and that is reset passwords. So this is going to be auth and then say recover.
02:11
We'll reference our recover index controller and let's call this auth recover. Great. So if we head over to this route, let's add in our middleware. We have to be a guest to be able to access this.
02:24
So let's go ahead and add in our guest not auth middleware. And then down here, let's create out an invoke method. And we will return a modal which we don't yet have. And we'll put that under auth and call it recover.
02:39
Now for the base route, it doesn't really matter what we choose. Let's just choose the home page. OK. So we'll build the modal out, link through to it, see if that works,
02:47
and then look at submitting this through. So in our modal section, let's go and create recover.view. And let's take confirm password because that's going to be a very similar structure where we just have one field.
02:59
It's just going to be the email address. So let's paste this in, change this over to recover account or recover your account. And we'll change the title over as well. Recover your account.
03:13
And we don't know where we're going through to yet. We'll leave this on success close in here because we're probably going to want to do that once we've flashed a message. And let's switch this password over to an email address.
03:25
So that is now going to be email. And let's change the type just to text for now. I think that should be just about everything. So we just want to switch that over to email.
03:37
And we should be good to go. OK. So let's go and hook this up in our login page. So we want this to link through where we say forgot password to that new route.
03:50
So that route is auth and recover. So we should now just swap the modals over. Let's click on forgot password. And there we go.
03:59
We get our recover your account modal. So where do we need to post this email through to to get an email sent to us? Well, again, we're going to go over to our route list and check this out. So phpArtisan route list.
04:13
Let's have a look in here. And we've got forgot password password email. That's probably the one. So let's go over to our recover modal.
04:24
And let's post through to that password email. And then we'll close the modal when we're done. So let's try this out. I'm going to bring up my network tab just so we can keep an eye on the requests here.
04:37
And let's fill this in. OK, so I'm going to click continue. And I think we'll get an error here. Yeah, we can already see this is errored.
04:46
Now, the reason this is happening is because the email that actually gets sent contains the link to go through to our app, which we need to show the user to enter a new password. So basically, the email can't find a password reset route that it can link through to. So we're going to go over and just create a dummy one of these out for now.
05:06
So let's go and create a new controller for this. And we should be able to see that modal then or see that email come through. So let's say auth and reset index controller. Let's go over to our route list.
05:19
And we'll duplicate this one down. We'll call this auth reset. Switch the controller over. Now, the root name for this needs to match what we have here, password dot reset.
05:31
We could probably try and configure this. But at the end of the day, we're never going to be referencing this ourselves. It's purely internal to the framework. So let's just go ahead and call that password dot reset.
05:43
So that email that is trying to be sent now will pick up that link. And we'll be able to see it. Now, that is not the right thing. So reset index controller.
05:52
There we go. And hopefully, this works. So let's go over to our reset index controller and just create our constructor and our invoke. So this doesn't error.
06:02
So again, the middleware is going to be our guest middleware. And then our invoke will just do nothing for now. OK. So we should now be able to submit this through.
06:13
That email that's trying to get sent will find that route. And we should be able to receive that email. So let's click continue. Nothing really happens here.
06:22
The modal gets closed. We're going to flash a message on that in a minute. But as you can see, the email actually gets sent. So now that route can be pieced together because we have a route with that name.
06:31
And when we click on it, we just go through to an empty page. And this is eventually going to be our modal where we can enter our password, our new password to get back in. OK.
06:41
So let's go ahead and finish up by just flashing a message once we have sent this email. And again, it's just going to be the same thing that we've done before. Find the response, modify the response with that toast message, and we're done. So if we head over to our Fortify routes, let's go and find the forgot password thing,
06:59
which is just here, password reset link controller. It's not this one. This is to render the view. It is this one just here.
07:07
So we have got a successful password reset link request response. So let's grab this. And let's go up to our responses section. In our app, and create this out.
07:22
And let's find the implementation for this, which is just here. Copy and paste this over like we've done a bunch of times before. Change around the namespace to app HTTP responses. And then, of course, just change around how we want this to look.
07:38
Now, this accepts in a status. We don't really need that. We'll leave it in there. But we don't really need a specific status for this because we are doing this manually.
07:46
So we'll grab this, change this to toast. And we'll say password reset link has been sent. Or, of course, whatever you want to say. OK, so now that we've done that, let's bind this in our Fortify service provider.
08:05
So let's come up to here. And let's grab the name of this. These are all very long. Let's pop this into here.
08:15
And then, let's pull in our own implementation of that. So hopefully, now, we sign in, click forgot password. We enter our email address. We should get a toast so we know exactly what has happened.
08:30
So now, the user can come over to their email, click on the email, click on the reset password link, and they're forwarded over to this page, which we're going to build in the next episode, which will show that modal, allow the user to enter their password. And they'll be signed in.
40 episodes•5 hrs 21 mins•8 months 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!
Comments
No comments, yet. Be the first to leave a comment.