Customization not showing in self hosted widget

[bbarrick]

Using the self hosted widget my authentication is working. I am able to display the widget and log in. But when I try to add customization to the widget nothing shows up on the page. I’ve tried adding a logo and tested with a custom button and link, none of them appear in the widget.

import OktaSignIn from "@okta/okta-signin-widget";
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

const signIn = new OktaSignIn({
    authParams: {
        useClassicEngine: true,
        issuer: issuerUrl
        redirectUri: redirectUri,
        pkce: false,
        responseType: "code",
        display: "page",
        logo: '../images/logo.png',
        helpLinks: {
            custom: [
                {
                    text: 'Test',
                    href: 'https://www.google.com'
                }
            ]
        }
    }
});

signIn.renderEl({
    el: '#widget-container'
})

[Regis]

Hello @bbarrick,

Are you using any framework like React or Angular?
Depending of your, implementation you can import the logo like
import logo from '../images/logo.png';

And then directly pass the logo variable to authParams, this should resolve the path appropriately.

Thank you

[bbarrick]

Hi Regis,

Thank you - this is using webpack. I had tried that initially but when it didn’t work I thought I’d test some of the other customization options and when those didn’t work I thought maybe there was something else wrong.

Edit: I can see the image in the build file as well.

[andrea]

With the exception of OIDC related features/functionality, most customizations in your widget should not be within the authParams object and should just be directly within OktaSignIn.

Can you try the below instead:

const signIn = new OktaSignIn({
    issuer: issuerUrl,
    clientId: clientId, // this is missing in your example
    redirectUri: redirectUri,
    useClassicEngine: true,
    logo: '../images/logo.png',
    helpLinks: {
        custom: [
            {
                text: 'Test',
                href: 'https://www.google.com'
            }
        ]
    },
    authParams: {
        display: "page",
        pkce: false,
        responseType: "code"
    }
});

signIn.renderEl({
    el: '#widget-container'
})

[bbarrick]

Andrea - thanks, that worked. I can’t believe I didn’t notice it there.