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.
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.
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.
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
}