I suddenly started getting this error when I try to npm start and build the Angular 2+ Auth0 app. I’ve looked in local storage and there is no token there currently. It was logging in/out fine while I was working on the mobile nav and it seems the token expired? I’m not sure how to proceed, and internet + issue searches haven’t yielded any help so far. Here is the error:
AppComponent_Host.html:1 ERROR InvalidTokenError {message: "Invalid token specified", ngDebugContext: DebugContext_, __zone_symbol__currentTask: ZoneTask, ngErrorLogger: ƒ}
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ compiler.es5.js:14971
DebugContext_.logError @ core.es5.js:13415
ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4409
webpackJsonp.1461.ZoneDelegate.invoke @ zone.js:392
webpackJsonp.1461.Zone.run @ zone.js:142
NgZone.runOutsideAngular @ core.es5.js:3844
(anonymous) @ core.es5.js:4409
webpackJsonp.1461.ZoneDelegate.invoke @ zone.js:392
onInvoke @ core.es5.js:3890
webpackJsonp.1461.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.1461.Zone.run @ zone.js:142
(anonymous) @ zone.js:844
webpackJsonp.1461.ZoneDelegate.invokeTask @ zone.js:425
onInvokeTask @ core.es5.js:3881
webpackJsonp.1461.ZoneDelegate.invokeTask @ zone.js:424
webpackJsonp.1461.Zone.runTask @ zone.js:192
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
webpackJsonp.1461.ZoneDelegate.scheduleTask @ zone.js:414
webpackJsonp.1461.Zone.scheduleTask @ zone.js:236
webpackJsonp.1461.Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:842
ZoneAwarePromise.then @ zone.js:932
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef_.bootstrapModule @ core.es5.js:4522
736 @ main.ts:11
__webpack_require__ @ bootstrap 80ec8132db2d6e0aedfd:52
1465 @ main.bundle.js:507
__webpack_require__ @ bootstrap 80ec8132db2d6e0aedfd:52
webpackJsonpCallback @ bootstrap 80ec8132db2d6e0aedfd:23
(anonymous) @ main.bundle.js:1
AppComponent_Host.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ compiler.es5.js:14971
DebugContext_.logError @ core.es5.js:13415
ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:4409
webpackJsonp.1461.ZoneDelegate.invoke @ zone.js:392
webpackJsonp.1461.Zone.run @ zone.js:142
NgZone.runOutsideAngular @ core.es5.js:3844
(anonymous) @ core.es5.js:4409
webpackJsonp.1461.ZoneDelegate.invoke @ zone.js:392
onInvoke @ core.es5.js:3890
webpackJsonp.1461.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.1461.Zone.run @ zone.js:142
(anonymous) @ zone.js:844
webpackJsonp.1461.ZoneDelegate.invokeTask @ zone.js:425
onInvokeTask @ core.es5.js:3881
webpackJsonp.1461.ZoneDelegate.invokeTask @ zone.js:424
webpackJsonp.1461.Zone.runTask @ zone.js:192
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
webpackJsonp.1461.ZoneDelegate.scheduleTask @ zone.js:414
webpackJsonp.1461.Zone.scheduleTask @ zone.js:236
webpackJsonp.1461.Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:842
ZoneAwarePromise.then @ zone.js:932
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef_.bootstrapModule @ core.es5.js:4522
736 @ main.ts:11
__webpack_require__ @ bootstrap 80ec8132db2d6e0aedfd:52
1465 @ main.bundle.js:507
__webpack_require__ @ bootstrap 80ec8132db2d6e0aedfd:52
webpackJsonpCallback @ bootstrap 80ec8132db2d6e0aedfd:23
(anonymous) @ main.bundle.js:1
zone.js:661 Unhandled Promise rejection: Invalid token specified ; Zone: <root> ; Task: Promise.then ; Value: InvalidTokenError {message: "Invalid token specified", ngDebugContext: DebugContext_, __zone_symbol__currentTask: ZoneTask, ngErrorLogger: ƒ} InvalidTokenError
at Object.<anonymous> (http://localhost:4200/vendor.bundle.js:59288:31)
at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
at Object.751 (http://localhost:4200/main.bundle.js:10512:69)
at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
at Object.752 (http://localhost:4200/main.bundle.js:10584:74)
at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
at Object.736 (http://localhost:4200/main.bundle.js:10492:74)
at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
at Object.1465 (http://localhost:4200/main.bundle.js:507:18)
at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
Here is my auth.service.ts file:
import { Injectable } from '@angular/core';
import { AUTH_CONFIG } from './auth0-variables';
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import * as auth0 from 'auth0-js';
@Injectable()
export class AuthService {
auth0 = new auth0.WebAuth({
clientID: AUTH_CONFIG.clientID,
domain: AUTH_CONFIG.domain,
responseType: 'token id_token',
audience: `https://${AUTH_CONFIG.domain}/userinfo`,
redirectUri: AUTH_CONFIG.callbackURL,
scope: 'openid profile'
});
userProfile: any;
constructor(public router: Router) {}
public login(): void {
this.auth0.authorize();
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
window.location.hash = '';
this.setSession(authResult);
this.router.navigate('/home']);
} else if (err) {
this.router.navigate('/home']);
console.log(err);
alert(`Error: ${err.error}. Check the console for further details.`);
}
});
}
public getProfile(cb): void {
const accessToken = localStorage.getItem('access_token');
if (!accessToken) {
throw new Error('Access token must exist to fetch profile');
}
const self = this;
this.auth0.client.userInfo(accessToken, (err, profile) => {
if (profile) {
self.userProfile = profile;
}
cb(err, profile);
});
}
private setSession(authResult): void {
// Set the time that the access token will expire at
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
localStorage.setItem('access_token', authResult.accessToken);
localStorage.setItem('id_token', authResult.idToken);
localStorage.setItem('expires_at', expiresAt);
}
public logout(): void {
// Remove tokens and expiry time from localStorage
localStorage.removeItem('access_token');
localStorage.removeItem('id_token');
localStorage.removeItem('expires_at');
// Go back to the home route
this.router.navigate('/']);
}
public isAuthenticated(): boolean {
// Check whether the current time is past the
// access token's expiry time
const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
return new Date().getTime() < expiresAt;
}
}