Want to implement custom UI for Login, have been using auth0-react which uses Universal Login

[janson]

Objective
To implement custom UI for login.

Problem
We have used auth0-react for a few months in development. That uses the universal login under the hood.

Idea
Use both auth0-react and auth0-js at the same time. Use auth0-react’s useful hooks to check if logged in, get tokens silently etc. but use auth0-js to do username/password for the custom embedded login.

Is this even possible? How would I achieve this? As far as I know now auth0-react forces a /authorize endpoint redirect if token is invalid. Would user/pass login from the custom login be recognised by auth0-react’s hooks?

If we had to completely revamp our current implementation it really feels like we’re stuck between a rock and a hard place.

Thanks in advance for your help!

EDIT: After some more digging and reading… We have just resigned to “it cannot be done”. It’s either we move everything to auth0.js or just try our best to customize Universal Login as much as possible via the Liquid templates method (Universal Login Pages). That’s it.

[john.gateley]

Hi @janson

As you note, you shouldn’t do this (move to embedded).

With embedded login, you lose sessions, which means that get token silently won’t work (it relies on a session).

But with the ULP you have many options. The preferred is to use templates + the newULP experience.

If you have a more complex use case - tell me about it. And you can use the classic ULP experience which allows pretty complete modification.

John

[janson]

Hi @john.gateley, I actually do.

I have finally customised the login page to how I want it to look on the new ULP + templates now with a lot of CSS child selectors (which I expect to possibly break in the future).

However, I realised that I cannot do something like conditional rendering. So I would like to have one design template for someone who followed the Clinician login link and one design template for someone who followed the Client login link.

Caveat, both user types exist on the same repo/Auth0 application. Any ideas what I can do? Or do I have to revert to Classic ULP where I can use extraParams? Is there an equivalent in the new ULP?

Thanks for your help John.

[john.gateley]

Hi @janson

I think you can do this with the new ULP. See this: https://auth0.com/docs/universal-login/new-experience/universal-login-page-templates#page-templates-variables

You could have two applications defined in Auth0, one for Clinicians and one for Clients, and the page template could fork depending on which application was used.

John