Customise the Classic Universal Login page for Azure AD

Help
,
1

Hi, we have multiple applications that use the same Classic Universal Login page.

What we want to do is, for a specific application (that happens to be the only application that is configured to use an Enterprise Database Connection with “Microsoft Azure AD”) to not display the Submit button on the login page.

Ideally, there could be a setting that would allow us to check if the application that is currently using the Classic Universal Login page uses an Enterprise Database Connection and based on this information to be able to not show the Submit button. FYI: the submit button does not do anything on the page since The Enterprise Database Connection is using SSO and there is nothing to be submitted. The user would only need to click the Enterprise Database Connection link in order for the authentication process to be triggered. Hence it makes no sense to display a submit button for a form that does not technically exist.

I have seen on the documentation that normally there is an event “signin ready”, however, this event does not get triggered on our page. Hence we are currently not sure how we would know when the page is ready for the end user so that we can immediately perform some custom modifications (like finding the submit button on the page and hiding it).

lock.on(‘signin ready’, function() {
// here we can place any logic we would like
// in our case the code here does not get executed - is this because we use an enterprise connection or is it because of something else?
}}

let’s say we have the following:

function hideSubmitButtonForAzureAdConnections () {
//Here we can have some logic to detect if we are using an Azure AD connection
//If it is confirmed that we do use Azure AD - then find the Submit button and hide it
}

// The below implementation of the function would not work.
lock.on(‘signin ready’, function() {
hideSubmitButtonForAzureAdConnections();
}}

Why does it not work and what we could do to achieve our goal?
Any ideas, suggestions, or referrals to documentation are most welcome.

Thanks in advance

3

Hi @danielkilev,

Welcome to the Auth0 Community!

I was able to hide the submit button with the following code:

<script>
//lock default template code...
lock.on("signin ready", () => {
      document.getElementById('1-submit').remove()
})
</script>
4

Thanks Dan,

I can see that you have suggested using the “signin ready” even function of yours in order to have it execute a specific command that would remove, not hide the button.

It is important for me to make a few observations and corrections here.

  1. In my report I pointed out that the mentioned “signin ready” function does not get triggered. However, I now noticed that I had made a mistake when I was quoting this function.
    In my post I may have perhaps misled you to believe that we did not use correctly your function as it should be closed correctly with }) and not }} as I wrongly posted in my initial message. Please accept my apologies for this. Adding any code to this function did not work for us. We shall re-try again and see if we have only the code you provided for the function, in case that helps.

  2. How can you guarantee that your solution will not be removing the button that is needed for an application that would need it to stay? Your solution only removes an item based on its ID being specifically named “1-submit”. Perhaps you know something that we are not aware of.

  3. If removing the submit button is an acceptable and recommended option for auth0 then that is fine with us, we do not insist on specifically hiding the submit button when it is not expected to be present on a login page where there is nothing to be submitted. Ideally, auth0 should detect such cases and adjust what buttons are sensible to be presented without the need for a fix via code customisation or if there were more config settings available. I assume our setup is not a common use case scenario and may require some investigation.

If I do not post shortly confirming that the issue is solved, please consider it as still standing.

Thank you for your time

5

@danielkilev,

Thanks for the follow up.

Yes, please let me know. It should behave as you are expecting if configured correctly.

I did not mean for the code snippet to be a full solution to your request. You will need to add conditional statements to conform the function to your requirements. For example, you may put an If statement to narrow down when the button removal function runs. In this case, you may want the conditional to run for a certain application, or when a certain connection is present.

Classic Universal Login is our legacy login solution and is not likely to have regular feature updates. Regardless, feel free to leave us some Feedback.

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.