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
29. Enabling two factor authentication
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
OK, we've got our QR code on the page.
00:02
Now we just need the form so we can scan it. And of course, go ahead and enter the code and confirm. So let's start out with our routes. If we just head over to here, we've got if we just have a look, let's have a look.
00:15
We've got post to two factor authentication, two factor enable. We've already seen that. But I think it's this one here, two factor confirm. So confirm two factor authentication.
00:27
So let's grab that one and make a request through. So we'll go ahead and make a note of this just up here. And let's define out a submit method just so we've got that. And let's go ahead and create out a field in here.
00:43
So, again, I'm just going to head over to any of these. Grab, let's say, the password here and let's change this over. So we'll say code form code and form errors code. And we might need to change that over
00:58
in a bit, because I think this is set within the Fortify package to have a key within that bag. So we'll change that over in a bit. Let's change over the code here. I'm going to set this to a type of text.
01:11
You'll probably want to set that to a password. But I just want to see what I'm entering there just for now. And that should be about it. OK, great. So let's go and create out a form in here for this.
01:23
So use form. And that's going to be a code which by default will be null. And then down here, let's go ahead and submit that form and post it through to that route, which I've just got rid of.
01:35
So let's grab that first of all. So form post. Through that route, and then let's just see what happens. So I'm going to come over here, give this a refresh.
01:47
There's the code section. Of course, we need a button. So let's go ahead and grab that from here as well. And let's put that down just below here and we'll say continue.
01:59
That should be it. OK, great. So we can now enter a code. Hit continue, and that doesn't look like it's doing anything. So let's just make sure this is working properly.
02:09
So it looks like what's happening here is kind of refreshing this. We are getting a fetch request to go through. Let's just double check what's actually happening when we submit this through. I think it's just because we don't have our form hooked up.
02:21
Yeah, of course. OK, so V on submit prevent. And let's call that submit method. OK, great. So that was the reason to give this a refresh and wait for that. Let's type one, two, three in here,
02:35
which is, of course, going to be the wrong code. And sure enough, yeah, we get back these errors. So this is under the bag confirmed two factor authentication. We can't change that because that's part of Fortify.
02:47
So what we're going to do is just roll with this and just say. Update both of these, so that should be good, and there we go, that we get the provided two factor authentication code was invalid. So now what we can do is just pull up our
03:02
authenticator app and go ahead and scan this. So let's go and scan this QR code and let's go ahead and enter the actual code that we get back from our authenticator app, hit continue. That goes through and validates and it should go ahead and enable this for us.
03:18
Now, let's head over to the console because it looks like we've got an error here. And yes, so the reason we get this is because this is under an error bag. If we get rid of code that we'll just check if we have this overall bag. First of all, so let's go ahead and get rid of that.
03:31
And let's just go through this whole thing again. So this has confirmed it did work, but we just had an error on the client side. So let's go over and just try this again. So I'm going to go ahead and just scan this in or enter this code again.
03:43
So let's not do that in the console and 879. Let's click continue and we don't get a console error. We haven't closed this model yet. So we're going to need to do a manual
03:55
redirect with this, but we do have two factor confirmed. So that's the entire flow of confirming two factor authentication. What we need to do now, though, is once we have submitted this and it has been successful, we want to use our on success callback to just go to a different page,
04:11
because by default, this isn't going to redirect us. So we're not going to get a new inertia response in there. So for this, we can just use the router to go ahead and redirect us over back to the account security section. So let's go ahead and do that now.
04:24
OK, so we'll go through the entire flow again. Let's go ahead and get rid of the confirmed. And we might as well just go through this whole thing because it's going to make sense to test the whole thing out.
04:33
So let's go and just set this up again. OK, let's hit enable two factor authentication. We'll bring up our console in case we get any errors here. And I'm going to need to rescan this just to create a new account.
04:45
Because we deleted all of them secrets and stuff from our database. So let's go ahead and enter the code that we get in here. Seven zero four six four zero. And let's try this out.
04:55
OK, so that looks like it has gone through, but we are not actually redirecting. So let's head over to here and see why that is. I think. Yeah, OK. So I included an extra object there, which we don't need.
05:08
That's only if we use the router to manually do this. OK, let's just try this again. Although we've already confirmed this, I'm going to enter the code again and we should be good.
05:17
So let's try this continue. And yeah, I just need to enter a fresh one. We'll get there eventually. And let's click continue, that should enable this.
05:28
OK, so account security is not in the root list. We've defined a new route. We're going to have to go through this whole flow again, aren't we? So let's go and actually put index in the bottom there.
05:38
OK, let's go through the entire flow again. So we'll get rid of the two factor secret, get rid of the recovery code. We are not going to be confirmed. And let's just go through this one more time and hopefully we've got this right.
05:48
So I'm going to click enable two factor authentication. That will prompt that password confirmation, which we saw before. Let's go and scan the QR code, hopefully for the last time. And let's save that out and enter our code to enable this for zero seven.
06:05
We are going to hit continue. That's going to redirect us back to the security page. And now obviously the state has changed because we now have this enabled and the refresh of inertia's mean that the new
06:15
props have come in without authentication property for our user, showing that we have enabled this so we don't have a button now. So technically we have two factor authentication enabled, but we're not showing a button to disable this.
06:30
Now, before we go on to stuff like prompting the user when they sign in, we want to disable this first so we can just toggle it on and off. So there we go. A little bit of trouble along the way,
06:40
but we are now authenticating the user or enabling two factor authentication. Let's go ahead and look at an easier thing, disabling this, and then we'll go ahead and look at prompting the user when they sign in.
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!