Auth0 Home Blog Docs

How to customize Lock when using the authorize endpoint?

lock
custom-ui

#1

I have successfully used Lock 10 with plain links as demonstrated here: https://auth0.com/docs/libraries/lock/v10#more-examples

I would like to add basic customization to the UI as demonstrated here: https://auth0.com/docs/libraries/lock/v10/ui-customization#primarycolor-string-

However it is not explained in the documentation how to pass options as a parameter in the URL for Lock 10 plain links.

Is something like this possible?

https://*.auth0.com/authorize?response_type=code
  &scope=openid%20profile
  &client_id=*
  &redirect_uri=https://YOUR_APP/callback
  &connection=CONNECTION_NAME
  &options= json options base64encoded

#2

When you navigate to https://*.auth0.com/authorize endpoint you’re essentially navigating to the hosted login page which means if the request requires interaction with the user in order to complete the process (for example, the user needs to input their credentials) then that interaction will be performed in accordance to the current configuration of the hosted login page.

By default the hosted login page uses Lock 10 to handle the interactivity so if you want to customize the appearance of Lock in the hosted login page you’ll need to access your Auth0 Dashboard and customize the hosted login page. In conclusion, you’ll be setting the Lock options for customization directly through the Dashboard editor and not sending them when you navigate to the authorization endpoint.

See the reference documentation on how to use and customize this page for further information.


#3