Hi, I’m attemping to implement auth0-lock into my Angular 4 web application am running into some access_token issues. When I was only using the Angular development server on :4200, I was able to authenticate and everything ran smoothly. After building the app for production and running it on my node.JS web server, it is no longer authenticating correctly.
The lock appears on auth.login() and it appears as if authentication is successful, but the application then redirects to http://localhost:8888/#/access_token
My current settings in my authentication.service.ts is:
import { Router } from '@angular/router';
import { tokenNotExpired } from 'angular2-jwt';
import { Auth0Lock } from 'auth0-lock';
(window as any).global = window;
@Injectable()
export class AuthenticationService {
// https://site.auth0.com/
auth0Options = {
theme: {
primaryColor: '#DFA612'
},
auth: {
redirectUrl: 'http://localhost:8888/',
responseType: 'token id_token',
audience: 'https://dutchesscap.auth0.com/userinfo',
params: {
scope: 'openid profile'
}
},
autoclose: true,
oidcConformant: true,
};
lock = new Auth0Lock(
'AbCdEf...',
'site.auth0.com',
this.auth0Options
);
userProfile: Object;
constructor(private router: Router) {
this.lock.on('authenticated', (authResult: any) => {
// Set userProfile attribute of already saved profile
this.userProfile = JSON.parse(localStorage.getItem('profile'));
// Add callback for lock `authenticated` event
this.lock.on("authenticated", (authResult) => {
//https://github.com/auth0/auth0.js/issues/241
localStorage.setItem('token', authResult.idToken);
var accessToken: string = authResult.accessToken;
localStorage.setItem('access_token', accessToken);
// Fetch profile information
//Use getUserInfo as getProfile is deprecated. Also need to pass in accessToken, not idToken.
this.lock.getUserInfo(accessToken, (error, profile) => {
if (error) {
// Handle error
alert(error);
return;
}
localStorage.setItem('profile', JSON.stringify(profile));
this.userProfile = profile;
});
// Redirect if there is a saved url to do so.
var redirectUrl: string = localStorage.getItem('redirect_url');
if (redirectUrl != undefined) {
this.router.navigate([redirectUrl]);
localStorage.removeItem('redirect_url');
}
});
});
}
// When called, produce the lock modal that allows authentication
login() {
this.lock.show();
}
// Remove the localStorage tokens and navigate to the survey page
logout() {
// Remove token from localStorage
localStorage.removeItem('id_token');
localStorage.removeItem('access_token');
localStorage.removeItem('profile');
this.router.navigate(['survey']);
}
// Checks if the token has expired / if it exists
isAuthenticated() {
return tokenNotExpired('id_token');
}
}```