Auth0: The customize lock screen kept popping up (AngularJs)

Question

I downloaded the auth0 quick-start project, AngularJs SPA, to start my application from https://github.com/auth0-samples/auth0-angularjs-samples/tree/master/01-Login. It works fine without any issue.

However, when I follow the instruction from https://auth0.com/docs/libraries/lock/v11/ui-customization to customize my lock UI, the first time the lock UI appears, but afterward, the lock dialog kept appearing. Below is my code snipped:

function run(authService) {
    // Handle the authentication
      // result in the hash
      debugger;
      // Initializing our Auth0Lock
      var options = {
          theme: {
              logo: 'assets/images/cat.png',
              primaryColor: "#0077be"
          },
          languageDictionary: {
              title: "Log in"
          },
          auth: {
              redirectUrl: 'http://localhost:23321/#/callback'
          }
      }
      var lock = new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN, options);
      lock.show();

     // original code from quickstart
      authService.handleAuthentication();
  }

I tried to place the options in the login function in authService.js, but it still not working. I tried to comments out the lock.show(), then the standard lock UI appears instead. Could anyone here please help? Thank you very much !

Answer 1

The Sample uses Hosted login pages by default. To change the Lock UI in hosted pages, you need to apply the UI configurations in your hosted pages instead rather than in the Application code.

If you are using Lock in embedded mode, i.e there is no redirect to Auth0 Authorization endpoint /authorize, you would then need to modify the Lock configuration from within the Application itself.