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.