Build a Starter Kit With Inertia and Fortify
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

0%
Your progress
  • Total: 5h 21m
  • Played: 0m
  • Remaining: 5h 21m
Join or sign in to track your progress
01. Setting up
01. Introduction and demo
4m 30s
0%
02. Installing Inertia from scratch
11m 49s
0%
03. Installing Tailwind
3m 24s
0%
04. Layout and navigation
31m 15s
0%
05. Installing Fortify
6m 10s
0%
06. Exposing routes with Ziggy
6m 44s
0%
07. Global modals
23m 41s
0%
02. Authentication
08. Registering users
13m 56s
0%
09. Sharing the authenticated user globally
5m 48s
0%
10. Signing in
9m 27s
0%
11. Signing out
2m 39s
0%
12. Redirecting to the intended location
4m 58s
0%
03. Feature management
13. Adding feature management checks
3m 14s
0%
14. Client-side feature management
5m 53s
0%
04. Building a toast feature
15. Basic flash messages with Inertia
7m 51s
0%
16. Building a toast plugin
15m 38s
0%
17. Styling and transitioning the toast
4m 53s
0%
05. Profile management
18. Creating an account layout
13m 24s
0%
19. Detecting and highlighting current pages
5m 22s
0%
20. Updating profile details
9m 22s
0%
21. Profile photo output and swapping
9m 17s
0%
22. Storing a profile photo
13m
0%
23. Changing user passwords
9m 9s
0%
24. Account feature toggling
8m 19s
0%
06. Password confirmation
25. Using a modal for password confirmation
8m 16s
0%
26. Confirming user passwords
4m 23s
0%
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
35. Mail setup and forcing email verification
4m 8s
0%
36. Adding a verification notice
3m 42s
0%
37. Resending the verification email
3m 27s
0%
09. Account recovery
38. Sending a recovery email
8m 45s
0%
39. Setting a new password
8m 22s
0%
10. Fixes and improvements
40. Closing the user navigation on click
2m 12s
0%

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.

Episode summary

In this episode, we're adding the "Forgot Password" feature to our login flow. We'll start by updating the sign-in modal to include a link for recovering accounts. When users click on this link, they'll be taken to a new modal where they can enter their email address to request a recovery email.

We'll make sure this feature is only available if password resets are enabled in our config. Next, we'll spin up a controller to handle displaying the recovery modal and set up the necessary routes and middleware so only guests (not logged-in users) can access them. Then, it's just a matter of building out the modal itself—pretty similar to our confirm password modal, but with a field for the user's email address.

After wiring up the front end, we'll make sure submitting the form actually triggers an email by hooking it up to the built-in password reset email route. There's a bit of troubleshooting as we realize the reset email requires a route for handling password resets, so we'll scaffold a basic controller and route for that too.

Finally, we'll add some nice finishing touches: when the recovery email is sent, the user sees a toast notification so they know what happened. At the end of the video, we test the entire flow, so a user can request a password reset email, receive it, and click through to the next step — which we'll build in the following episode!

Episode discussion

No comments, yet. Be the first!