Angular 5 Support

Getting the following warning when upgrading to Angular 5.0.0

npm WARN angular2-jwt@0.2.3 requires a peer of @angular/core@^2.0.0||^4.0.0 but none was installed.
npm WARN angular2-jwt@0.2.3 requires a peer of @angular/http@^2.0.0||^4.0.0 but none was installed.

[Lakston]

In my app.module :

import { JwtModule } from '@auth0/angular-jwt'

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    // ...
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return localStorage.getItem('access_token');
        },
        whitelistedDomains: ['you API url']
      }
    })
  ]
})

In authentication.service.ts

import { JwtHelperService } from '@auth0/angular-jwt'

@Injectable()
export class AuthenticationService {
  constructor(private http: HttpClient, private jwtHelperService: JwtHelperService) {}

  loggedIn() {
    const token: string = this.jwtHelperService.tokenGetter()

    if (!token) {
      return false
    }

    const tokenExpired: boolean = this.jwtHelperService.isTokenExpired(token)

    return !tokenExpired
  }

... other methods such as reset password etc...
}

In the auth-guard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthenticationService } from '../authentication/authentication.service';

@Injectable()
export class AuthGuard implements CanActivate {
  
  constructor(
    private auth: AuthenticationService,
    private router: Router,
  ) {}

  canActivate(): boolean {
    if (this.auth.loggedIn()) {
      return true;
    }  else {
      localStorage.removeItem('token');
      this.router.navigateByUrl('/login');
      return false;
    }
  }
}

and in the app.routing.ts we have a canActivate: [AuthGuard]

Hope that helps 😃

[rhino5oh]

So, I just came across this. Only place I’ve ever seen it:

Taken from the top of this page: https://auth0.com/blog/introducing-angular2-jwt-a-library-for-angular2-authentication/

apparently angular2-jwt is deprecated and auth0 did a pretty terrible job of letting users know that. If you follow this tutorial: https://auth0.com/blog/real-world-angular-series-part-1/ and look at its source code on github, you can see how they use JWTs without this library. I’m going to take a stab at removing angular2-jwt from my code and see if I can get it working with the new HttpClient