We recently tested 2FA using Google-Authenticator together with keycloak. It works, but registering a token-generator can be a pain.
When you add a 2FA token to your account (or we enforce it via the workflow) you get a page with an QR-Code. Here you create a token-issuer by scanning the code with your token-generator. Next you need to enter a valid token to confirm the usage of 2FA.
I found two big flaws in that:
UX-Flaw
When things goes wrong, the user enters the code and then reads the next input field where he should enter a name of the token-generator. If he then took too much time ( Google-Tokens are only valid for 30 seconds, which is quite short…) the token entered above is invalid. This could be void by swapping both input field.
Workflow-Flaw
If the user, for any reason hit F5 oder enter a wrong/invalid token, the page loads again and generates a new QR-Code, without the user getting note of it. This leads to a situation that every token the user enters is wrong. What he needs to do is to remove the wrong token-issue from his token-generator and register a new one with the new QR-Code (32 bit hash value). This leads to big frustration for the user and the support-staff. Other products using 2FA do this better and create a static code, save it in the user profile, so it is generated once for the user and not changed until he confirms it.