How to Suppress or Hide Okta Hosted Sign-in Widget when Accessing /authorize/idp

• Okta Identity Engine (OIE)

Impact

There are two main impacts to this method as it shifted from an HTTP header response to a JavaScript execution.

• "Visual" End-user will "see a flicker" of the Sign-In Widget during the pass-through
• "Programmatic" impact would hinder the detection of HTTP 302, as ALL responses will be HTTP 200 with a body; which formerly would be the alternative path.

Resolving the "Visual" Impact

To resolve the visual impacts, the following JavaScript can be added to the custom sign-in page.

1. In HTML Header (REQUIRED):

This removes the opacity of the okta-login-container

<style> #okta-login-container{ opacity:0; transition-delay:200ms; transition:opacity 500ms; -webkit-transition:opacity 500ms; /* Safari */ }</style>

2. In the HTML Header, part of the JavaScript code block (OPTIONAL):

This affords additional context that could be used for build-out:

var myContext = {   
    isLoginHidden: true, 
}

3. In HTML Body (REQUIRED):

This has 2 functions: (Utility to access the query string in JavaScript & toggle the display based on presence):

// Get the login container.
var loginContainer = document.getElementById("okta-login-container")
// Utility: Get a Query String Parameters     
var urlParams = new URLSearchParams(window.location.search);  
// Detect the IDP param 
if (urlParams.has("idp")) {   
    console.log(urlParams.get('idp')); // just to capture... if additional logic needed   
    // Let the Default opacity remain; 
} else {   
    // Allow the login container to be seen;   
    loginContainer.style.opacity = 1;   
    myContext.isLoginHidden = false; // (OPTIONAL - if additional Logic needed (would not set opacity) 
}

4. In HTML Body (OPTIONAL):

If additional context is needed, and there is no display of the widget at the bottom of the page build-out.

if (myContext.isLoginHidden) {
    // make sure the login is displayed by default
    console.log('show the login!'); // Indicate login should not be hidden just in case it renders again.
    myContext.isLoginHidden = false; // Show the login container;
    loginContainer.style.opacity = 1;
}

Resolving the "Programmatic" Impact

There are no plans to address this at the time of this publication. Alternative integration options may provide better logic within the application. Since the IdP is known, redirecting for IdP verification for all authentication flows or leveraging the web finger API, however, there may be impacting limitations based on the context.