I have been trying to add auth0-lock widget to my angular application, it works just fine, yet when it comes to ui customization, the close button won't appear even though i've added option closable: true. here's my code:
import {Auth0Lock} from 'auth0-lock'
constructor(private router: Router, private cookie: CookieService, private http: HttpClient){
this.lock.on("authenticated", (authResult: any) => {
this.lock.getProfile(authResult.accessToken, async (error: any, profile: any) => {
if (error) throw new Error('error');
// code
});
});
}
auth0Options = {
closable: true,
theme: {
primaryColor: '#DFA612'
},
auth: {
redirectUrl: environment.auth0.callbackURL,
responseType: 'token id_token',
audience: `https://${environment.auth0.domain}/userinfo`,
params: {
scope: 'openid profile email'
}
},
autoclose: true
};
lock = new Auth0Lock(
environment.auth0.clientId,
environment.auth0.domain,
this.auth0Options
)
login(){
this.lock.show()
}
logout(){
this.lock.logout();
//code
}
Any help please? thank you in advance.
PS: Everything works just fine, my only problem that it's not closable.
there was a problem about style, i had to overwrite the close button css class which is .auth0-lock-close-button
and set its z-index
to a higher value.