CODEWITHSUNDEEP
angularangular-http-interceptors
Dean Friedland
Dean Friedland

Reputation: 803

Issue with creating refresh token via HttpInterceptor

I am trying to implement refresh tokens in our application using the following tutorial:

https://codinglatte.com/posts/angular/refreshing-authorization-tokens-angular-6/

I am getting the following error:

TypeError: Cannot read property 'pipe' of null
    at HttpAuthInterceptor.push../src/app/Interceptors/newauth.interceptor.ts.HttpAuthInterceptor.intercept (newauth.interceptor.ts:38)
    at HttpInterceptorHandler.handle (http.js:1279)
    at LoaderInterceptor.intercept (loader.interceptor.ts:55)
    at HttpInterceptorHandler.handle (http.js:1279)
    at HttpXsrfInterceptor.intercept (http.js:1888)
    at HttpInterceptorHandler.handle (http.js:1279)
    at HttpInterceptingHandler.handle (http.js:1932)
    at MergeMapSubscriber.project (http.js:1099)
    at MergeMapSubscriber._tryNext (mergeMap.js:61)
    at MergeMapSubscriber._next (mergeMap.js:51)

My code is:

import { HttpEvent,HttpHandler,HttpInterceptor,HttpRequest } from '@angular/common/http';
import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { AuthService } from '../Services/Auth.service';


@Injectable()
export class HttpAuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private Route: Router) { }

  inflightAuthRequest = null;

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // exempt some paths from authentication
    if (req.headers.get('authExempt') === 'true') {
      return next.handle(req);
    }

    const authService = this.injector.get(AuthService);

    if (!this.inflightAuthRequest) {
      this.inflightAuthRequest = authService.getToken();
    }

    return this.inflightAuthRequest.pipe(
      switchMap((newToken: string) => {
        // unset request inflight
        this.inflightAuthRequest = null;

        // use the newly returned token
        const authReq = req.clone({
          headers: req.headers.set('token', newToken ? newToken : '')
        });

        // resend the request
        return next.handle(authReq);
      }),
      catchError(error => {
        if (error.status === 401) {
          // check if the response is from the token refresh end point
          const isFromRefreshTokenEndpoint = !!error.headers.get('unableToRefreshToken');

          if (isFromRefreshTokenEndpoint) {
            localStorage.clear();
            this.Route.navigate(['/login']);
            return throwError(error);
          }

          if (!this.inflightAuthRequest) {
            this.inflightAuthRequest = authService.refreshToken();

            if (!this.inflightAuthRequest) {
              // remove existing tokens
              localStorage.clear();
              this.Route.navigate(['/login']);
              return throwError(error);
            }
          }

          return this.inflightAuthRequest.pipe(
            switchMap((newToken: string) => {
              // unset inflight request
              this.inflightAuthRequest = null;

              // clone the original request
              const authReqRepeat = req.clone({
                headers: req.headers.set('token', newToken)
              });

              // resend the request
              return next.handle(authReqRepeat);
            })
          );
        } else {
          return throwError(error);
        }
      })
    );
  }
}

Can someone tell me what I am doing wrong? Line 38 in the error is referencing return this.inflightAuthRequest.pipe(. I am not sure what I need to do and would really appreciate some help.

Upvotes: 0

Views: 246

Answers (1)

Maina Wycliffe
Maina Wycliffe

Reputation: 11

You are missing this part:

if (!this.inflightAuthRequest) {
  this.inflightAuthRequest = authService.getToken();
}

After:

const authService = this.injector.get(AuthService);

I must have forgotten to include that part in the article, was in the repo though. Sorry about that.

Upvotes: 1

Related Questions