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