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
35. Mail setup and forcing email verification

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
OK, in this section, we are going to talk about email verification, which means when we create a new account,
00:05
we're going to send an email to that user to verify their account. They will be able to sign in by default and go ahead and access everything.
00:13
But we can protect particular routes and say, well, you have to be verified and you have to verify your email to be able to access a certain page.
00:22
So we're going to be setting everything up now, making sure that email gets sent. And then we're going to go ahead and protect a page like the dashboard to test this out.
00:30
OK, so let's go ahead and just update the user model first of all. This is where we need to start to enable this functionality. So to enable this, it's pretty straightforward.
00:40
We're just going to go ahead and implement the must verify email contract. That's all we need to do. And of course, we need to make sure
00:47
that over in our Fortify config, we have email verification enabled. OK, so once we've done this, now what's going to happen is when we create an account, it's
00:56
going to send off an email. Now, we don't have any email software set up at the moment. I'm going to go ahead and use MailPit. And I'll show you how to configure this.
01:04
This works for pretty much all operating systems. So you can go ahead and grab it. It's just a really nice, easy way to develop locally when you're sending email.
01:12
So I already have this installed. So what I'm going to do is go and set up a MailPit server. That will go ahead and run. And we can access that.
01:20
And we can see a kind of inbox here. So if we open this up in the browser, you can see we've got an email inbox here. So go ahead and install that or use any of the other software
01:31
that's available. OK, so to configure this, let's just quickly head over to our EMV file. We're going to go ahead and switch this over to 0.0.0.0
01:41
for our local machine. And to be honest, that's pretty much it. We can set our from email address and all that kind of stuff as well.
01:47
But we'll just leave that. OK, so now that we've done that, let's go ahead and create a new account. And we should see an email rolling.
01:53
So let's go ahead and say Mabel and Mabel at CodeCourse.com. And just enter a password. And sure enough, as we would expect, that user is now signed in and ready to go.
02:05
They can access anywhere in this application. But that will have sent them an email address. So you can see here, we've got an email asking us to verify this email.
02:14
So we're not going to touch that just yet. The first thing we're going to do is protect one of these pages. So let's, again, choose the dashboard
02:21
and protect this against verification. So if we head over to our web routes, find our dashboard. And we're going to head over to our kernel. And you'll see here that we've got this verified middleware.
02:31
So this is kind of a feature that's built into Laravel. But it's handled by Fortify to actually verify your email address. So that works really nicely.
02:41
So we're going to attach this verified middleware either in the route or in the controller to this dashboard. And as you can see already, we've got a change here. So let's go back to our home page
02:53
and click over to our dashboard. And we get the same message or error that we've seen previously, where we don't have a view or a route defined for this page.
03:04
And that is because we have disabled views. We want to create our own view for this. And we're actually going to create this out as a modal. Now, this modal is not going to allow us to type anything
03:15
into it. It's just going to say, you need to verify your email address to access this area. And then it's going to have a button within that modal
03:21
where, just when we click that, it's going to go ahead and resend off another email, just in case the user didn't get the email in the first place. So now that we have enabled this and attached this functionality
03:32
to the dashboard, we're getting the email through. We need to do a few things. We need to click through to actually verify our email address, which is going to work.
03:41
So if we go over to our dashboard now, that does work. It's all hooked up for us really nicely. The second thing we need to do, though, is go ahead and create this modal.
03:49
So if you need to toggle this, you can go ahead and do this in here. And let's find Email Verified At. We're going to get rid of that, head back over,
03:59
and we're back at the point where we see this message. So in the next episode, we're going to go ahead and create this modal out, which will remind the user to verify their email.

Episode summary

In this episode, we roll up our sleeves and dive into setting up email verification for users in our app. Basically, when someone creates a new account, we'll send them a verification email to confirm their email address. By default, they can still sign in and use the app, but we learn how to protect specific routes (like the dashboard) so that only users with verified emails can access them.

We start by updating the user model and making sure email verification is enabled in the Fortify config. To actually send emails during development, we set up MailPit—a handy tool to catch and view emails sent from your local machine. The episode covers configuring your .env file to connect to MailPit and quickly demonstrates creating a test account to see the verification email in action.

From there, we apply Laravel's built-in verified middleware to the dashboard route, blocking unverified users. Since we've disabled the default views, we get an error at first. This sets us up for the next step: building a custom modal to notify users they need to verify their email, plus a button so they can easily request another verification email if needed.

So, by the end of this episode, you've set up the core logic for email verification and restricted access appropriately. Next up, we'll make that modal to improve the user experience even further!

Episode discussion

No comments, yet. Be the first!