Hide Connecting To Banner

Problem

With OIE, by default you'll notice a "Connecting To" banner when using a Okta Hosted Login. This can be a unintended design element that may not fit with your brand requirements, especially for standalone CIAM implementations.

Solution

This requires a simple JavaScript snippet after the Signin Widget is rendered to hide or remove the element from being render.

Sign In Widget

For the Sign In Widget (SIW), leverage the afterRender event listener to locate the banner element, and remove it from the view.

Example:

oktaSignIn.on('afterRender', context => {

const banner = document.querySelector('.applogin-banner');

if (banner) {

banner.style.display = "none";

// You can also use,

// banner.style.visibility = "hidden"

// If you would like to retain the spacing on the page

}

});