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
33. Fixing password confirm flow when enabling
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 now that we've just fixed up that issue with the password confirmation, let's just move on to fix the issue where we saw that password confirmation flashing
00:08
of the modal a little bit earlier when we went to enable two-factor authentication. So to start, let's go over to our Fortify routes and we'll bring back our 10-second delay in between requiring the password. And let's go over and with a two-factor authentication account disabled,
00:26
let's go over and click enable two-factor authentication. So you could see there, we get a few flashes of needing to confirm our password going on to that other screen where we eventually see our QR code and then back to confirm password again.
00:40
So obviously something is going wrong here. Now, what's actually happening is if we head back over to our two-factor form where we're enabling this, we're sending a post request through to two-factor enable. And then when this is successful, we are then showing that form.
00:56
And that form itself, if we remember our two-factor enable form, is when we mount this, then going ahead and doing the same thing. That's why we're getting that flash. So even though this was successful,
01:09
it still required the password confirmation when we went to actually enable this. Now, to get around this, once again, this is a common thing with inertia. You don't have to use the router. Use Axios where it makes sense.
01:22
And in this case, it does make sense because we get back that JSON response with that status code where it's prompting us to enter our password. So we're going to go ahead and refactor this, change it over to Axios,
01:33
and we'll see a nice smooth flow where we can enter our password and then go ahead and enable this. So let's go ahead and just comment out what we have here. In fact, we could just switch this straight over
01:43
because the API is pretty much the same. So let's say Axios post. Now, we'll grab this line here because that's what we want to do when this was successful.
01:52
But obviously, we don't have the objects here within Axios. We have a callback to say then. So if this was successful, we want to go ahead and show our form. We don't need a response in here.
02:03
But when this errors, we then want to prompt the user for their password. So we're just going to do exactly the same thing that we've done everywhere else. Catch that error and then go ahead and forward us over to here. So we can do exactly the same thing here.
02:16
Check the response code and then go ahead and ask the user to confirm their password. So two-factor enable does require password confirmation. That's caught here. When we have confirmed our password,
02:29
we go through to the two-factor modal that shows the QR code. But then the QR code also could confirm or require password confirmation. So we do that here as well. So each step of the way, we're catching this error
02:43
and making sure we're showing the form first before we continue. And that will get rid of that flash. So let's go over and try this again. Hitting enable two-factor authentication.
02:54
We don't see any flashing of the modals. We just see our confirmed password. We can enter our password. That's going to go ahead and then show that modal once we click it again.
03:04
We see our QR code. That's done the check in the background. But obviously, everything was fine. And then we can just continue to set this up.
03:10
So once again, we don't need to use a Nash's router. We can use Axios if it makes more sense doing stuff like this, particularly because we're sending requests through to a third-party library. It kind of makes sense to handle this specifically with Axios.
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!