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
27. Building the two factor modal

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
So enabling two-factor authentication and showing the prompt with the QR code and the form to enter the code is probably the most difficult part of what we're doing here. So what we're going to do first of all is just split this section out here into another form. We're going to show a button if the two-factor authentication for the user isn't enabled.
00:17
And when we click on that, I'm then going to talk about how this kind of works within Fortify and the steps that we need to roll through. And in between all those steps, we have our password confirmation, which is going to prompt us to confirm our password before we do anything.
00:30
So let's get started with the easy stuff, extracting this out to a separate form like we did with our change password form. So let's go and create our two-factor form just inside of here. And we'll go ahead and add in our template.
00:44
Let's add in our script section just at the top here as well. And let's just add in form in there and switch this over. So we'll make sure we still include our if statement, really important. But we'll just swap this over for our two-factor form and add that if statement back in there.
01:03
And then at the top, of course, we'll go ahead and import that two-factor form. OK, so let's just swap that over. Now we can do all of this stuff in isolation inside of here. OK, so the first thing that we need is a button,
01:16
which is going to send a request through to Fortify to enable this for the user. That won't confirm it. It won't automatically trigger a modal or anything like that. It will just confirm that.
01:27
And it will add the two-factor secret and the recovery codes directly into the database. So what we need here is an enable two-factor authentication button. And let's just quickly style this up. So we'll set the text to blue 500.
01:45
And we'll just set the font to semi-bold. So that is what we want to do. Let's also make that small. We want to click on that and enable two-factor authentication.
01:55
But we don't want to show this button if the user doesn't have two-factor authentication enabled. Now, we haven't even attached any kind of two-factor authentication functionality to our user model yet. So the first thing that we really need to do is head over to the user model
02:08
and go ahead and use the two-factor authenticatable trait inside of here. That will allow us to insert them at recovery codes, the confirmation, and the secret. So if we click on this, we've got a couple of methods in here. But the one that we want specifically is has enabled two-factor authentication.
02:26
What we can do with this method is attach that to our user resource. So we can easily just show anywhere in our app whether we have this enabled or not. So if we head over to our user resource, we can just add this in here now. So two-factor enabled.
02:41
And we can just call that method directly on the user model. So this has two-factor authentication enabled. And we're good. So we can now use that directly in here to show this button if we do or don't have it enabled.
02:55
So we're going to go ahead and just say page, props, auth, user, and two-factor enabled. And that will only show if we do not have it enabled. And then we'll swap that out for a disable button later. OK.
03:11
So when we click on this button, what do we want to do? Well, let's go ahead and just hook this up with a V on click event to enable this. And let's create this out in here.
03:20
So we'll go ahead and create an enable method or function out. And that will just enable this. It will send a request through to a root to go ahead and enable it. What root is that?
03:31
Well, of course, we're going to head over to our root list to find out. So we've got a huge amount of two-factor stuff in here. But the one that we're after is this one here, two-factor enable. And we send a POST request through to that.
03:43
Let's just do that now and then just see what happens. So we'll go ahead and import our router from view. So we can send a standard router request through here or from Inertia. And we'll just say router POST.
03:55
And of course, use our Ziggy root helper to POST through to that. Let's see what this does. So I'm going to come over here. Make sure I bring up my network tab just so we can keep an eye on things.
04:05
And I'm going to click enable two-factor authentication. So what that's done is it's enabled this. It's redirected us back. So it's making a request back to this security page.
04:14
If we take a look in the database, you can see, sure enough, the two-factor secret and the recovery codes have already been filled. Now, at the moment, we still don't have two-factor authentication enabled because we don't have a confirmed app date in here.
04:27
That's what determines, as well as these other things, that it's confirmed or not. So what do we need to do now? Well, we need to show a modal to confirm the QR code. We need the user to be able to scan the QR code, enter the code,
04:41
send another request through. And that will confirm it matching up to the secret. And it will add in that date in the database. So in here, what we can do is send an empty object for the data
04:52
because we're not posting any data down. And then we can say, on success of this request to enable it, we then want to go ahead and show a modal. So it's now our job to build out a page which shows a modal,
05:07
which shows that QR code and the form and allows the user to enter that. So we're just going to do what we would normally do. We're going to head over to our web routes. And we're going to create out a route for this.
05:17
Now, we need to make sure that we use our feature flags for this because we know that we can have this disabled. So let's go and just do this down the bottom here. And in that if statement, and we'll say two-factor authentication.
05:30
So we'll define our route in here. Let's create a controller for this first of all. So let's go ahead and make a controller. Why don't we just put this under auth because it kind of relates to auth.
05:39
And we're going to say two-factor index controller. That's just going to render out a modal. So we've done this before. So let's go ahead and hook the route up to this.
05:50
So we'll say route get and let's say auth two-factor. And let's go ahead and say two-factor index controller. Again, you can put these under anywhere. You could put this under account security if you wanted to.
06:05
It's entirely up to you. And let's give this a name. So let's call this two or auth and two-factor. That kind of makes sense.
06:14
So we'll just say it's under auth. OK, so we've now got this. And we can actually make a standard request to this once we have enabled two-factor authentication.
06:22
Let's get the modal built out first of all. So at least it appears. And we'll add our middleware into here as well because we need to know that we're authenticated.
06:32
And we'll add our invoke in here using the modal functionality to show auth two-factor. And we'll call this two-factor enable just so it makes sense. We can provide a base route in here.
06:48
And the base route, I think, would be a good idea to be the account security index because that's kind of the page that we're on. So if we hit this page anywhere else,
06:58
we kind of want to end up in our account security area. OK, so now that we've got that, let's build this modal out. We'll just build a really simple modal and just make sure it triggers.
07:07
So over in our modal section under auth, let's create out a two-factor enable component. And again, let's just grab one of these just to save a little bit of time on the scaffolding.
07:20
And we'll say enable two-factor authentication. And let's get rid of all of our form in here and everything else inside. And we'll just say enable two-factor authentication.
07:36
We'll change this over a little bit later. So we can get rid of our form here. We don't need that. And I think that should just be about everything.
07:43
OK, so once we have clicked to enable this, let's close up our console. We know that over in our two-factor form, we need to show a modal here.
07:55
How are we going to trigger that? Well, we could just do a router redirect, or we could do a router request to grab this. So we could just say router get,
08:05
and then route auth dot two-factor. And that would send a request using inertia to this. But then it would render that modal because the response that we get back
08:14
from that is a modal response. So what we should now be able to do is click on this. And it doesn't work. So let's go ahead and check what we have here.
08:22
So page not found, auth two-factor enabled. OK, sure enough, we just need to do a forward slash there. You probably noticed that. Let's try this one more time.
08:32
And there we go. We could see that pop up. So give the page a refresh. Click on that.
08:37
That enables two-factor authentication in the database. But then it shows the modal for us that we can actually confirm on. So that is a process of enabling two-factor authentication,
08:47
but then showing our modal to actually give us the ability to show the QR code, enter the code, hit submit, and finally have it confirmed. So again, quite a lot of work to do here.
08:58
But we now have that flow set up. And in the next episode, we can look at showing the QR code, allowing the user to scan this, and then going ahead and entering the code.

Episode overview

In this episode, we dive into the trickiest part of our two-factor authentication (2FA) flow: building the modal that lets users enable 2FA, shows them a QR code, and gives them a place to enter their authentication code.

First up, we refactor our existing code and extract the 2FA logic into its own dedicated form component, just like we did with our change password form. We add a button for enabling 2FA, but only show it if 2FA isn't already enabled for the user.

Behind the scenes, we wire up the user model with the necessary trait so it can handle 2FA, and expose whether or not 2FA is enabled directly on the user resource. This lets us control when the enable/disable buttons are visible in the UI.

Next, when the enable button gets clicked, we send a POST request to Fortify to actually enable 2FA for the user. This sets up all the required data (like the secret and recovery codes) in the database. But at this point, the process isn’t complete—we still need the user to scan their QR code and confirm their setup.

That’s where the modal comes in! We set up routes, controllers, and a simple modal component to handle showing the QR code and form for entering the 2FA code. We also make sure our modal pops up right after enabling 2FA, creating a seamless flow.

By the end of this episode, our enablement flow is mostly in place. The user can click to enable 2FA and instantly see a modal, set up with everything they'll need to complete the process. In the next episode, we'll finish up the flow by actually showing the QR code, letting users scan it with their authentication app, and verifying their code.

Episode discussion

No comments, yet. Be the first!