0

We are using Amplify, Cognito and Angular to build a login workflow. During setup of TOTP, we show a QR code to the user.

As good practice, we also want to allow the user to manually enter a "setup code" in case they can't use the QR code.

I can't really find any specific documentation on this, but it seems like some people suggest having a "Copy to Clipboard" button, that copies the result of Auth.setupTOTP() so that it can then be copied into Google Authenticator or Authy, or whatever the user is using to manage their MFA.

The problem is that:

  1. Users typically setup TOTP on their desktop computer, with a cellphone as their two factor authentication. Therefore the 'Copy to Clipboard' technique is useless. They have to manually type in the code.
  2. The code is 52 characters long! No one in their right mind will want to type in 52 characters.

Is there a way to get a shorter code, e.g. up to 16 characters?

cbp
  • 25,252
  • 29
  • 125
  • 205

1 Answers1

1

No that's not possible. Authenticator apps require a base32 encoded seed value so there is no encoding magic to be done to reduce the character count. The TOTP seed must be sufficiently long to be resistant to brute-force.

In terms of UX, the only time I would be using the manual entry option is when I'm setting up MFA on my phone which obviously means I can't take a picture of the QR with it. In that case a copy to clipboard button would be useful, but also just making it easy to select and copy on touch devices.

You shouldn't have to accommodate every case, its a one-time setup. If someone can't scan the QR with their phone for whatever reason, they will just have to enter it manually.

Andrew Gillis
  • 3,250
  • 2
  • 13
  • 15