Build a Starter Kit With Inertia and Fortify

Sign in Get started

This episode is for members only

Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.

Already a member? Sign in to continue

Playing

37. Resending the verification 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

02. Installing Inertia from scratch

03. Installing Tailwind

04. Layout and navigation

05. Installing Fortify

06. Exposing routes with Ziggy

07. Global modals

02. Authentication

08. Registering users

09. Sharing the authenticated user globally

11. Signing out

12. Redirecting to the intended location

03. Feature management

13. Adding feature management checks

14. Client-side feature management

04. Building a toast feature

15. Basic flash messages with Inertia

16. Building a toast plugin

17. Styling and transitioning the toast

05. Profile management

18. Creating an account layout

19. Detecting and highlighting current pages

20. Updating profile details

21. Profile photo output and swapping

22. Storing a profile photo

23. Changing user passwords

24. Account feature toggling

06. Password confirmation

25. Using a modal for password confirmation

26. Confirming user passwords

07. Two factor authentication

27. Building the two factor modal

28. Showing a QR code

29. Enabling two factor authentication

30. Disabling two factor authentication

31. Showing recovery codes

32. Fixing password confirm redirect

33. Fixing password confirm flow when enabling

34. Challenging the user when signing in

08. Email verification

35. Mail setup and forcing email verification

36. Adding a verification notice

37. Resending the verification email

09. Account recovery

38. Sending a recovery email

39. Setting a new password

10. Fixes and improvements

40. Closing the user navigation on click

Transcript

00:00

OK, let's figure out how we click this Resend Email button and get a new email sent to us if we didn't receive it.

00:07

OK, so we have a form out here. I think we'll just roll with using a form here. It's going to be much easier to just say Form Post and just post no data down.

00:16

But first of all, let's just check what this route looks like. So let's go over to our route list. And we have here a verification send route.

00:26

So that's probably the one that we want. Let's go over and add this in here. And to be honest, that should be pretty much what we need to do. So let's just try this out and see what happens.

00:38

So I'm going to hit Resend Email. And let's head over to our email here. And yeah, sure enough, that has been resend. Now, there's a bit of tidying up we can do here.

00:46

We could go ahead and just flash a message after this to tell the user that this has been resend. And we already know how to do that. We need to modify the response.

00:55

So let's dig into this and see what's happening. So we're going to go over to our Fortify routes. And let's find the email verification stuff here. So that looks like this one here.

01:08

We've got a route here with a controller. We open that controller up. And sure enough, we've got this email verification notification sent response.

01:18

So we're just going to copy that over, modify how this looks, and we can flash a message. So let's go up to our HTTP responses section. Let's add this in here.

01:28

Remember, we can do this for pretty much any route. We've probably missed some throughout the course. But by now, we pretty much should be able to do this ourselves.

01:35

So let's go over to our concrete implementation within Fortify. Again, it's just pretty much the same thing. So we're going to copy this over to our response and, of course, just modify it.

01:46

So first thing to do is switch over the namespace. And we'll go down here and just get rid of this JSON response because we're not going to need that. And we're going to return back with a flash message

01:58

or, what do we call that, toast. And email has been resent or, of course, whatever you want to say. So now we just need to hook this up over in our Fortify service

02:09

provider, and we are done. So let's go up to where we're registering all of these on our container. And let's grab the name for this.

02:16

It's quite long. So email verification notification sent response. And we're going to paste that in there and put in our own implementation of that

02:25

to bind it in. So now when we resend an email, sure enough, we get email has been resent. And remember, we can close off this modal programmatically

02:35

using the package that we're pulling in. And that's probably a good idea to do at this point. So let's go ahead and do that now. So once we have finished posting this through,

02:44

we're then going to say on success. And we can go ahead and invoke close, which we've got rid of. But we can just go ahead and pull that back in. So let's borrow that code from our modal.

02:56

Pull this in. Get rid of show because we're not going to need that. Get rid of redirect. And there we go.

03:02

We invoke that. That should close the modal. So let's go through the whole flow again, and then we should be pretty much done.

03:07

So over on home, I'm going to head over to dashboard. Of course, I haven't verified my email. I'm going to resend the email. The modal gets closed off.

03:14

We're redirected back, of course, because we can't access the dashboard. We get that email sent again. We hit verify email.

03:21

And there we go. We're landed back on the dashboard. And we can now access it. So that is email verification completely done now.

Episode summary

In this episode, we're taking care of what happens if a user doesn't get their email verification link—they can now easily request a new one! We start by hooking up the "Resend Email" button so that it actually triggers the resend action. This involves checking out the relevant route and connecting our form to it, which just needs a simple POST request with no extra data.

Once that's wired up, we test it out and confirm that the email is sent correctly. Next, we make things a bit more polished for the user: after resending, we flash a message (or display a toast) to let them know that a new verification email is on its way. This involves customizing the response from Laravel Fortify so it returns the flash message instead of a JSON response.

We also do a little cleanup by making sure that once the resend is successful, the modal window closes automatically, making for a smoother user experience. We borrow some modal control code for that. Finally, we walk through the whole flow—from trying to access a protected part of the app, hitting resend, seeing the confirmation, and landing back on the dashboard after successful verification. And that's it! Email verification is fully sorted.

Episode discussion

No comments, yet. Be the first!