Consider the scenario:
I am on the login screen and forget my password. I go to the "forgot password" screen, which asks for my email. I fill it out, and I am sent a 2FA email.
Path 1 - "Happy" path
I check the email, click the link, and am routed back to the application. The application is in a logged-out state (aeshetic 1), and I am shown a screen to enter a new password, confirm it, and click the "reset button". Once this form is submitted, there is a "Log in" button, which takes me back to login, where I can use my new password.
Path 2 - Interrupted path
While waiting for the email, I remember my password, and log in successfully.
I get the email. I click the link, which routes me back to the application. The application is already in a logged-in state, which looks very different from the logged-out state (aesthetic 2).
Should I still be shown the next phase of the forgot-password flow (i.e. put in a new password, with password confiration)? Do I need a new design which combines the "forgot password" look of aeshetic 1 with the logged-in look of aeshetic 2? Should I simply show a message saying that the forgot-password link has expired, now that they logged in?
Note this application also has a settings section, where a user can update their password as a logged-in user. It has a slightly different look (and set of api calls) than the 'forgot password' flow. It is also a 2FA flow - put in current email and password -> receive email -> click link that routes back to page -> input new password and confirmation and click 'update' -> done.
Should Path 2 simply route to the confirmation step of the "update password" flow described in the above paragraph? This is more complex from a coding perspective, but I want proper UX on this.