JonathanG.38768 (Customer) asked a question.
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)
<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: {
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>
Hello @JonathanG.38768 (Customer) , thank you for contacting Okta Community!
I've reviewed our documentation for something relevant. It looks like your question is more appropriate for our dedicated Okta Developer Forum. I advise reaching out via devforum.okta.com as they will have more insight into this topic.
While we'll do our best to answer your questions here, this medium is more inclined towards Okta's core products and features (non-developer work).
Regards.
--
Help others in the community by liking or hitting Select as Best if this response helped you.
Hello Diana. Very well, I've re-posted my question there. Thank you