# Working with Sign-in Widget v3 - oktaSignIn.afterTransform

**URL:** <https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630>\
**Category:** Questions\
**Tags:** widget\
**Created:** [November 26, 2025, 2:11pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630 "2025-11-26T14:11:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gamj](https://avatars.discourse-cdn.com/v4/letter/g/8797f3/32.png) [@gamj](https://devforum.okta.com/u/gamj)\
**Post date:** [November 26, 2025, 2:11pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630/1 "2025-11-26T14:11:04Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [November 26, 2025, 5:17pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630/2 "2025-11-26T17:17:03Z")

</div>

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](https://github.com/okta/okta-signin-widget?tab=readme-ov-file#logo) option within the config object instead?

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

```auto
        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);
...

```

---

<div class="post-metadata">

**Author:** ![gamj](https://avatars.discourse-cdn.com/v4/letter/g/8797f3/32.png) [@gamj](https://devforum.okta.com/u/gamj)\
**Post date:** [November 26, 2025, 6:09pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630/3 "2025-11-26T18:09:46Z")

</div>

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](https://global.discourse-cdn.com/oktadev/original/2X/b/b2dc022903f016d20fef6de35587daccea7d0332.png)

---

<div class="post-metadata">

**Author:** ![gamj](https://avatars.discourse-cdn.com/v4/letter/g/8797f3/32.png) [@gamj](https://devforum.okta.com/u/gamj)\
**Post date:** [November 27, 2025, 7:00pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630/4 "2025-11-27T19:00:24Z")

</div>

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) ?

---

<div class="post-metadata">

**Author:** ![gamj](https://avatars.discourse-cdn.com/v4/letter/g/8797f3/32.png) [@gamj](https://devforum.okta.com/u/gamj)\
**Post date:** [December 1, 2025, 6:12pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630/5 "2025-12-01T18:12:56Z")

</div>

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

```auto
`` 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.

---

<div class="post-metadata">

**Author:** ![gamj](https://avatars.discourse-cdn.com/v4/letter/g/8797f3/32.png) [@gamj](https://devforum.okta.com/u/gamj)\
**Post date:** [December 1, 2025, 6:18pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630/6 "2025-12-01T18:18:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alisaduncan](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/alisaduncan/32/3429_2.png) [@alisaduncan](https://devforum.okta.com/u/alisaduncan)\
**Post date:** [December 2, 2025, 5:40pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630/7 "2025-12-02T17:40:57Z")

</div>

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

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

```

See

> <https://github.com/okta/okta-signin-widget/blob/master/src/v3/README.md#aftertransform-customizations>

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. 🙂

```css
#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!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [December 3, 2025, 5:41pm UTC](https://devforum.okta.com/t/working-with-sign-in-widget-v3-oktasignin-aftertransform/34630/8 "2025-12-03T17:41:06Z")

</div>

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