Possible to host & use 2 distinct Hosted Login Pages?

Hello Auth0 community, I’ll state my question first, and then provide detail below:

Question: is it possible and work-able to support >1 (e.g. 2) hosted login pages (HLPs) with custom UIs within one Auth0 tenant? IOW:
a. is it possible to deploy / host 2 distinct HLPs, each with their own set of (custom) HTML/CSS/JS in one Auth0 tenant?
b. if yes to “a”, is it possible for >1 applications to distinguish between these 2 HLPs, such that appA uses HLP-A, and appB uses HLP-B?

Detail: based on this table in Auth0’s documentation (https://auth0.com/docs/libraries/when-to-use-lock), we created an HLP with a custom UI. This HLP handles multiple database connections (we can for example support users authenticating with username-based accounts, and email address-based & social accounts). We call these different behaviors ‘modes’ within our HLP. Also of course, our HLP matches our company branding and does not look like Auth0’s ‘Lock’ or (new) Universal login experience.

We have found that maintaining these different ‘modes’ is challenging from a code & testing point of view. Conceptually it seems like a really cool idea if we could separate these modes into 2 distinct HLPs (i.e. 2 distinct web SPAs):

  1. HLP that supports our ‘old user accounts’ (i.e. username-based users)
  2. HLP that supports our ‘newer user accounts’ (i.e. email & social based users)

Over time we are transitioning our username-based users to email, but we have choosen to transition our users in waves so to speak.

So again the core questions:
Q1: is this possible to do from a deployment point of view (e.g. using the auth0-deploy-cli + Auth0 Management API)?
Q2: if yes to ‘Q1’, is it possible for our applications (e.g. web SPAs & native mobile apps) to ‘distinquish’ which HLP a user should be redirected to?

Or, are we barking up the wrong tree with this idea?

4 Likes

Hi and welcome back to community,
Regarding your question, we can have two login page and show them to user on the basis of application name. you need to design 2 pages in custom login page and bind them with application name.

Hope i understand your question, Please let us know if that helps.

Hello Rashid et al:

My question regarding the possibility of creating / maintaining / hosting 2 custom Hosted Login Pages was not just “is it possible”, but also:

  • how?
    ** how are 2 deployed & maintained via the auth0-deploy-cli)?
    ** how does an app (e.g. a web SPA) specify which HLP it desires when it calls the .authorize() method of its SDK with loginParams)?
  • recommended?
    ** is this fully supported going forward so to speak, by Auth0 in terms of their continued development of the management API and app SDKs?

It’s very possible I am missing it, but I don’t see any mention of support for deploying >1 HLPs in the documentation for the auth0-deploy-cli tool

Hi @Joe_Tillotson,

You can only deploy one code base for an HLP within one Auth0 tenant.

So, you’re entire logic must be embedded into this one page. And only this one would be deployed via i.e. auth0-deploy-cli.

This could be in a way that you embed two <div>s in the page, and show/hide each respectively depending on which client application is redirecting to the HLP at the moment.

This information, such as the client id, is available in the config.clientID variable in the HLP:

var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
if (config.clientID == '....') {...}  // show/hide the respective DIV 

I think this is what @rashid779939 was referring to above.

Update: I’ve now read the initial requirements, and yes, it’s possible as described above and a common approach, done by others as well.

Thanks for this reply @mathiasconradt. I must admit though that now I am confused by your answers:

  1. You can only deploy one code base for an HLP within one Auth0 tenant.
  2. yes, it’s possible as described above and a common approach, done by others as well.

Those 2 statements sound like contradictions to me, but I am perhaps mis-interpreting them.

We have for many months now had a single HLP (in our prod tenant) that changes its personality by showing / hiding divs based on the incoming request (clientId & custom query params). What I’m asking is this (I’ll boil it down to very simple statements):

Q1: can we deploy >1 distinct HLPs via the auth0-deploy-cli?
Q2: if “yes to Q1”: can our individual web-SPA & mobile-native apps distinguish between these 2 distinct HLPs (e.g. by name?)

Again, we already have a single HLP that changes its personality dynamically, we are wondering if we can deploy & utilize 2 distinct HLPs? Thanks

Those 2 statements sound like contradictions to me, but I am perhaps mis-interpreting them.

Sorry for the confusion. Wasn’t sure if with “HLP” you meant it in a logical or physical way. Now I understand, you mean it more in the ‘physical’ way.

Q1: can we deploy >1 distinct HLPs via the auth0-deploy-cli?

No, it’s not possible.


We have for many months now had a single HLP (in our prod tenant) that changes its personality by showing / hiding divs based on the incoming request (clientId & custom query params).

Understand. ^ This is what I was referring to as the “common way” to do it and the way to go (which I was seeing as a “logical” separation). However, I understand, it reaches its limits depending on the number of different clients.

Gotcha, thanks for the clarification. I’m just glad that there is a clear answer.

1 Like