Okta hosted sign-in widget customization using embedded HTML editor for SAML application

Questions
3

Also, in my tests, I modify the config based on the clientId value I get back from that function and simply set the brand color (which changes my sign in button color) for two specific applications. You may just have an issue due to the requestContext being returned as a promise, which is why I’m returning it via my function.

Here’s the full sample of what I’ve got working:

<script type="text/javascript">
    function getClientId() {
        if (!OktaUtil) return undefined;
      
        var requestContext = OktaUtil.getRequestContext();
        console.log('requestContext: ', requestContext);
        // OIDC Apps
        if (requestContext && requestContext.target && requestContext.target.clientId) {
            return requestContext.target.clientId;
        }
        // SAML Apps
        if (requestContext && requestContext.authentication && requestContext.authentication.issuer.id){
            return requestContext.authentication.issuer.id;
        }         
    }

    const clientId = getClientId();
    console.log('Client/App ID: ', clientId);

    var color = '#12736c';
    // for a specific SAML app
    if (clientId == samlAppId){
        color = '#731251';
    }
    // for a specific OIDC app
    if (clientId == oidcAppId){
        color = '#fcc00a';
    }

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

    config.colors = {
        brand: color;
    }