Working with Sign-in Widget v3 - oktaSignIn.afterTransform

Questions
1

Hi,

We’re going to migrate to Identity Engine soon, and with it comes the option to enable Widget v3 for Sign-in Page which seems to streamline the customization and make it simpler. We have a lot of customization that was done in the previous version by other admin and I’d like to simplify this both in the amount of customization but also how it’s setup, which the widget v3 seem to be able to do.

Using the Okta documentation and some examples, I’ve been able to replicate most of what I want but one thing is evading me and I’m running out of options, so I figured I would ask here. I’m not a developper, so that could be why I haven’t found out how.

Basically, I’ve been able to change which link/buttons show up, the font and color scheme using afterTransform. What I’m missing is that I want to make changes to the default logo at the top of the Sign-in-connector (which is there by default and uses the Theme logo).

I tried using different # in the STYLE section like in the previous widget without success, so I’m assuming I need to do it in the SCRIPT section with afterTransform, but I can’t find any information on how to do it and my google-fu and AI search all failed.

I want to change the default logo [auth-org-logo], ideally with a base64 image to avoid using a url.

This is my code right now in the BODY section. (Everything before that is the default code aside for a few color variable I set).

I would appreciate any help on this, and also if there is a knowledge base with a list of all possible options in afterTransform that’d be great. Thank you

<body>
    <div id="login-bg-image-id" class="login-bg-image tb--background"></div>
    <div id="okta-login-container"></div>

    <!--
        "OktaUtil" defines a global OktaUtil object
        that contains methods used to complete the Okta login flow.
     -->
    {{{OktaUtil}}}
    <script type="text/javascript">

        // "config" object contains default widget configuration
        // with any custom overrides defined in your admin settings.
        var config = OktaUtil.getSignInWidgetConfig();
		config.theme = {
			tokens: {

				PalettePrimaryMain: 'var(--color-282)',
				TypographyColorHeading: 'var(--color-282)',
				TypographyColorBody: 'var(--color-282)',
				TypographyFamilyHeading: 'Arial',
				TypographyFamilyBody: 'Arial',
				TypographySizeHeading4: '1.4rem',
			}
		}

        // Render the Okta Sign-In Widget
        var oktaSignIn = new OktaSignIn(config);
        oktaSignIn.renderEl({ el: '#okta-login-container' },
            OktaUtil.completeLogin,
            function(error) {
                // Logs errors that occur when configuring the widget.
                // Remove or replace this with your own custom error handler.
                console.log(error.message, error);
            }
        );
		
        oktaSignIn.afterTransform('identify', ({ formBag }) => {

            const help = formBag.uischema.elements.find(ele => ele.type === 'Link' && ele.options.dataSe === 'help');
            const unlock = formBag.uischema.elements.find(ele => ele.type === 'Link' && ele.options.dataSe === 'unlock');
            const forgot = formBag.uischema.elements.find(ele => ele.type === 'Link' && ele.options.dataSe === 'forgot-password');
            const divider = formBag.uischema.elements.find(ele => ele.type === 'Divider');
            const piv = formBag.uischema.elements.find(ele => ele.type === 'Button' && ele.options.dataSe === 'piv-card-button');

            formBag.uischema.elements = formBag.uischema.elements.filter(ele => ![help, unlock, forgot, divider,piv].includes(ele));

        });
		
    </script>
</body>
2

hmm, I wouldn’t think you would need to use afterTransform to change the logo image, unless you really really don’t want to host the image yourself?

If you can host that image file, can you try using the logo option within the config object instead?

For example, you should be able to do something like the following:

        var config = OktaUtil.getSignInWidgetConfig();
        config.theme = {
			tokens: {

				PalettePrimaryMain: 'var(--color-282)',
				TypographyColorHeading: 'var(--color-282)',
				TypographyColorBody: 'var(--color-282)',
				TypographyFamilyHeading: 'Arial',
				TypographyFamilyBody: 'Arial',
				TypographySizeHeading4: '1.4rem',
			}
		}
        config.logo = 'https://acme.com/img/logo.png' // the value here should be a URL hosting the logo image

        // Render the Okta Sign-In Widget
        var oktaSignIn = new OktaSignIn(config);
...
3

This works! To think I was that close.. I had also tried playing around with logo but inside the “tokens: {}”.

What should I add if I want to increase or decrease the size of the logo ? From the Edge developer tool, I saw the max-width and max-height parameters.. Or if I change the logo does it automatically remove these values ?

image
image318×140 3.72 KB

4

I tested a few more things on my end and cannot find a way to change the size of the logo. Alternatively, if that cannot be done, is there a way to change the header’s background to an image (and remove the logo all-together) ?

5

I was able to display an image inside the sign in widget, using afterTransform, below the header but above the Username/password fields using:

`` oktaSignIn.afterTransform(‘identify’, ({ formBag }) => {

formBag.uischema.elements.unshift({
    type: 'Description',
    options: {
	content: `
        <div style="margin-bottom: 20px;">
		<img src="img_url" 
            alt="AltName" 
			style="max-width:350px;" />
		</div>
    `
	}
});

const divider = formBag.uischema.elements.find(ele => ele.type === 'Divider');
const piv = formBag.uischema.elements.find(ele => ele.type === 'Button' && ele.options.dataSe === 'piv-card-button');

formBag.uischema.elements = formBag.uischema.elements.filter(ele => ![help, unlock, forgot, divider,piv].includes(ele));

}); ``

Unfortunately, it doesn’t show in the second phase of login where you choose the MFA to use. So while this isn’t bad, this doesn’t work long-term.

6

To circle back to this, if I can simply remove the size limits (shown in the other reply) this would be the best option. But at 200px by 40px, this is much too small for a custom header.

7

Hi @gamj

Thanks for sharing the options you tried.

Responding to your experimentation with the afterTransform. It looks like the method only applies to the ‘identify’ form name. If you want to affect every step of your authentication form, please try

oktaSignIn.afterTransform('*', ({ formBag }) => {});

See

for more examples.

If you want to apply styles manually to override the image size, you can do so; however, please be aware that the SIW can change over time. We recommend selecting by data attributes, but even then, there is no guarantee they won’t change over time. Additionally, the parent SIW container has a minimum size, so drastic image size changes may not render well. I increased the specificity of the selector to target the header logo, making the logo overly large to demonstrate the selector and styles. :slight_smile:

#okta-sign-in div[data-se*="okta-sign-in-header"] img[data-se="auth-org-logo"] {
  width: 400px;
  max-width: 400px;
  height: 80px;
  max-height: 80px;
}

Happy coding!

2 Likes
8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.