When you have Google Authenticator (MFA) setup the popup for MFA has OKTA logo Google Authenticator and the message Eneter your Google Autheticator passcode on it. Is there any way to change this so that it has my company logo ( from Brand) and more generic language as it actually works with authy and ms authenticator too.
If you have a custom domain or are self-hosting the widget, you can modify the language displayed in the Widget using the i18n properties. In my examples, I’ve replaced “Google Authenticator” with “Authenticator app”
The manual set-up instructions (for the end-user) were very much written for Google Authenticator specifically, so you will have to decide how you want to rewrite that portion to be more generic. I’ve included all the i18n properties I see being used for Google Authenticator below and some potential customizations that can be done in the Okta hosted login page, with separate instructions for Okta Classic and Identity Engine, below:
Okta Classic:
This one is a little bit tricky, because the Widget will include a link to the App store for the Google Authenticator app. You won’t be able to modify this with the i18ns directly, so you may want to look into using afterRender to modify this part further.
Otherwise, there’s a couple of i18n properties you can customize:
config.i18n.en["factor.totpSoft.googleAuthenticator"] = "Authenticator app"
config.i18n.en["enroll.totp.setupGoogleAuthApp"] = "Launch {0} and select the option to scan a barcode/QR code"
config.i18n.en["enroll.totp.manualSetupInstructions"] = "To set up manually enter your Okta Account username and then input the following in the Secret Key Field" // this is the original text
config.i18n.en["enroll.totp.manualSetupInstructions.generic"] = "To set up manually enter your Account username and then input the following in the Secret Key Field" // this is the original text
config.i18n.en["enroll.totp.manualSetupInstructions.specific"] = "To set up manually enter your {0} Account username and then input the following in the Secret Key Field" // this is the original text
Okta Identity Engine:
I didn’t spot that same download link in OIE, so you only need to modify the i18n keys to change the text:
config.i18n.en["oie.google_authenticator.label"] = "Authenticator app"
config.i18n.en["oie.google_authenticator.authenticator.description"] = "Enter a temporary code generated from your authenticator app."
config.i18n.en["oie.enroll.google_authenticator.setup.title"] = "Set up Authenticator app"
config.i18n.en["oie.enroll.google_authenticator.scanBarcode.description"] = "Launch your authenticator app and choose to add an account by scanning a barcode or QR code"
config.i18n.en["oie.verify.google_authenticator.otp.title"] = "Verify with an authenticator app"
config.i18n.en["oie.verify.google_authenticator.otp.description"] = "Enter the temporary code generated in your authenticator app"
config.i18n.en["oie.enroll.google_authenticator.manualSetupInstructions"] = "To set up manually enter your Okta Account username and then input the following in the Secret Key Field" // this is the original text
Since the text was written specific to Google, you’ll have to make some decisions on how much you change the wording, particularly for oie.enroll.google_authenticator.scanBarcode.description and oie.enroll.google_authenticator.manualSetupInstructions
Changing the logo should be possible, but there is no built-in method in the widget to do so and will likely also involve using afterRender to replace the image with one of your choosing once its been written to the DOM
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.