Can't use a custom login page with Identifier First”

[kate688]

I want to build a login page that verifies the email domain first and then prompts for the password. I followed the instructions in this post, but it still didn’t work. I chose the prompt method to login-id, but it always reverts back to the login prompt after refreshing the page. I also selected the identifier first option to ensure it prompts for the email domain first, but it still didn’t work.

[rueben.tiow]

Hi @kate688,

Welcome to the Auth0 Community!

I have checked your tenant’s Universal Login settings and confirm that you have enabled the New Universal Login experience with Identifier First.

I have also reviewed your second screenshot and can verify that the behavior you experienced is normal. The advanced options page always reverts to the login prompt, regardless of whether you change the prompt before the page refreshes.

As mentioned in this post, if you are experiencing the “You cannot use a custom login page with Identifier First” error, you will need to turn off the Customize Login Page toggle in your Universal Login settings.

Let us know if you continue to experience issues.

Cheers,
Rueben

[kate688]

Hi Rueben,

I did toggled off the Customize Login Page. I am using an Auth0 Organization feature, so I need to identify the user’s email first. Since I toggled off the Customize Login Page and set the New Universal Login experience with Identifier First , the login page still prompt the user the email and password at the same time. If the login prompt in advanced option page always reverts back to original setting, how can I allow a user to enter the email field then prompt the password field.

[rueben.tiow]

Hi @kate688,

Thanks for the reply.

Since you are using the New Universal Login experience with Identifier First, you should not see the page prompt for the email and password at the same time. The user would provide them on different screens.

Could you use the Try button on the Dashboard > Branding > Universal Login > Customization Options and share a screenshot of that login page?

@kate688

If the login prompt in advanced option page always reverts back to original setting, how can I allow a user to enter the email field then prompt the password field.

The page always reverts because it is an interface for making text customizations on the Universal Login. As long as you have saved your changes, the Universal Login page will render them when you log in.

[kate688]

Here is how a login page looks. It shows the email and password fields at the same time. !

[rueben.tiow]

Hi @kate688,

Thanks for the reply.

The second screenshot you shared shows a preview of the login page but is not the same as the one shown live on your app.

I can confirm this after checking my dashboard’s branding page, which also shows the email and password in the preview.

However, when I click on the Try button, it opens a new tab with the login page, and I can see that the identifier first is working.

Could you try that and see if it works?

Thanks,
Rueben

[kate688]

Hi Rueben,

Thank you for following up. I resolved the identifier issue but I also have the custom domain problem. I have set up the custom domain in the Auth0 dashboard (see the attachment). However, I am still encountering issues using it.

When I changed the domain value in my code to login.mydomain.com, and put it in the address bar, it redirected to the my website(mydomain.com) instead of the Auth0 login page. Could you please help me understand why it redirects to the my website instead of the Auth0 login page? Is there any documentation with Auth0 React SDK that I can use as a reference? Here is my code:`export const Auth0ProviderWithNavigate = ({ children }) => {
const navigate = useNavigate();

// const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const domain = 'login.mydomain.com'
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

// const redirectUri = "http://localhost:3000";

const onRedirectCallback = () => {
    navigate('/');
};

return (
    <Auth0Provider
        domain={domain}
        clientId={clientId}
        authorizationParams={{
            redirect_uri: window.location.origin,
            // organization: organizationId 
            audience: 'https://login.mydomain.com/oauth/par',
        }}
        onRedirectCallback={onRedirectCallback}
    > 
        {children}
    </Auth0Provider>
)

}`

[rueben.tiow]

Hi @kate688,

Thanks for the reply.

I have checked your custom domain settings on our end and can confirm that everything looks good and is configured correctly.

I have also tested your login endpoint using both your canonical and custom domains, and it works to get to your login page.

@kate688

Could you please help me understand why it redirects to the my website instead of the Auth0 login page?

You still need to call the login endpoint with your custom domain to get to the login page. For example:

https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope={scope}&
    audience={apiAudience}&
    state={state}

Thanks,
Rueben