Twofactor fields, email code + authenticator code. One page or two pages for input?

I have a user action that requires both a mobile authenticator 2fa code, and also a copy-paste from an email (a code). I'm trying to determine whether it would be best to have a single dialog view with input fields for both of these, and a submit button. Or have two separate dialog views, with the first being the email code dialog, and the second being the authenticator dialog.

Pros for same dialog:

  • User can see all auth requirements upfront
  • Makes it clear when there's a validation error what field it belongs to (doesn't change to either or view where you'd have to know whether you're on the authenticator view or email code view)

Cons for same dialog:

  • If user enters the mobile code before the email code there's a good chance the 2fa code will expire by the time they submit the form.
  • Potentially cognitive overload?

What are your thoughts?

Tags: