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

0%
Your progress
  • Total: 5h 21m
  • Played: 0m
  • Remaining: 5h 21m
Join or sign in to track your progress

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.

Episode overview

In this episode, we're addressing a pesky issue that pops up when enabling two-factor authentication: the annoying flash of the password confirmation modal at the wrong time. We'll walk through why this happens and clean up the user experience.

First, we revisit our password confirmation flow, noticing how the modal flashes on and off when you try to enable 2FA. The underlying problem is a double-request scenario—both the 2FA enable request and the form that shows the QR code can prompt for password confirmation, leading to confusion and an ugly UI flicker.

To fix this, we ditch the default router transition and swap in Axios to handle the API requests. With Axios, we can directly manage success and error responses. This makes it much easier to control when the password confirmation is shown, and lets us intercept errors to prompt the user precisely when needed, without any jumping between screens.

We refactor our code to handle these responses cleanly—showing the password confirmation only when truly required and presenting the QR code in a smooth flow once validated. After our changes, everything feels a lot more seamless: enabling 2FA is clear and straightforward with no unexpected modals or flashes.

By the end of the episode, you'll see how using Axios can give you finer control in tricky authentication flows like this, and your users will have a much better experience when securing their accounts.

Episode discussion

No comments, yet. Be the first!