It requests new token immediately and fails somewhere

[flackjap]

Hi guys,

Before I imported angular2-jwt-refresh to handle the refresh token cycle, I've been using angular2-jwt with no problems (of course without the refresh token cycle).

I'm using OAuth2 server and I'm authenticating users (single page web app) with password grant type.

Here's my current config (getJwtHttp factory) for angular2-jwt-refresh:

export function getJwtHttp(http: Http, options: RequestOptions) {
  let jwtOptions = {
    endPoint: 'http://myapp.com/oauth/token',
    // optional
    payload: { 
      grant_type: 'refresh_token',
      refresh_token: localStorage.getItem('refresh_token'),
      client_id: '...',
      client_secret: '...',
      scope: '*',
    },
    beforeSeconds: 600, // refresh tokeSn before 10 min
    tokenName: 'refresh_token',
    refreshTokenGetter: (() => localStorage.getItem('refresh_token'))
  };
  let authConfig = new AuthConfig({
    noJwtError: true,
    globalHeaders: [{'Accept': 'application/json'}],
    tokenGetter: (() => localStorage.getItem('id_token')),
  });
 
  return new JwtHttp(
    new JwtConfigService(jwtOptions, authConfig),
    http,
    options
  );
}

Pay attention to the payload property.
At first, I had to declare the grant_type: 'refresh_token', as specified by The OAuth 2.0 Authorization Framework - yes I tried with default config and my OAuth server complained that I'm sending an invalid grant type. But I don't see that the OAuth framework specification defines cliend_id and client_secret which I had to insert in because I've got an error message from my server saying that I'm missing them in the request parameters. To be precise, that's what the the protected _refreshToken() method (from angular2-jwt-refresh) returned as an error message from the server when I set the breakpoint in the JS debugger, to see what was really going on.

Now I'm not even getting the first result from my API (I am getting "Unauthorized" ... {"error": "Unauthenticated."}), and the angular2-jwt-refresh tries to refresh the token immediately (right after the initial API data request in my data service where I use the jwtHttp for API calls).

What's more interesting is that when I check the token tables in database, it seems that it really does request a new access token immediately and it really gets generated. Basically, what happens is that when I pass my login screen (where the first access token gets generated), I can see only one access token (and one refresh token) generated in my database (which is all regular). But when I go to the component that calls the API from its data service (which in turn calls the jwtHttp), then I can see another set of tokens generated, while the previous set is marked as revoked.

Now I even tried to match the tokens that it tries to send for the API call, and it seems like it is using the old access token that was initially set by my Authentication service and it also removes the refresh_token from localStorage. It's like it tries to obtain new access token too early and then it fails to use it / or update the localStorage.

I could investigate further, but my first guess is that I'm doing something wrong with the configuration ... and I'm suspicious about the cliend_id and client_secret that the OAuth server requested from me - like it was trying to re-authenticate again.

p.s. I had to remove the tokenSetter from the config because the typescript has been complaining about some type mismatched, but that's totally another issue. I can only assure you that I do name tokens by default (id_token and refresh_token).

Thanks in advance.

[danmarkl]

^