Styling Okta Hosted Sign-In Widget for MFA

[kapple]

Hi folks,

I’ve been working on styling the Okta-hosted sign-in page with the embedded HTML editor using this reference. I have flags set for different client IDs using the OktaUtil object. Along the same lines, is there an attribute that indicates whether we are on a sign in page or MFA page as I know the embedded HTML editor represents both of them? I need to make some visual changes on MFA pages only.

Thanks,
Kim

[andrea]

I’d recommend taking a look at afterRender and checking the context.controller for details about what state the user is in and what view they are being shown:

oktaSignIn.on('afterRender', function (context) {
      console.log('afterRender: ' + context.controller)}

For example, in your use case, the context.controller will return as mfa-verify during the verification step.

Edit: I also want to recommend that you do this in afterRender only, as you should wait until the widget is fully rendered before you attempt to change the look and feel (such as via jquery). Otherwise your changes can be overwritten once the widget finishes rendering.

[kapple]

@andrea

oktaSignIn.on('afterRender', function (context) {
      console.log('afterRender: ' + context.controller)}

This worked out. Thank you!