How do I find the Connection options for an App using Auth0.js

[justinboyd]

I am modifying the Login Page using custom HTML. This means that I cannot use lock.js . However, I want to implement some of the features in a similar fashion. Specifically

• The login page should change based on what connections are available to an application.
• The login page should change based on the domain being used in the email i.e. is it an AD Account.

on lock.js, there is a call made to https://cdn.au.auth0.com/client/.js?t1577772523532

this returns information about the client, this includes the variable data such as domains and connection types that are available.

This is not the case in auth0.js. All I can see at this stage is @@config@@ as an option. This doesn’t include that richer data.

What is the best way to get that data for a custom login page?

[dan.woda]

@justinboyd

• The login page should change based on what connections are available to an application.
• The login page should change based on the domain being used in the email i.e. is it an AD Account.

These are built in features to lock, but I cannot find a direct way to do this from the auth0.js library. I have seen it recommended that you would build these features out by keeping a list of the domains and connections in the application. To do this dynamically, you would need to request that info from the management API, and you cannot do this from a client side app, meaning you would need to send this info from your backend or API. Since connections and domains are fairly static it may just be easier to set this info manually.

Home Realm Discovery using Auth0.js

We’re using Auth0.js to create a custom login page for our web app, not using Lock. At the moment, users log in by either entering their username and password or via a social provider. We’re looking to expand this to support enterprise connections as well. My understanding is that when using the Lock, it will ask the user for their email, and select the correct connection based on matching the email address to that configured under the specific connection (home realm discovery). I was wonderin…

Hope this helps!

Thanks,
Dan

[justinboyd]

hmm thats disappointing,
I was hoping to have my hosted authentication provider completely hosted by auth0. Adding in either an API or managing the connections manually is a lot of effort. we have upward of 15 apps all with different connection preferences.

Any reason why the /client/.js is not a documented api? This has all the HRD data in it.
The only issue I currently have is that it might get stuck in a COORS policy request.

[justinboyd]

So I had a look at it in more detail, if you have JQuery on your page it is fairly simple.
Would be great to see this in Auth0.js

<script>
    class Auth0 {}
      Auth0.getClient = function(auth0Hosted = true)
      {
        var config = {};
        //Make auth0Hosted = false for local testing.
        this.auth0Hosted = auth0Hosted;
        if (auth0Hosted) {
          this.config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
        } else {
          // for local testing.
          this.config = {
          //local test config data
            }
          };
        }
        console.log(config);
      //Get Home Realm Data
      $.getScript(`https://cdn.au.auth0.com/client/${this.config.clientID}.js`,
      function(response,status){
        console.log(response);
        console.log(status);
      });
      }

      Auth0.setClient = function(homeRealm){
        console.log(homeRealm);
        this.homeRealm = homeRealm;
//emit an event that you can use in your main render.
        $(document).trigger("config",[this.config,homeRealm]);
      }
  </script>

  <script>
    $(document).ready(function () {
      Auth0.getClient();
    });
    $(document).on("config",function(event,config,homeRealm){
//this function now has access to all the config and homeRelm data
}

[dan.woda]

@justinboyd,

Thanks for posting your solution!