Lock - Error following tutorial

Help
,
1

I am sorry for asking something so basic.
I already configured Auth0 login page, but now I want to use Lock to make my login page to look better (background color, icon, etc).

I installed libraries with NPM, but I’m not sure where to place the code. I pasted it into ngOnInit() from app.component.ts:

// Initiating our Auth0Lock
var lock = new Auth0Lock(
  'uBlBflc6sqa0FHLV_sScVo2j99wSTM6J',
  'leoboatjump.eu.auth0.com'
);

// Listening for the authenticated event
lock.on("authenticated", function(authResult) {
  // Use the token in authResult to getUserInfo() and save it to localStorage
  lock.getUserInfo(authResult.accessToken, function(error, profile) {
    if (error) {
      // Handle error
      return;
    }

    localStorage.setItem('accessToken', authResult.accessToken);
    localStorage.setItem('profile', JSON.stringify(profile));
  });
});

Also the rest of code from tutorial…

2

You can customize the Lock used by default in the hosted login page, you don’t need to use Lock embedded directly in the client application in order to customize it’s appearance. The Lock customization options are documented here and the process to customize the hosted login page is documented here.

If you still want to go the embedded login route then both Angular.js and Angular quickstarts have a link to a corresponding embedded login sample if you scroll all the way down in the Login step of each quickstart. The samples should give you a better idea on how to use Lock within the client application itself; although that has some constraints, hence the hosted login page would be the recommendation.

3

I have solved it:

-First, I stopped using Auth0 Basic and Auth0 Lock at same time, now I have only Lock in my code.

-Second, I used import Auth0Lock from "auth0-lock"; instead of import { Auth0Lock } from 'auth0-lock'; .

Thanks to all for your help and attention.

4

Thanks very much.

Can you tell me how to change icon?

I tried but… it didn’t change.

Thanks again.