Angular 10: repeat the same http request after obtaining the refresh token

Question

I am trying to achieve the following in my HTTP calls

If an API request returns 401 then call the refresh token endpoint to get the token.
Retry the same HTTP call with the updated token

Here is the relevant code

// this method invoke when the HTTP interceptor returns 401 status code

handle401(request: HttpRequest<any>, next: HttpHandler) {
    if (!this.refreshTokenInProgress) {
      this.refreshTokenInProgress = true;
      this.refreshTokenSubject.next(null);
      return this.getToken((data: any) => {
        this.refreshTokenInProgress = false;
        this.refreshTokenSubject.next(data);
        request = request.clone({ headers: request.headers.set('Authorization', `Bearer ${data}`) });
        return next.handle(request);
      })
    } else {
      return this.refreshTokenSubject.pipe(
        filter(token => token != null),
        take(1),
        switchMap((accessToken) => {
          request = request.clone({ headers: request.headers.set('Authorization', `Bearer ${accessToken}`) });
          return next.handle(request);
        })
      );
    }
  }

Obtain the refresh token

getToken(cb: any) {
    let poolData = {
      UserPoolId: environment.cognitoUserPoolId, // Your user pool id here
      ClientId: environment.cognitoAppClientId // Your client id here
    };
    let userPool = new CognitoUserPool(poolData);
    let cognitoUser = userPool.getCurrentUser();
    cognitoUser?.getSession((err: any, session: any) => {
      const refresh_token = session.getRefreshToken();
      cognitoUser?.refreshSession(refresh_token, (refErr, refSession) => {
        
        const userToken = localStorage.getItem('token');
        cb(userToken);
      });
    })
  }

While executing I am getting the new token from the getToken method, but the retry of the same HTTP call is not happening.

The execution of HTTP request stops after obtaining the refresh token from the getToken method.

Can somebody please help on this issue

Eddy Lin · Answer 1 · 2022-08-15T18:04:47.920

0

if you use catchError should return Observable

your getToken function has not return

maybe you can watch this

https://stackoverflow.com/a/73364684/19768317

edited Aug 15 '22 at 18:04

answered Aug 15 '22 at 13:50

Eddy Lin

513
2
6

Please add supporting context to your answer, quoting where the getToken is not returning, etc. – Vendetta Aug 20 '22 at 14:59

score -1 · Answer 2 · answered Mar 22 '22 at 08:11

Assuming you want to get userToken from getToken(). getToken() should return something, right now it's not returning anything. If some methods like getSession or refreshSession are async methods then those should be waited too.

 async handle401(request: HttpRequest<any>, next: HttpHandler) {
    if (!this.refreshTokenInProgress) {
      this.refreshTokenInProgress = true;
      this.refreshTokenSubject.next(null);
      const token = await this.getToken(); // put "cb" param here, wait for returned token, then continiue
        this.refreshTokenInProgress = false;
        this.refreshTokenSubject.next(token);
        request = request.clone({ headers: request.headers.set('Authorization', `Bearer ${token}`) });
        return next.handle(request);

    } else {
      return this.refreshTokenSubject.pipe(
        filter(token => token != null),
        take(1),
        switchMap((accessToken) => {
          request = request.clone({ headers: request.headers.set('Authorization', `Bearer ${accessToken}`) });
          return next.handle(request);
        })
      );
    }
  }

getToken(cb: any) {
    let poolData = {
      UserPoolId: environment.cognitoUserPoolId, // Your user pool id here
      ClientId: environment.cognitoAppClientId // Your client id here
    };
    let userPool = new CognitoUserPool(poolData);
    let cognitoUser = userPool.getCurrentUser();
    cognitoUser?.getSession((err: any, session: any) => {
      const refresh_token = session.getRefreshToken();
      cognitoUser?.refreshSession(refresh_token, (refErr, refSession) => {
        
        const userToken = localStorage.getItem('token');
        cb(userToken);
        return userToken;
      });
    })
  }

Should you not add return statement before `cognitoUser?.getSession(` ? — Alain Boudard, Mar 22 '22 at 09:29
`getToken()` is is returning as callback function and i m getting the value in the callback — shamon shamsudeen, Mar 22 '22 at 10:07

Angular 10: repeat the same http request after obtaining the refresh token

2 Answers2