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

Question

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?

Answer 1

There are four main types of 2FA in common use by consumer websites:

1. SMS 2FA
2. Authenticator App / TOTP 2FA
3. True two-factor authentication
4. Push-based 2FA

Check here

It depends on the type of 2FA that is being used. For Security reasons commonly most of them double dialog boxes while the single dialog boxes look much more appealing. It is more of asynchronous calls, then mere traditional dialog boxes.