Auth0 Home Blog Docs

Theming Options for React Lock v10

lock-10
react

#1

I am sorry if this is a stupid question but I cannot seem to get this right…

I am using the 01-login project provided by Auth0 (https://github.com/auth0-samples/auth0-react-samples) . No matter what I try, I cannot seem to change anything about the themes. For a simple example I was just string change the title, so in the Auth.js file my constructor looks like the same code below and does not work. Where do you initialized the Lock v10 options?

export default class Auth {
  auth0 = new auth0.WebAuth({
    domain: AUTH_CONFIG.domain,
    clientID: AUTH_CONFIG.clientId,
    redirectUri: AUTH_CONFIG.callbackUrl,
    audience: `https://${AUTH_CONFIG.domain}/userinfo`,
    responseType: 'token id_token',
    scope: 'openid',
   options: {
      languageDictionary: {
          title: ''
        }
  }
  });

#2

The linked login sample makes use of Auth0.js authorize method which means the end-user authentication will be processed through the hosted login page which is the recommended option.

Be default, the hosted login page uses Lock 10 as the interface available for end-user authentication, however, you can customize either just Lock or the complete page itself (use a custom credentials form without Lock).

In order to customize the hosted login page you need go through the Dashboard because any Lock customization options you try to pass from the client itself won’t have any effect.

In conclusion, the languageDictionary you’re trying to use should be specified in the hosted login page customization and not directly in the client application itself.


#3

Awesome, so this gets me half way there! I have changed the Hosted Page to support the extra params I am going to pass in but where in the client code that I am writing do I send in those query string parts? I looked in the documentation and cannot find it. It is not something I can pass in the WebAuth constructor. If I add it to the domain param I break everything… What am I missing?


#4

Awesome, so this gets me half way there! I have changed the Hosted Page to support the extra params I am going to pass in but where in the client code that I am writing do I send in those query string parts? I looked in the documentation and cannot find it. It is not something I can pass in the WebAuth constructor. If I add it to the domain param I break everything… What am I missing?


#5

Awesome, so this gets me half way there! I have changed the Hosted Page to support the extra params I am going to pass in but where in the client code that I am writing do I send in those query string parts? I looked in the documentation and cannot find it. It is not something I can pass in the WebAuth constructor. If I add it to the domain param I break everything… What am I missing?


#6