Auth0 Lock + Auth0 React + Universal login?

Hello,

I’m almost done with our auth flow migration to auth0! The last thing is to actually get a little more functionality than the standard loginWithRedirect() call via react-sdk.

Naturally, I found myself over to auth0-lock and in the documentation, it says that it can and should be used in conjunction with universal logins.

However, I have not been able to figure out how to do this. I have the form rendering in the page I want via new Auth0Lock().show() but when I log in, it just throws me back to my redirectUrl with a code query parameter, presumably to start the token exchange process.

If what I understand about Universal login is correct – a central, outside my domain auth server that does all of the token exchange and verifies it for you – then how do I hook this up to my auth0 lock instance?

Thank you, please let me know if I’m misunderstanding something which is entirely and probably likely possible.

Hi @mclslee,

Glad to hear you are finishing up your migration!

It sounds like you are wanting to customize the Universal Login page, is that correct?

If that is the case, then instead of using an embedded login and including Lock.js in your application, you can instead use and customize the hosted Universal Login.

You would still use loginWithRedirect() in your application. You would then go to Branding > Universal Login in your Auth0 dashboard. Select the Classic Login Experience and click Save:

Go to the Login tab and enable the Customize Login Page setting. From there you can customize the login page:

Hi @stephanie.chamblee

Thanks for the response. Yes we do want to customize the login page; however, simply switching to Classic and customizing it within auth0’s dashboards won’t work. We have a UX flow where the user logs in directly from the login page versus clicking on a button (or something) that redirects to auth0 universal login page, so we need the login form embedded on our page.

I got the form embedded, and now I even got logging in working, but now none of the silent authentication stuff is working; if a user logs in and opens another tab to our domain, they have to log in again. Do you have any tips for this?

Okay, that makes sense!

Are you using a Custom Domain for your tenant? This is necessary to avoid Cross-Origin Authentication issues when using an embedded login.

No I dont believe so, just trying to have the embedded login form but keep as much as auth0’s heavy lifting as I can

I see! In order to get silent auth to work when using an embedded login, you’ll likely need to set up a Custom Domain. This is recommended to help mitigate security concerns as well as avoid the silent auth issues you are seeing which are likely related to cross-origin auth. Custom Domains are included with any paid subscription:

@stephanie.chamblee

Forgot to respond.

I didn’t need to use custom domains – though my manager wants to add it now – I was able to get it working using checkSession to return the last session/tokens for the current user

1 Like

Thanks for following up! Glad to hear you found the solution.

1 Like

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