Auth0 Home Blog Docs

Invalid Token Error when building Angular 2+ Auth0 app

angular2-token

#1

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;
  }

}

#2

I’ve tried adding token refresh functionality to the app, but it has to be able to build completely and run in order to execute the token refresh. I’m able to sign in from the Auth0 dashboard to the app, but that doesn’t seem to have any effect. Still getting Invalid Token Specified.

There isn’t a token in local storage, which is strange. I can’t move on from this point, so I really need help.

Anyone?


#3

I’ve tried adding token refresh functionality to the app, but it has to be able to build completely and run in order to execute the token refresh. I’m able to sign in from the Auth0 dashboard to the app, but that doesn’t seem to have any effect. Still getting Invalid Token Specified.

There isn’t a token in local storage, which is strange. I can’t move on from this point, so I really need help.

Anyone?


#4

i’m having the same issue, using auth0.WebAuth.authorize it returns a token that is much longer that if I do manually (with postman) the login and when I use on the backend api it says Invalid token.


#5

You should both analyse your token using jwt.io.
I was facing an simular issue but was able to pinpoint it because of jwt.io


#6