How do I use Auth0.js instead of Lock in the hosted login page?

Help
,
1

Some customers want more UI customization than what’s available in Lock, so they want to use Auth0.js directly. How to do that?

2

Some customers might want to fully customize the hosted login page, ditching Lock and using their own UI to ask the user for credentials.
When doing so, make sure you use config.internalOptions to instantiate the WebAuth object:

<script src="https://cdn.auth0.com/js/auth0/8.6.1/auth0.min.js"></script>
<script>
// Decode utf8 characters properly
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));

var webAuth = new auth0.WebAuth(Object.assign({
    clientID: config.clientID,
    domain: config.auth0Domain,
    responseType: config.internalOptions.response_type ||
      config.callbackOnLocationHash ? "token" : "code"
  }, config.internalOptions));

function Login() {

  webAuth.redirect.loginWithCredentials( {
    "username": "xxx",
    "password": "xxx",
    "connection": "xxx" // you will have to do HRD manually
  });
}

The above code uses the undocumented loginWithCredentials function that calls /usernamepassword/login. This might change soon, but for now it’s the only way to properly complete the flow with the SAML protocol (when Auth0 is IdP) and to set an SSO session.
Note that we don’t support redirecting from the hosted login page to a different login page with Lock.
config.callbackOnLocationHash ? "token" : "code" is required for responseType because internalOptions.response_type does not seem to be available when doing SAML.