Hi, I am new to auth0 and I have been stuck on this problem for a while now.
Currently, after a user logs in with their username and password, they are redirected to Multi Factor Authentication with google authenticator or a similar sign on method. After scanning the barcode and putting in the correct code, the user clicks on the orange button on the bottom and then sees, the mfa-recovery-code-enrollment screen, then after word, a ‘Congratulations, you are all set. In the future when logging in you’ll want your device handy.’ text, with a continue button underneath.
However, in addition to that continue button, there is that orange button that was used in other screens still there.
How could i remove that button from that screen? I have tried adding javascript to the Universal Login Page → Customize MFA but nothing seems to work.
I guess if there is a way to make the orange button have the same functionality as the continue button that would work too
Ok, so contacted auth0 support and apparently someone had customized the look of the button by adding CSS to the class
.auth0-lock.auth0-lock button.auth0-lock-submit
which persisted across all screens. By deleting it, the original button’s CSS came back but the button on the last screen disappeared
From:
Overriding CSS
Customizing your Lock by overriding its CSS isn’t recommended. The issue is that with new releases of Lock, some styling may change, leading to unintended problems if you are overriding the CSS. Additionally, it’s possible to simply overlook use of styles in other places and while the change may look fine in one view, it might not in another.
If you still intend to override CSS to further style your Lock, we recommend that you use a specific patch version of Lock rather than a major or minor version, so that you limit the amount of unexpected results that may occur when you alter the styles, and then another patch is deployed that might cause unexpected behavior in your UI due to the changes. This can be done by ensuring that you specify that patch version ( x.y.z ) when including Lock, or downloading it.
Additionally, we of course recommend that you test your CSS changes exhaustively, to ensure that the experience is the one you intend it to be for your customers.
This topic was automatically closed after 10 days. New replies are no longer allowed.
