angular2-jwt: Token No Longer Being Sent

I have the 1.0.0 version of @auth0/angular-jwt installed (npm install @auth0/angular-jwt@1.0.0), as I’m on Angular 5.2, My login is setting the token, I can see it in local storage. However, when I go to post (the function is called addNote below) via http I get an auth issue and see when I inspect the request that there is no header being sent.

This was working earlier, I’m wondering if I had a different version installed. Thanks for taking a look.

here is the relevant code in my app.module.ts:


import { JwtModule } from '@auth0/angular-jwt';
import { HttpClientModule, HttpClient } from '@angular/common/http';
export function tokenGetter() {
  return localStorage.getItem('token');
}

Then in my imports:

  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
     appRoutes,
     { enableTracing: true } // <-- debugging purposes only
    ),
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        whitelistedDomains: ['localhost:3001', 'http://localhost:8080',  'https://example.herokuapp.com/' ],
        blacklistedRoutes: ['localhost:3001/auth/']
      }
    })
  ],

My auth service:


import { NgModule } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient, HttpHeaders } from '@angular/common/http';
import { JwtHelperService } from '@auth0/angular-jwt';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';


@Injectable()
export class AuthService {

helper = new JwtHelperService();

constructor(private http: HttpClient, private router: Router){}


 public isAuthenticated(): boolean {
   const token = localStorage.getItem('token');
   console.log("token:", localStorage.getItem('token'));
   return !this.helper.isTokenExpired(token);
 }


//Then we add the functions that allow users to register, authenticate, and logout
 public login(credentials) {
  console.log("login attempt", credentials);

    this.http.post('https://example.herokuapp.com/api/login', credentials).subscribe(data => {
      console.log("login attempt", data);
      if(data){
      localStorage.setItem('token', data['authToken']);
      console.log("token in ", localStorage.getItem('token'));
      this.router.navigate(['/notes']);
      }

    }, error => {
      console.log(error);
      if (error.status == 401) {
        alert("Credentials are not matching: Username or Email is not correct");
      }
      if (error.status == 400) {
        alert("Username or Email is missing");
      }

    });
  }

  public logout() {
    localStorage.removeItem('token');
  }

  public register(user) {
    this.http.post(' https://example.herokuapp.com/api/users', user).subscribe(data => {
      console.log("new user! ", user.fullname)
      if(data){
        localStorage.setItem('token', data['authToken']);
        console.log("token in ", localStorage.getItem('token'));
        this.router.navigate(['/notes']);
      }
    }, error => {
      console.log(error);
      if (error.status == 422 || error.status == 400)
        alert(error.error.message);
    });
  }

}

My request service:

import { Injectable } from "@angular/core";
import { NOTES } from "./mock-data";
import { Note } from "./models";
import { BaseService } from "./base.service";
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';


const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class NotesService {
  constructor(private http: HttpClient, private baseService: BaseService) {  }

  notesUrl = this.baseService.baseUrl + "/notes";


  getNotes():  Observable<Note[]>  {
      return this.http.get<Note[]>(this.notesUrl);
  }


 addNote (note: Note): Observable<Note> {
  return this.http.post<Note>(this.notesUrl, note, httpOptions).pipe(
    tap((note: Note) => console.log(`added note w/ id=${note.id}`),
        error => {
          if (error.status == 400)
            alert(error.error.message)
        }
    )
  );
  }


deleteNote (id: number): Observable<Note> {
    console.log("deleting", id);
    return this.http.delete<Note>(this.notesUrl + '/' + id, httpOptions).pipe(
      tap((note: Note) => console.log(`deleted note w/ id=${id}`))
    );
  }

}

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 8
  • Comments: 25

Most upvoted comments

For future reference, my problem was importing the HttpClientModule in other modules.

Solution: Only import HttpClientModule in the root module.

Setting up the whitelist domain properly for me did the trick as well.

That is, the domain only, without the https://

I had a similar problem that was an oversight on my part: just needed to whitelist the domains without a scheme (example.herokuapp.com instead of https://example.herokuapp.com).

I’m not sure it’s the same issue because I’m not following what the baseService.baseUrl is in addNote, but the imports file example has schemes in the whitelist. If a new domain was added, it’s a easy thing to stick the scheme in by accident.

Turns out my problem was also related to not configuring my domains whitelist correctly for prod builds. Make sure to check your whitelists.

@tdervilyIAD your information saved me a looooot of time.

By default the AOT can only consume static values like whitelistedDomains: [environment.myAppApiHost]. Something like whitelistedDomains: [environment.myAppApiHost.split('//')[0]] will work during development, but not after building.

I am also having this issue using the Angular CLI and building with AOT. Building without AOT seems to attach the token as expected.

I discovered that the listvalues must be lower case.

Thanks @herkulano after many hours, this was the solution

@SaraJo same problem. I had none of the issues mentioned in the comments above.