Disable social login when an SSO domain is detected

[tkav]

We have enabled a social connection (Google) and it works as advertised, it’s great.
We have also set up some enterprise conections and they also work as advertised, amazing stuff!

However, there is a weird interaction between those two:
When a user enters their email and it belongs to one of the enterprise connection domains, the password field disappears (since they’re using SSO and no password is necessary). BUT the social login does not disappear (unlike the password field), which causes confusion to some users. Is there a built-in way to work around this issue?
We’d like to keep using non-customized Classic Unified Login as customizing it would mean that we’d have to maintain it ourselves.

Thanks in advance!

[mathiasconradt]

If you’re using the Classic ULP, you can customize the login page, and it should be possible with common javascript event listeners, that listen to the the event that shows/hides the password field.
So, nothing out of the box, but possible with little custom js scripting.

[tkav]

The code we came up with is as follows:

// This removes social login if SSO domain is detected
    function callback(mutationsList) {
      mutationsList.forEach(mutation => {
          mutation.removedNodes.forEach(removedNode => {
              if (removedNode.className.includes("auth0-lock-tabs-container")) {
                  document.getElementsByClassName("auth-lock-social-buttons-pane")[0].style.display = "none";
                  document.getElementsByClassName("auth0-lock-pane-separator")[0].nextSibling.children[0].style.display = "none";
              }
          })
          mutation.addedNodes.forEach(addedNode => {
              if (addedNode.className.includes("auth0-lock-tabs-container")) {
                  document.getElementsByClassName("auth-lock-social-buttons-pane")[0].style.display = "block";
                  document.getElementsByClassName("auth0-lock-pane-separator")[0].nextSibling.children[0].style.display = "block";
              }
          })
      })
    }
    const mutationObserver = new MutationObserver(callback);
    lock.on("show", () => {
      setTimeout(() => {
        // If email is prefilled with SSO domain, the observer added below would not work for the first time
        if (!document.getElementsByClassName("auth0-lock-tabs-container").length){
          document.getElementsByClassName("auth-lock-social-buttons-pane")[0].style.display = "none";
          document.getElementsByClassName("auth0-lock-pane-separator")[0].nextSibling.children[0].style.display = "none";
        }
        let authLockForm = document.getElementsByClassName("auth0-lock-form");
        authLockForm = authLockForm && authLockForm[0];
        if (authLockForm) {
          mutationObserver.observe(authLockForm, {childList: true, subtree: true});
        } else {
          console.log("DOM didn't load in time");
        }
      }, 1000);
    });

Add this after lock.show().

The reason for the timeout is that even though show has fired, the element we look for is not guaranteed to be present.

[konrad.sopala]

Thanks for sharing that @tkav!