How to use functional interceptor for refreshing token in Angular 17

Question

I was using the following class-based interceptor to refresh user token:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private inject: Injector) {}

    intercept(request: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
        let tokenService = this.inject.get(TokenService);

        let authReq = request;
        authReq = this.AddTokenHeader(request, tokenService.getAccessToken())

        return next.handle(authReq).pipe(
            catchError(errorData => {
                if (errorData.status == 401) {
                    return this.handleRefreshToken(request, next);
                }
                return throwError(errorData);
            })
        );
    }

    AddTokenHeader(request: HttpRequest < any > , token: any) {
        return request.clone({
            headers: request.headers.set('Authorization', 'Bearer ' + token)
        });
    }

    handleRefreshToken(request: HttpRequest < any > , next: HttpHandler) {
        let tokenService = this.inject.get(TokenService);
        let authService = this.inject.get(AuthService);
        let sessionStorageService = this.inject.get(SessionStorageService);

        var refreshTokenVM = new RefreshTokenVM();
        refreshTokenVM.UserId = tokenService.getUserId();
        refreshTokenVM.RefreshToken! = tokenService.getRefreshToken() !;

        return tokenService.refreshToken(refreshTokenVM).pipe(
            switchMap((data: any) => {
                sessionStorageService.saveData('accessToken', data.accessToken);
                sessionStorageService.saveData('refreshToken', data.refreshToken);
                return next.handle(this.AddTokenHeader(request, data.accessToken))
            }),
            catchError(errorData => {
                authService.logout();
                return throwError(errorData);
            })
        );
    }
}

In Angular 17, we have to use functional interceptor. I tried to translate above code to a functional interceptor:

export const authInterceptor: HttpInterceptorFn = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
  const clonedRequest = request.clone({
    setHeaders: {
      Authorization: 'Bearer ' + 'token',
    }
  });
  return next(clonedRequest).pipe(
    catchError(errorData => {
      if (errorData.status == 401) {

      }
      return throwError(() => errorData);
    })
  );
};

The problem is that I cannot inject tokenService in the interceptor function (I store token in SessionStrorage). Also, I don't know how I can integrate handleRefreshToken function in the functional interceptor. How can I solve this problem?

Answer 1

You should be able to get access to TokenService by using inject function:

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
  const tokenService = inject(TokenService); 

  const clonedRequest = request.clone({
  ...

Answer 2

As for your second question (integrating the refresh token functionality), I will suggest that you add a new functional interceptor. I will take part of your original post and add some of my onw. The complete code will look something like this:

export const authInterceptor: HttpInterceptorFn = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
  const sessionStorageService = inject(SessionStorageService);
  const { accessToken } = sessionStorageService.getSession(); // will return { accessToken: 'myAccessToken', refreshToken: 'myRefreshToken'}
  if (accessToken) {
    const clonedRequest = request.clone({
       headers: req.headers.set('Authorization', `Bearer ${accessToken}`),
    });
    return next(clonedRequest);
  } else {
    return(request);
  }
};


export const unauthErrorInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
  const tokenService = inject(TokenService);
  const authService = inject(AuthService);
  const sessionStorageService = inject(SessionStorageService);
  
  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error instanceof HttpErrorResponse &&
        !(req.url.includes('auth/login') || req.url.includes('auth/refresh')) && // <- this will avoid an infinite loop when the accessToken expires.
        error.status === 401) {
        const { refreshToken } = sessionStorageService.getSession();
        if (refreshToken) {
          return tokenService.refreshToken().pipe(
            switchMap((refreshResult) => {
              // assuming that tokenService.refreshToken() will return { accessToken: 'myNewAccessToken', refreshToken: 'myNewRefreshToken'}
              sessionStorageService.saveSession(refreshResult);
              return next(req.clone({
                headers: req.headers.set('Authorization', `Bearer ${refreshResult.accessToken}`),
              }));
            }),
            catchError((error) => {
              console.log('error')
              if (error.status == '403' || error.status === '401') {
                authService.logout();
              }
              return throwError(() => error);
            })
          );
        }
      }
      authService.logOut();
      return throwError(() => new Error('Unauthorized Exception'));
    })
  );
};

Also, in your token.service.ts you will need to update the header to use the refresh token instead of the access token:

...
const AUTH_API = `${environment.apiUrl}/auth`;
const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
...
refreshToken(): Observable<RefreshResultDto> {
  const { refreshToken } = this.sessionStorageService.getSession();
  return this.httpClient.post<RefreshResultDto>(`${AUTH_API}/refresh`, {}, {
      ...httpOptions,
      headers: httpOptions.headers.set('Authorization', `Bearer ${refreshToken}`)
    });
}

And refresh-result.dto.ts:

export interface RefreshResultDto {
  accessToken: string;
  refreshToken: string;
}

Regards!