Angular2-jwt: upgrading to @auth0/angular-jwt

[amirensit]

I am following a tutorial using angular2-jwt.
I need to update the project to use @auth0/angular-jwt.
app.module.ts

///
import {AuthConfig, AuthHttp} from 'angular2-jwt';
///
export function authHttpServiceFactory(http: Http) {
  return new AuthHttp(new AuthConfig({
    headerPrefix: 'Bearer',
    tokenName: TOKEN_NAME,
    globalHeaders: [{'Content-Type': 'application/json'}],
    noJwtError: false,
    noTokenScheme: true,
    tokenGetter: (() => localStorage.getItem(TOKEN_NAME))
  }), http);

///

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AdminComponent,
    UserComponent,
    LoginComponent
  ],
  imports: [
  ],
  providers: [
    {provide: AuthHttp, useFactory: authHttpServiceFactory, deps: [Http]},
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

and in my component:

import {Injectable} from '@angular/core';
import {AuthHttp} from 'angular2-jwt';

@Injectable()
export class AppDataService {
  constructor(private http: AuthHttp) {
  }

  getCities() {
    return this.http.get('/springjwt/cities').map(res => res.json());
  }

Any idea please ?

[caraffa]

This is my code (Excerpt, working with Angular 5+).

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports     : [
        HttpClientModule,

        // Jwt Token Injection
        JwtModule.forRoot({
            jwtOptionsProvider: {
                provide: JWT_OPTIONS,
                useFactory: jwtOptionsFactory,
                deps: [AuthService]
            }
        })
    ],
    providers   : [
        AuthService,
        AuthGuardService,
    ],
    bootstrap   : [
        AppComponent
    ]
})
export class AppModule
{
}
export function jwtOptionsFactory(authService) {
    return {
        tokenGetter: () => {
            return authService.getToken();
        },
    }
}

auth.service.ts

import { Injectable, Injector } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class AuthService
{
    constructor(
        private _http: HttpClient,
    )
    {
    }

    logIn(username: string, password: string, persist?: boolean): Observable<boolean>
    {
        persist = persist || false;
        return this._http.post<IUser>(
            WORDPRESS.baseDomain + WORDPRESS.basePath + '/jwt-auth/v1/token',
            { username: username, password: password, remember: persist }
        ).map(response  => {
            // login successful if there's a jwt token in the response
            if (response.token)
            {
                // set current user data
                this._currentUser = response;

                // store username and jwt token in local storage to keep user logged in between page refreshes
                let storage = (persist) ? localStorage : sessionStorage;
                storage.setItem('currentUser', JSON.stringify(this._currentUser));

                // return true to indicate successful login
                return true;
            }
            else
            {
                // return false to indicate failed login
                return false;
            }
        },
        error => {
            return false;
        });
    }

    logOut()
    {
        // clear token remove user from local/seesion storage to log user out
        this._currentUser = null;
        sessionStorage.removeItem('currentUser');
        localStorage.removeItem('currentUser');
        localStorage.removeItem('hideModifyTitleHint')
    }

    getToken(): string
    {
        var currentUser = this._currentUser || { token: '' };
        return this._adminAccess ? ADMIN_TOKEN : currentUser.token;
    }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you have not received a response for our team (apologies for the delay) and this is still a blocker, please reply with additional information or just a ping. Thank you for your contribution! 🙇‍♂️