serhiisol/ngx-auth

Angular 16+ Authentication Module

ngx-auth's Issues

ERROR in node_modules/ngx-auth/auth.module.d.ts

`0% compiling
Compiling ngx-auth : es2015 as esm2015

Date: 2020-02-27T11:38:51.911Z - Hash: ff00e8a5c9dc3162e009
6 unchanged chunks

Time: 3082ms

ERROR in Cannot read property 'push' of undefined

ERROR in node_modules/ngx-auth/auth.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AuthenticationModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-auth) which declares AuthModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
1 export declare class AuthModule {
                       ~~~~~~~~~~
src/app/authentication/authentication.module.ts:31:14 - error NG6002: Appears in the NgModule.imports of CoreModule, but itself has errors
31 export class AuthenticationModule {
                ~~~~~~~~~~~~~~~~~~~~
src/app/core/core.module.ts:28:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors
28 export class CoreModule {

`

`$ ng version

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 9.0.3
Node: 10.15.2
OS: linux x64

Angular: 9.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.900.3
@angular-devkit/build-angular 0.900.3
@angular-devkit/build-optimizer 0.900.3
@angular-devkit/build-webpack 0.900.3
@angular-devkit/core 9.0.3
@angular-devkit/schematics 9.0.3
@angular/cdk 9.1.0
@angular/material 9.1.0
@ngtools/webpack 9.0.3
@schematics/angular 9.0.3
@schematics/update 0.900.3
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2

`

How to sign-in?

How to sign-in?
is there an example?

verifyRefreshToken receiving wrong parameter

The method verifyRefreshToken in AuthService is expecting an object of type HttpRequest

ngx-auth/src/auth.service.ts

Line 41 in ee237f2

public abstract verifyRefreshToken?(request: HttpRequest<any>): boolean;

However, the interceptor is passing the request url sting

ngx-auth/src/auth.interceptor.ts

Lines 169 to 180 in ee237f2

	/**
	* Checks if request must be skipped by interceptor.
	*/
	private skipRequest(req: HttpRequest<any>) {
	const skipRequest = this.exec('skipRequest', req);
	const verifyRefreshToken = this.exec('verifyRefreshToken', req.url);
	// deprecated, will be removed soon
	const verifyTokenRequest = this.exec('verifyTokenRequest', req.url);
	return skipRequest || verifyRefreshToken || verifyTokenRequest;
	}

what ends up in the awful error

"Cannot read property 'endsWith' of undefined"

Rights management can be a usefull feature for this lib

In the auth service, if you pass the route or an object with some informations from the guard, we should be able to implements some rights management.

If you add this hability to your lib, you can be able to be a great angular library ! ;)

So I will implement this feature on my side, a if I have something with a great quality like the rest of your code, i will send you a PR

response 401 does not call refresh Token routes

Hi there, I'm sorry for posting this here, but I am desperate. I have added ngx-auth to my project. It used to work perfectly before.

Now it does not call refresh token if the status code is 401.
authentication.service.ts

import { configuration }                    from '../../../environments/.env';
import { HttpClient, HttpErrorResponse }    from '@angular/common/http';
import { Observable }                       from 'rxjs/Observable';
import { TokenService }                     from './token.service';
import { Injectable }                       from '@angular/core';
import { Token }                            from './token.model';
import { Http, Response }                   from '@angular/http';
import { AuthService }                      from 'ngx-auth';
import { Router }                           from '@angular/router';

@Injectable()

export class AuthenticationService implements AuthService {

  serverUrl = configuration.API_BASE_URL;

  constructor(
    private http: HttpClient,
    private _http: Http,
    private tokenService: TokenService,
    private router: Router
  ) { }

  /**
   * Check, if user already authorized.
   * @description Should return Observable with true or false values
   * @returns {Observable<boolean>}
   * @memberOf AuthService
   */
  public isAuthorized(): Observable<boolean> {
    return Observable.of(this.tokenService.getToken() != null);
  }

  /**
   * Get access token
   * @description Should return access token in Observable from e.g.
   * localStorage
   * @returns {Observable<string>}
   */
  public getAccessToken(): Observable<string> {
    return this.tokenService.getAccessToken();
  }

  /**
   * Function, that should perform refresh token verifyTokenRequest
   * @description Should be successfully completed so interceptor
   * can execute pending requests or retry original one
   * @returns {Observable<any>}
   */
  public refreshToken(): Observable<Token> {
    return this.tokenService
      .getRefreshToken()
      .switchMap((refreshToken: string) => {
        return this.http.post(`http://localhost:3000/refresh`, { refreshToken });
      })
      .do(this.tokenService.setToken.bind(this))
      .catch((err) => {
        this.router.navigate(['/logout']);
      });
  }

  /**
   * Function, checks response of failed request to determine,
   * whether token be refreshed or not.
   * @description Essentialy checks status
   * @param {Response} response
   * @returns {boolean}
   */
  public refreshShouldHappen(response: HttpErrorResponse): boolean {
    return response.status === 401
  }

  /**
   * Verify that outgoing request is refresh-token,
   * so interceptor won't intercept this request
   * @param {string} url
   * @returns {boolean}
   */
  public verifyTokenRequest(url: string): boolean {
    return url.endsWith('/refresh');
  }

  getImpersonateToken(): string {
    return localStorage.getItem('impersonateToken');
  }

  login(email: string, password: string, rememberMe: boolean): Observable <Token> {
    let url = this.serverUrl + "/login";
    return this._http
      .post(url, { email: email, password: password, rememberMe: rememberMe })
      .map((response: Response) => {
        return <Token>response.json();
      })
      .catch(err => {
        
        return Observable.throw(err);
      });
  }

  public logout() {
    let url = this.serverUrl + "/logout";
    return this.http
      .post(url, {})
      .catch(this.handleError);
  }

  register(user: any): Observable<any> {
    let url = this.serverUrl + '/user/register';
    return this.http
      .post(url, user)
      .catch(this.handleError);
  }

  resendSecurityCode(): Observable<any> {
    let url = this.serverUrl + "/resendTsaCode";
    return this.http
      .post(url, {})
      .catch(this.handleError);
  }

  submitSecurityCode(typedCode): Observable <Token> {
    let url = this.serverUrl + "/tsaCode";
    return this.http
      .post(url, { code: typedCode })
      .catch(err => {
        return Observable.throw(err);
      });
  }
  saveDevice(): Observable <any> {
    let url = this.serverUrl + "/trusted-device";
    return this.http
      .post(url, {})
      .catch(err => {
      return Observable.throw(err);
    });
  }

  forgetPasswordRequest(email: string): Observable<any> {
    let url = this.serverUrl + "/forgotPassword";
    return this.http
      .post(url, {email: email})
      .catch(this.handleError);
  }

  checkForgotPasswordToken(token: string): Observable<any> {
    let url = this.serverUrl + "/checkForgotPasswordToken/"+token;
    return this.http
        .get(url)
        .catch(err => {
            return Observable.throw(err);
        });
  }

  resetPasswordWithToken(token: string, data: Object): Observable<any> {
    let url = this.serverUrl + "/resetPassword/" + token;
    return this._http
        .post(url, data)
        .catch(this.handleError);
  }

  changeTSASettings(value: boolean): Observable<any> {
    return this.http
      .post(`${this.serverUrl}/change-tsa`, {value: value})
      .catch(this.handleError);
  }

  checkTSASettings(): Observable<any> {
    return this.http
      .get(`${this.serverUrl}/check-tsa`)
      .catch(this.handleError);
  }

  public getHeaders(token: string): { [name: string]: string | string[] } {
    if (this.getImpersonateToken() !== null) {
      return {
        'Authorization': `Bearer ${this.getImpersonateToken()}`
      }
    } else {
      return {
        'Authorization': `Bearer ${token}`
      }
    }
    
  }

  private handleError(error: any) {
      if(error instanceof HttpErrorResponse) {
          return Observable.throw({status: error.status, text: error.error.message, _body: error.error.message} || {status: error.status, text: "Server error"});
      }
      return Observable.throw(error || 'server error');
  }
}

Authentication.module.ts

import { NgModule } from '@angular/core';
import {
  AuthModule,
  AUTH_SERVICE,
  PUBLIC_FALLBACK_PAGE_URI,
  PROTECTED_FALLBACK_PAGE_URI
} from 'ngx-auth';

import { TokenService } from './token.service';
import { AuthenticationService } from './authentication.service';

export function factory(authenticationService: AuthenticationService) {
  return authenticationService;
}

@NgModule({
  imports: [AuthModule],
  providers: [
    TokenService,
    AuthenticationService,
    { provide: PROTECTED_FALLBACK_PAGE_URI, useValue: '/' },
    { provide: PUBLIC_FALLBACK_PAGE_URI, useValue: '/login' },
    {
      provide: AUTH_SERVICE,
      deps: [AuthenticationService],
      useFactory: factory
    }
  ]
})
export class AuthenticationModule {

}

Your help will be appreciate it.

Authorization: 'Bearer ' does not add to http

user.service.ts

import { Injectable } from "@angular/core";
import { Http, Headers, RequestOptions, Response } from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";
import "rxjs/add/operator/do";
import "rxjs/add/operator/toPromise";
import { configuration } from "../../../../environments/.env";
import { User } from "./user";
import { UserWhere } from "./user-where";
import * as _ from "underscore";
import { AuthorizedHttp } from "../authentication/authorizedHttp.service";
import { Observable } from 'rxjs/Rx';
import { TokenService } from './../authentication/token.service';
import { Token } from './../authentication/token.model';
import { share } from "rxjs/operator/share";
import { HttpClient } from "@angular/common/http";


@Injectable()
export class UserService {
  token: Token;
  serverUrl = configuration.API_BASE_URL;
  constructor(
    private authHttp: HttpClient,
    private http: Http,
    private tokenService: TokenService
  ) {
    this.token = this.tokenService.getToken();
  }
  getUsersPage(
    page: number,
    perPage: number,
    where: UserWhere
  ): Observable<User[]> {

    const start: number = (page - 1) * perPage;
    let whereStr: string = this.makeWhereStrForList(where);
    let filterStr: string = `{"limit": ${perPage}, "skip": ${start}${whereStr
      ? ", " + whereStr
      : ""}}`;
    let url = `${this.serverUrl}/user/admin?filter=${filterStr}`;
    return this.authHttp
      .get(url)
      .share()
      
      .catch(this.handleError);
  }

It keeps refreshing.

Private guard remember URL

Hi,

the library is super, thank you for supporting this!

Question: is it possible to remember the URL that was attempted to be loaded and redirect to this URL after user logs in without extending / replacing the original ProtectedGuard?

This is dumb, but quite an important feature; it is even available in Angular guides: https://angular.io/guide/router#teach-authguard-to-authenticate

Use without refresh token

Hi,
is it possible to use library without refresh token? I have only 1 token (access token) and I want get to know when token expired so get 401 and when user typed wrong credentials.

Security conciderations

Hey,

just learned from a talk that tokens should not be stored in the browser. Therefore the example on README using localStorage is a bad practice...

There is an official statement by auth0:
https://auth0.com/docs/security/store-tokens#don-t-store-tokens-in-local-storage

At this moment I don't have a perfect solution, so I ask the community to find something.

This issue is not about blaming, I love this project.

Feature: add ability to check request if it has to have auth token

The idea here is to pass url or complete request to getHeaders method of AuthService so it can validate the request and decide whether it has to have token header. See https://github.com/serhiisol/ngx-auth/blob/master/src/auth.service.ts#L54 for a reference

invalid login details bug

while invalid credentials it also called refreshToken while login.

this.tokenStorage.getRefreshToken

same useValue

{ provide: PROTECTED_FALLBACK_PAGE_URI, useValue: '/' },
 { provide: PUBLIC_FALLBACK_PAGE_URI, useValue: '/login' },
{
    path: '',
    canActivate: [ ProtectedGuard ],
    loadChildren: './components/protected/protected.module#ProtectedModule'
  },
  {
    path: 'login',
    canActivate: [ PublicGuard ],
    loadChildren: './components/public/public.module#PublicModule'
  },

to

{ provide: PROTECTED_FALLBACK_PAGE_URI, useValue: '/' },
 { provide: PUBLIC_FALLBACK_PAGE_URI, useValue: '/' },

{
    path: '',
    canActivate: [ ProtectedGuard ],
    loadChildren: './components/protected/protected.module#ProtectedModule'
  },
  {
    path: '',
    canActivate: [ PublicGuard ],
    loadChildren: './components/public/public.module#PublicModule'
  },

it is not work?

accessToken does not save in localstorage

Hi,
Response:

Authentication.service.ts

  public saveAccessData({ accessToken, refreshToken }: AccessData) {
    this.tokenService
      .setToken(accessToken)
      .setRefreshToken(refreshToken);
  }

  public setToken(token: string) {
    localStorage.setItem("accessToken", token);
  }

  public getItem() {
    return localStorage.getItem("deviceInfo");
  }


  onLogin(email: string, password: string, rememberMe: boolean): Observable<any> {
    let url = this.serverUrl + "/login";
    return this.http.post(url, { email: email, password: password, rememberMe: rememberMe })
      .do((tokens: AccessData) => {
        this.saveAccessData(tokens)
      })
      .catch(err => {
        return Observable.throw(err);
      });
  }

localstorage:

Error While Compiling --prod

`import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Router } from '@angular/router';
import { LaravelService } from './laravel.service';
import { AuthService } from 'ng4-auth';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthenticationService {

laravelResponse: any;

constructor(
private http: Http,
private router: Router,
private laravel: LaravelService
) { }

login(accessToken: string, refreshToken: string) {
localStorage.setItem('accessToken', accessToken);
localStorage.setItem('refreshToken', refreshToken);

}

isAuthorized(): Observable {
const isAuthorized: boolean = !!localStorage.getItem('accessToken');
return Observable.of(isAuthorized);
}

logout(): void {
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
location.reload(true);
}

getAccessToken(): Observable {
const accessToken: string = localStorage.getItem('accessToken');
return Observable.of(accessToken);
}

refreshToken(): Observable {
const refreshToken: string = localStorage.getItem('refreshToken');
return this.laravel.do_token_refresh(refreshToken);
}

refreshShouldHappen(response: Response): boolean {
return response.status === 401;
}

isRefreshTokenRequest(url: string): boolean {
return url.endsWith('refresh-token');
}

}
`
Using angular 4 created using cli. can anyone solve it.? in serve mode, everything looks fine and works normally. but while using ng build --prod , above mentioned error appears on console.

Angular 16 compatibility

Since Angular 16, View Engine libraries are incompatible, will you release a new version compatible with the Ivy engine?

Refreshing on 401 error

When a request is made and returns an error (like 401) the authentication is destroyed and the app refreshes and I can not see the error on the console because of that

ngcc Processing legacy "View Engine"

Hello, on ngx-logger 5.4.0 i have these logs went i do ngcc on my projet with angular v14

Processing legacy "View Engine" libraries:
- ngx-auth [fesm2015/esm2015] (https://github.com/serhiisol/ngx-auth)
- ngx-auth [fesm5/esm5] (https://github.com/serhiisol/ngx-auth)
- ngx-auth [esm2015/esm2015] (https://github.com/serhiisol/ngx-auth)
- ngx-auth [esm5/esm5] (https://github.com/serhiisol/ngx-auth)
- ngx-auth [main/umd] (https://github.com/serhiisol/ngx-auth)
Encourage the library authors to publish an Ivy distribution.

it's not an issue now, but it can be an improvement :)

Guards with CanLoad support

It'd be great if both ProtectedGuard and PublicGuard implemented CanLoad interface, so we could use them also with lazy loaded modules. What do you think?

How to make https request.

How to make https request if the URL is https.

JWT auth

hi I can`t get how I need to overwrite

private getHeaders?(token: string): { [name: string]: string | string[]; };

to use JWT instead of Bearer , can someone help

PublicGuard and ProtectedGuard

Hi,

Is it possible to use PublicGuard and ProtectedGuard for the same url? For even after logging in, the user can also access the public screens and this code not work:

{
        path:'user',
        canActivate: [ PublicGuard, ProtectedGuard ],
        component: LoginComponent
}

When trying to access the url user, nothing happens to the user logged.

I need a same screen can be accessed with the logged in user and also be accessed when the user is not yet logged in.

Does it handle token expiration?

What if JWT token expired, what will happen?

How to call refresh token from client side.

Now, it calls when the response of server is 401. What if it checks the token expiration and requests the refresh token before other requests in the client side?

I have implemented server side, and I want to implement the client side as well. I already have the function inside to check the expiration. it returns true or false.

Angular 7 build

Hi,

When performing a production build (ng build --prod) using Angular 7 I get the following errors:

ERROR in ./node_modules/ngx-auth/esm5/ngx-auth.js Module not found: Error: Can't resolve 'rxjs/Subject' in '\node_modules\ngx-auth\esm5' ERROR in ./node_modules/ngx-auth/esm5/ngx-auth.js Module not found: Error: Can't resolve 'rxjs/observable/throw' in '\node_modules\ngx-auth\esm5' ERROR in ./node_modules/ngx-auth/esm5/ngx-auth.js Module not found: Error: Can't resolve 'rxjs/operator/catch' in '\node_modules\ngx-auth\esm5' ERROR in ./node_modules/ngx-auth/esm5/ngx-auth.js Module not found: Error: Can't resolve 'rxjs/operator/first' in '\node_modules\ngx-auth\esm5' ERROR in ./node_modules/ngx-auth/esm5/ngx-auth.js Module not found: Error: Can't resolve 'rxjs/operator/map' in '\node_modules\ngx-auth\esm5' ERROR in ./node_modules/ngx-auth/esm5/ngx-auth.js Module not found: Error: Can't resolve 'rxjs/operator/switchMap' in '\node_modules\ngx-auth\esm5' ERROR in chunk main [initial] [name].[chunkhash:20].js \node_modules\@angular-devkit\build-optimizer\src\build-optimizer\webpack-loader.js??ref--17-0!\node_modules\@ngtools\webpack\src\index.js!\src\main.ts d43ecfaacdbac9efba5a77e422e96789 Unexpected token (104:34) | this.injector = injector; | this.refreshInProgress = false; | this.refreshSubject = new !(function webpackMissingModule() { var e = new Error("Cannot find module \"rxjs/Subject\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())(); | } | AuthInterceptor.prototype.intercept = function (req, delegate) {

Angular V5 compatibility ?

When i do a "yarn start" of my application or of your example app with angular v5.0.1 and angular cli 1.5.0 (and rxjs 5.5.2 for angular 5) i've got this issue :

ERROR in ./node_modules/ngx-auth/index.ts
Module build failed: Error: C:\Users\julien\ngx-auth-example\node_modules\ngx-auth\index.ts is not part of the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (C:\Users\julien\ngx-auth-example\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)
    at plugin.done.then (C:\Users\julien\ngx-auth-example\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/app-routing.module.ts 9:0-55
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

I think, angular-cli doesn't compile TS files in node_modules anymore and before, it was a mistake :
angular/angular-cli#8284

So you can use somethink like this to fix that => https://github.com/dherges/ng-packagr

Unable to integrate with Spring Boot: getting "_a is null" and no tokens.

I posted about a problem I'm having with integration on StackOverflow. I wanted to file an issue here as well to see if we can find the solution.

TL;DR version:

I've written an AuthenticationService class for my Angular app that talks to my backend Spring Boot REST server. Authentication is working correctly in Java, and the JWT token is being returned in the response headers.

However, when the login method (which uses code from the examples on the ngx-auth website) gets the response, there are no access tokens present; i.e., there doesn't seem to be anything from the ngx-auth library intercepting or interpreting the headers and extracting the token.

Can you please advise what's potentially the problem? Here is a link to the task branch on which I'm working to try and integrate the two.

ERROR TypeError: Cannot read property 'pipe' of undefined

I have implemented Angular Universal on my existing project. when I run build:ssr and run server: ssr, but if I run ng serve --open it works find.
I receive this error.

ERROR TypeError: Cannot read property 'pipe' of undefined
    at AuthInterceptor.addToken (/home/razmjo/workstation/jobsaf-website/web/server.js:362410:13)
    at AuthInterceptor.request (/home/razmjo/workstation/jobsaf-website/web/server.js:362384:21)
    at AuthInterceptor.processIntercept (/home/razmjo/workstation/jobsaf-website/web/server.js:362377:21)
    at AuthInterceptor.intercept (/home/razmjo/workstation/jobsaf-website/web/server.js:362372:21)
    at HttpInterceptorHandler.handle (/home/razmjo/workstation/jobsaf-website/web/server.js:46887:33)
    at HttpXsrfInterceptor.intercept (/home/razmjo/workstation/jobsaf-website/web/server.js:47478:25)
    at HttpInterceptorHandler.handle (/home/razmjo/workstation/jobsaf-website/web/server.js:46887:33)
    at HttpInterceptingHandler.handle (/home/razmjo/workstation/jobsaf-website/web/server.js:47522:27)
    at ZoneClientBackend.delegate (/home/razmjo/workstation/jobsaf-website/web/server.js:4049:29)
    at scheduleTask (/home/razmjo/workstation/jobsaf-website/web/server.js:3954:38)
    at Observable._subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:3993:13)
    at Observable._trySubscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32656:25)
    at Observable.subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32642:22)
    at /home/razmjo/workstation/jobsaf-website/web/server.js:36010:31
    at subscribeToResult (/home/razmjo/workstation/jobsaf-website/web/server.js:35929:84)
    at MergeMapSubscriber._innerSub (/home/razmjo/workstation/jobsaf-website/web/server.js:36549:90)
    at MergeMapSubscriber._tryNext (/home/razmjo/workstation/jobsaf-website/web/server.js:36544:14)
    at MergeMapSubscriber._next (/home/razmjo/workstation/jobsaf-website/web/server.js:36527:18)
    at MergeMapSubscriber.Subscriber.next (/home/razmjo/workstation/jobsaf-website/web/server.js:32827:18)
    at Observable._subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:34901:20)
    at Observable._trySubscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32656:25)
    at Observable.subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32642:22)
    at MergeMapOperator.call (/home/razmjo/workstation/jobsaf-website/web/server.js:36505:23)
    at Observable.subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32637:22)
    at FilterOperator.call (/home/razmjo/workstation/jobsaf-website/web/server.js:39692:23)
    at Observable.subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32637:22)
    at MapOperator.call (/home/razmjo/workstation/jobsaf-website/web/server.js:35609:23)
    at Observable.subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32637:22)
    at Observable.ConnectableObservable.connect (/home/razmjo/workstation/jobsaf-website/web/server.js:33464:18)
    at RefCountOperator.call (/home/razmjo/workstation/jobsaf-website/web/server.js:33841:49)
    at Observable.subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32637:22)
    at TakeOperator.call (/home/razmjo/workstation/jobsaf-website/web/server.js:39877:23)
    at Observable.subscribe (/home/razmjo/workstation/jobsaf-website/web/server.js:32637:22)
    at TranslateService.setDefaultLang (/home/razmjo/workstation/jobsaf-website/web/server.js:300966:18)
    at new AppComponent (/home/razmjo/workstation/jobsaf-website/web/server.js:179762:19)
    at createClass (/home/razmjo/workstation/jobsaf-website/web/server.js:22947:20)
    at createDirectiveInstance (/home/razmjo/workstation/jobsaf-website/web/server.js:22822:20)
    at createViewNodes (/home/razmjo/workstation/jobsaf-website/web/server.js:24042:36)
    at createRootView (/home/razmjo/workstation/jobsaf-website/web/server.js:23956:5)
    at Object.createProdRootView [as createRootView] (/home/razmjo/workstation/jobsaf-website/web/server.js:24468:12)
    at ComponentFactory_.create (/home/razmjo/workstation/jobsaf-website/web/server.js:22302:29)
    at ComponentFactoryBoundToModule.create (/home/razmjo/workstation/jobsaf-website/web/server.js:16954:29)
    at ApplicationRef.bootstrap (/home/razmjo/workstation/jobsaf-website/web/server.js:18183:40)
    at /home/razmjo/workstation/jobsaf-website/web/server.js:17993:81
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (/home/razmjo/workstation/jobsaf-website/web/server.js:17993:44)
    at /home/razmjo/workstation/jobsaf-website/web/server.js:17959:27
    at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:535:26)
    at Object.onInvoke (/home/razmjo/workstation/jobsaf-website/web/server.js:17463:33)
    at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:534:32)
    at Zone.run (/home/razmjo/workstation/jobsaf-website/web/server.js:285:43)
    at /home/razmjo/workstation/jobsaf-website/web/server.js:1019:34
    at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:568:31)
    at Object.onInvokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:17454:33)
    at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:567:36)
    at Zone.runTask (/home/razmjo/workstation/jobsaf-website/web/server.js:335:47)
    at drainMicroTaskQueue (/home/razmjo/workstation/jobsaf-website/web/server.js:742:35)
    at ZoneTask.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:647:21)
    at Server.ZoneTask.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:632:48)
    at Server.emit (events.js:182:13)
    at parserOnIncoming (_http_server.js:658:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
ERROR { Error: Uncaught (in promise): TypeError: Cannot read property 'error' of undefined
TypeError: Cannot read property 'error' of undefined
    at IziToast../src/app/shared/toastr/izitoastr.service.ts.IziToast.error (/home/razmjo/workstation/jobsaf-website/web/server.js:211487:25)
    at ToastrMessageService../src/app/shared/toastr/toastr-message.service.ts.ToastrMessageService.errorMessage (/home/razmjo/workstation/jobsaf-website/web/server.js:211528:20)
    at /home/razmjo/workstation/jobsaf-website/web/server.js:225606:53
    at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:535:26)
    at Object.onInvoke (/home/razmjo/workstation/jobsaf-website/web/server.js:17463:33)
    at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:534:32)
    at Zone.run (/home/razmjo/workstation/jobsaf-website/web/server.js:285:43)
    at /home/razmjo/workstation/jobsaf-website/web/server.js:1019:34
    at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:568:31)
    at Object.onInvokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:17454:33)
    at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:567:36)
    at Zone.runTask (/home/razmjo/workstation/jobsaf-website/web/server.js:335:47)
    at drainMicroTaskQueue (/home/razmjo/workstation/jobsaf-website/web/server.js:742:35)
    at ZoneTask.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:647:21)
    at ZoneTask.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:632:48)
    at data.args.(anonymous function) (/home/razmjo/workstation/jobsaf-website/web/server.js:1485:25)
    at process._tickCallback (internal/process/next_tick.js:63:19)
    at resolvePromise (/home/razmjo/workstation/jobsaf-website/web/server.js:961:31)
    at /home/razmjo/workstation/jobsaf-website/web/server.js:871:17
    at rejected (/home/razmjo/workstation/jobsaf-website/web/server.js:4782:89)
    at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:535:26)
    at Object.onInvoke (/home/razmjo/workstation/jobsaf-website/web/server.js:17463:33)
    at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:534:32)
    at Zone.run (/home/razmjo/workstation/jobsaf-website/web/server.js:285:43)
    at /home/razmjo/workstation/jobsaf-website/web/server.js:1019:34
    at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:568:31)
    at Object.onInvokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:17454:33)
    at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:567:36)
    at Zone.runTask (/home/razmjo/workstation/jobsaf-website/web/server.js:335:47)
    at drainMicroTaskQueue (/home/razmjo/workstation/jobsaf-website/web/server.js:742:35)
    at ZoneTask.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:647:21)
    at ZoneTask.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:632:48)
    at data.args.(anonymous function) (/home/razmjo/workstation/jobsaf-website/web/server.js:1485:25)
    at process._tickCallback (internal/process/next_tick.js:63:19)
  rejection:
   TypeError: Cannot read property 'error' of undefined
       at IziToast../src/app/shared/toastr/izitoastr.service.ts.IziToast.error (/home/razmjo/workstation/jobsaf-website/web/server.js:211487:25)
       at ToastrMessageService../src/app/shared/toastr/toastr-message.service.ts.ToastrMessageService.errorMessage (/home/razmjo/workstation/jobsaf-website/web/server.js:211528:20)
       at /home/razmjo/workstation/jobsaf-website/web/server.js:225606:53
       at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:535:26)
       at Object.onInvoke (/home/razmjo/workstation/jobsaf-website/web/server.js:17463:33)
       at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:534:32)
       at Zone.run (/home/razmjo/workstation/jobsaf-website/web/server.js:285:43)
       at /home/razmjo/workstation/jobsaf-website/web/server.js:1019:34
       at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:568:31)
       at Object.onInvokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:17454:33)
       at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:567:36)
       at Zone.runTask (/home/razmjo/workstation/jobsaf-website/web/server.js:335:47)
       at drainMicroTaskQueue (/home/razmjo/workstation/jobsaf-website/web/server.js:742:35)
       at ZoneTask.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:647:21)
       at ZoneTask.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:632:48)
       at data.args.(anonymous function) (/home/razmjo/workstation/jobsaf-website/web/server.js:1485:25)
       at process._tickCallback (internal/process/next_tick.js:63:19),
  promise:
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value:
      TypeError: Cannot read property 'error' of undefined
          at IziToast../src/app/shared/toastr/izitoastr.service.ts.IziToast.error (/home/razmjo/workstation/jobsaf-website/web/server.js:211487:25)
          at ToastrMessageService../src/app/shared/toastr/toastr-message.service.ts.ToastrMessageService.errorMessage (/home/razmjo/workstation/jobsaf-website/web/server.js:211528:20)
          at /home/razmjo/workstation/jobsaf-website/web/server.js:225606:53
          at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:535:26)
          at Object.onInvoke (/home/razmjo/workstation/jobsaf-website/web/server.js:17463:33)
          at ZoneDelegate.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:534:32)
          at Zone.run (/home/razmjo/workstation/jobsaf-website/web/server.js:285:43)
          at /home/razmjo/workstation/jobsaf-website/web/server.js:1019:34
          at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:568:31)
          at Object.onInvokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:17454:33)
          at ZoneDelegate.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:567:36)
          at Zone.runTask (/home/razmjo/workstation/jobsaf-website/web/server.js:335:47)
          at drainMicroTaskQueue (/home/razmjo/workstation/jobsaf-website/web/server.js:742:35)
          at ZoneTask.invokeTask (/home/razmjo/workstation/jobsaf-website/web/server.js:647:21)
          at ZoneTask.invoke (/home/razmjo/workstation/jobsaf-website/web/server.js:632:48)
          at data.args.(anonymous function) (/home/razmjo/workstation/jobsaf-website/web/server.js:1485:25)
          at process._tickCallback (internal/process/next_tick.js:63:19) },
  zone:
   Zone {
     _properties: { isAngularZone: true },
     _parent:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [ZoneDelegate] },
     _name: 'angular',
     _zoneDelegate:
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [ZoneDelegate],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: [Zone],
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: [Zone],
        _invokeZS: [Object],
        _invokeDlgt: [ZoneDelegate],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [ZoneDelegate],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [ZoneDelegate],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [ZoneDelegate],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [ZoneDelegate],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [ZoneDelegate],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task:
   ZoneTask {
     _zone:
      Zone {
        _properties: [Object],
        _parent: [Zone],
        _name: 'angular',
        _zoneDelegate: [ZoneDelegate] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data:
      ZoneAwarePromise { __zone_symbol__state: true, __zone_symbol__value: undefined },
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

my cli versions :
ng -v:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.2.3
Node: 10.6.0
OS: linux x64
Angular: 6.1.8
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.8.3 (cli-only)
@angular-devkit/schematics        0.8.3 (cli-only)
@angular/cdk                      6.4.7
@angular/cli                      6.2.3
@angular/material                 6.4.7
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.8.3
rxjs                              6.3.2
typescript                        2.9.2
webpack                           4.8.3

Could anyone help me with this issue.

How to set headers for http requests via refreshToken()

Hi,

Thanks for this awesome package. Really makes our lives simple.

One question. I noticed that when I call the refresh api through the refreshToken() function, it does not add the Authorization header in the request. My refresh api expects the token to be present in the header. Is there any way I can include the header when I am posting the request via refreshToken()? My code:

  public refreshToken(): Observable<any> {
    console.log('refreshToken');

    return this.tokenStorage
      .getAccessToken()
      .pipe(
        switchMap((refreshToken: string) =>
          this.http.post(`http://localhost/uku/api/auth/refresh`, {})
        ),
        tap((tokens: any) => {
          console.log(tokens);
          this.saveAccessData(tokens);
        }),
        catchError((err) => {
          this.logout();

          return Observable.throw(err);
        })
      );
  }

Header:

Angular 6 support

Hi, the angular team released an rc version. The problems that this library gives are related to the inclusions of rxjs that they updated to version 6.

They also left a migration guide to rxjs 6, link.

😄

Naming convention ?

Since all packages use the ngx convention (ngx-datatable, ngx-bootstrap, ngx-restangular ...),

Maybe you should change it to ngx-auth ?

Whitelist/Blacklist URL

Hey first, really cool project!
Is there a possibility to whitelist/blacklist urls for the access token?
As an example I only want to send the access token to my internal api.
So I would like to add the url to some kind of whitelist.

Angular material compatibility

Hi! i am updating my Angular aplication from 7 to 8 and when i update angular material with ng update @angular/material i see the next warnings:

Package "ngx-auth" has an incompatible peer dependency to "@angular/compiler" (requires ">=7.0.0",
would install "9.0.0-next.5").

please help.

Add canLoad support

ProtectedGuard should implements CanLoad for lazy loading child

Refresh the token before making a new request

Hi,

Is it possible to check if it is needed to refresh the token before making a new request?
As you know, there is an expires_at field where it is sometimes better to check it and refresh the token before making a request.

the flow when making a new request:
1- check expires_at
2- if expired, refresh and continue
3- make a request
4- if response is 401, refresh the token and retry

Feature: Implementation of unit tests for services and guards

Decode Claim Information

My token includes a user id claim. Is there way to decode it in ngx-auth?

Custom interceptor

Is there a way to add or overwrite the operation of the interceptor? or to implement a custom interceptor?

I need to verify first if there is a token or not, to redirect it to the main page.

Thank you

Angular 8 compatibility

hello,

I just upgrade to Angular 8.0.0 and having the following warnings:

warning " > [email protected]" has incorrect peer dependency "@angular/core@^7.0.0".
warning " > [email protected]" has incorrect peer dependency "@angular/compiler@^7.0.0".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^7.0.0".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^7.0.0".

ngx-auth seems to work anyway but can you take a look ?

thanks