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
34. Challenging the user when signing in

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
We've done a huge amount of tweaking and fixing with our two-factor authentication stuff. And finally, you'll be pleased to know, we're going to go ahead and implement the prompt when
00:09
the user signs in. So I've enabled two-factor authentication. And if you're following along, you're going to want to do that.
00:15
And then we're going to want to go ahead and sign out. Now, when we go ahead and sign in and we do have two-factor authentication enabled, this will handle the redirect for us
00:26
to show the prompt to enter a code from our device. Now, obviously, at the moment, we don't have a two-factor login route defined because we have disabled views.
00:36
Now, we want a modal to appear after the user has seen the login modal and entered the details. And we want that modal to take the code, submit it through, and then redirect the user.
00:45
So not as difficult as it sounds. Let's go and just remind ourselves what we did over in our Fortify service provider a little bit earlier for our Confirm Password view.
00:56
We have a custom callback here that Fortify will use when it needs to render a view. And that's for Confirm Password. But we also have, if we just use Fortify in here,
01:10
we have a two-factor challenge view, which is pretty much just going to work in the same way. We're just going to return an inertia modal. That's it.
01:18
So let's go ahead and fill this in as we need. So I'll just copy and paste this down here to save some time. And we're just going to say auth two-factor. And we're going to call this a two-factor challenge.
01:30
So we're going to grab this component name. We'll create out a modal for this. And we should be good to go. So let's go and create out a two-factor challenge modal.
01:41
Once again, let's just grab one of these. We'll use Confirm Password because that's pretty simple. And we'll just say two-factor challenge. Of course, you can change these around.
01:52
Let's go up here and change around what we need. So this is going to be a code. We already know that. We need the user to enter a code from their device.
01:59
Let's change around the header here to two-factor authentication. And this is going to change. We'll leave it there for now. We can get rid of this as well because we're not
02:09
going to need that on success callback, which we fixed earlier. This is now going to be a code. So let's change all of this over to code. We'll keep that as a password.
02:18
And this will be form.code, form errors code, form errors code. And I think that's just about it. And we can keep that button as continue. OK, so now that we've defined this, let's get rid of use modal as well.
02:31
Keep this nice and tidy. And we should be good. Now, this route is obviously going to change. But now that we have that modal in there, once we sign in,
02:40
we should see that two-factor prompt. So let's go and sign in. And OK, so it's still not working yet. So we've got the same issue we saw earlier.
02:52
Remember, we had to define our Fortify routes in order for that controller to give us that response back to then use that callback we're defining in our Fortify service provider. So what we're going to need to do is head over to the Fortify routes.
03:07
So let's go to our Fortify package, find them routes for our two-factor authentication. And let's find the one that's for the challenge. So let's go up a little bit further.
03:20
And it looks like it's this one just here. So we should be able to just take that and get this working. That's the post one. It's this one here.
03:27
Yeah, because obviously, that's when views are enabled. So let's take this and put that inside of our own Fortify route list. So routes and Fortify. And let's put that down there, not forgetting
03:40
that we need to make sure that we have our checks enabled for whether two-factor authentication is actually enabled or not. And we can just steal that from here. So we can just put that directly in here and end that off there.
03:53
And we should be good. OK, so we just need to put in the features section of this to make sure we check that. And there we go.
03:59
So this controller, remember, if we just remind ourselves, we'll then go ahead and return a two-factor challenge view response. And what that will do is, within the implementation, it will bind that to the container.
04:14
So that will now enable that callback where we've defined out our two-factor view, and that's our inertia modal. That will define that, and it will allow it to work. So now, hopefully, when we click Sign In, OK, yes.
04:27
So we just need to make sure that we have pulled that route in. So let's do that directly within our controllers here, and we should be good. So let's try one more time to sign in.
04:38
And we should get our two-factor authentication modal appear, which is great. So now, all we need to do is figure out how to submit this code through, which, to be honest, is not that tricky.
04:47
It's just submitting a code through, and it will redirect us over to where we need to be. So let's close everything off, and we're going to go ahead and open up that two-factor challenge modal.
04:56
And up here, we need to submit this form through to somewhere. Again, we're going to head over to our root list to find out where we need to submit this through to. So let's have a look in here.
05:06
We should have a two-factor challenge route that we can post through to. This doesn't have a name, but that's fine. We can just pull that directly into there. So let's add two-factor challenge.
05:18
And to be honest, that should be good. That will send that code down. We'll make sure that the errors are correct as well. So I'm just going to enter 1, 2, 3, and click Continue.
05:27
Yep, so the errors are coming through OK. And of course, I'm now going to grab my phone and actually enter a code that is correct, and we'll see what happens. So 947, click Continue, and there we go.
05:40
We're signed in. So not too difficult to implement that. It's nothing we haven't already seen before. But again, it's good to understand how Fortify is working behind the hood
05:49
so we can go ahead and implement stuff like this. So there we go. We're now signed in with our two-factor prompt, and that is working really nicely.

Episode summary

In this episode, we're finally tackling the moment where the two-factor authentication (2FA) prompt appears during user sign-in! 🎉

First, we make sure 2FA is enabled, then sign out and start working through the process: when someone tries to log in, we're aiming for a modal pop-up that asks for their authentication code. If you remember from earlier, we used custom callbacks in Fortify for things like "Confirm Password"—turns out, the two-factor challenge view works almost the same way. We'll just return an Inertia modal for the 2FA prompt.

We get hands-on: creating out the 2FA challenge modal, tweaking the form so it's ready to accept a code, and updating the button and errors as needed. There are some Fortify routes behind the scenes that need to be wire up correctly, so we go through the process of copying over the right pieces and ensuring we're checking whether 2FA is enabled. Once that's sorted, the modal appears as expected after sign-in!

The final step is hooking up the modal to actually submit the entered 2FA code. We find the appropriate route, wire up the form, and test the flow: entering a fake code shows errors properly, while entering a real code successfully signs us in.

By the end, our app now challenges users with a 2FA prompt at login, giving us that extra security layer without too much fuss. Pretty satisfying to see it all come together!

Episode discussion

No comments, yet. Be the first!