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
29. Enabling two factor authentication

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, 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.

Episode overview

In this episode, we're diving into the process of enabling two factor authentication (2FA) for our app. We start with displaying the QR code and then move on to building out the form where users can scan the code with their authenticator app and enter the generated security code.

We'll walk through setting up the correct routes for submitting the code, catching and displaying form errors, and making sure the flow works—errors and all! You'll see the usual hiccups as we debug issues like form submissions not working due to missing handlers, and some quirks with how error messages get returned and displayed.

Once the form is hooked up, we test entering both invalid and valid codes, confirming that everything is set up properly with our backend Fortify package. You'll also see us sort out minor client-side bugs and make sure we're redirecting the user to the security/account page after they've successfully enabled 2FA.

We go through the entire enablement flow a couple of times to make sure it works from start to finish. By the end, our user can enable two factor authentication, and the UI updates to reflect this state. Next, we'll look at how to toggle 2FA off again and eventually prompt users for their code when they log in. A little troubleshooting, but now we've got 2FA up and running!

Episode discussion

No comments, yet. Be the first!