Keycloak: Add big bold warning for users to BACKUP THEIR MFA on the "Add new MFA" form

This is twofold, I think:

• On the TOTP form, add a big warning for users backup their TOTP codes via an app that supports this (on Android, at least Aegis does). Also, make users aware in the same warning that they could use a second TOTP if they want.
• On the WebAuthn form, urge users to have at least one TOTP on top of the WebAuthn (or a second WebAuthn device)
• In all cases make users aware of the fact in no uncertain terms that it's really their responsibility to not use access to their account and that it will be tedious if at all possible to restore access once lost.

Maybe take inspiration from GitHub on all of this.

assigned to @lambdaclan

mentioned in issue #132

@svenstaro @klausenbusk

Sample

Also please note that this warning is only shown during the addition of the very first authenticator app. Is that a problem?

I suppose that's fine. Any chance we can show it on subsequent MFA forms? If not, no biggie.

I'd split the list of applications between Android and iOS to make it more user-friendly. Also, I think Google Authenticator is deprecated and we should stop recommending it. Also, I think andOTP has for all intents and purposes superseded FreeOTP.

I believe we shouldn't recommend LastPass, Authy, and 1Password due to their proprietary nature.

I'm a little divided as to whether we should recommend proprietary apps. For less tech-savvy users the proprietary apps is probably a better solution (my mom wouldn't know how to backup andOTP). Most Arch users is probably above average, so I'm not sure the same is true for our userbase..?

Sample

Could you add a line-break between account. and Warning and make Warning bold? Do we need or lose access to your account recovery methods (we don't offer any recovery methods)? We should probably also make Please ensure you backup your credentials. bold.

@svenstaro

Can you please clarify this point:

On the WebAuthn form, urge users to have at least one TOTP on top of the WebAuthn (or a second WebAuthn device)

Which form is that? If we make the TOTP setup a required action for all users then they will need to at least have one in order to complete the sign up process. We could emphasize that they can have more than one though.

Thoughts?

Current template:

Please let me know what you think.

Now looking into

Any chance we can show the warning on subsequent MFA forms?

Which form is that?

webauthn-register.ftl I assume.

If we make the TOTP setup a required action for all users then they will need to at least have one in order to complete the sign up process. We could emphasize that they can have more than one though.

I assume you meant "Default action". Users are already required to configure TOTP if neither TOTP or WebAuthn is configured.

Please let me know what you think.

Looks good Maybe at some point we could add a link to a Arch wiki article with best-practices or something. I'm not sure we should recommend Tofu though, backup isn't working probably:

To conclude: according to Apple's documentation, iCloud backups should include accounts from Tofu but will only restore them on the same device that made the backup. Encrypted iTunes backups should also include accounts from Tofu and will restore them even on new devices.

TOTP page:

WebAuth page:

As mentioned on IRC i cant really see the registration page without using a device (will possibly get one) but for now if one of you can send me a screenshot or something maybe I can just edit the text. The template mentioned by Kristian above uses the title text so maybe append it to that:

https://github.com/keycloak/keycloak/blob/c6608c156124ce0a01e895844c1102ad3a1c1b7b/themes/src/main/resources/theme/base/login/webauthn-register.ftl#L7

If not there are other messages (search for webauth) here that i can append to if they are at a more suitable location within the form. Help on this would be appreciated.

@svenstaro @klausenbusk

Please let me know what you think about the TOTP page above and the revised WebAuthn page below:

please ignore the html, I will fix that once the text is verified.

Thank you.

Edit:

Hmm, should we add the same warning as on the TOTP page (For security reasons, we may not be able to restore access..)? Besides that, it looks good! :)

For this reason, it is recommended that you set up a extra TOTP authenticator from your account page. does not make sense on the TOTP page IMO.

Hmm, should we add the same warning as on the TOTP page (For security reasons, we may not be able to restore access..)? Besides that, it looks good! :)

Cool, I will add the remark

For this reason, it is recommended that you set up a extra TOTP authenticator from your account page. does not make sense on the TOTP page IMO.

As per the criteria:

On the TOTP form, add a big warning for users backup their TOTP codes via an app that supports this (on Android, at least Aegis does). Also, make users aware in the same warning that they could use a second TOTP if they want.

Shall we just rephrase it or?

mentioned in merge request !88 (merged)

closed with merge request !88 (merged)

mentioned in commit 15a05e07