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
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
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.
40 episodes•5 hrs 21 mins•1 year 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!
Episode discussion
No comments, yet. Be the first!