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
}
});