Introduce withRefreshAuth

[djhi]

No description provided.

[fzaninotto]

I don't like the idea of a single decorator for two very different objects. I also see that it forces you to do some borderline inspection to determine in which case you are. How about one for each?

[djhi]

How about one for each?

How would you name them?
addRefreshAuthToDataProvider and addRefreshAuthToAuthProvider?

[fzaninotto]

yes, fine by me

[davidhenley]

I'm a little confused on this. Wrapping both the auth and data providers cause a double refresh.

Are you only supposed to wrap one or the other? I feel like the docs need a little work on this subject.

[djhi]

Indeed, we could do a better job on the documentation side. One way to avoid the double refresh would be to store the first promise and return it on subsequent calls until it is resolved. You can check how we did it in ra-directus for instance: https://github.com/marmelab/ra-directus/blob/main/packages/ra-directus/src/directusRefreshAuthToken.ts

Maybe we should handle this ourselves so you don't have to worry about it though

[davidhenley]

Hey @djhi I cannot see that link. I think that's a private repo. Do you mind sending the example to my email on file with React-Admin Enterprise if you cannot post it here?

[fzaninotto]

I've just changed the repo visibility, you should be able to see the code.

[davidhenley]

Thanks @fzaninotto! I see it now

[davidhenley]

@djhi I'm still getting double refreshes with this method.

const refreshToken = () => {
  let refreshPromise = null;

  if (refreshPromise != null) {
    return refreshPromise;
  }

  const accessToken = localStorage.getItem('authentication.access_token');
  const refreshToken = localStorage.getItem('authentication.refresh_token');

  if (!accessToken && !refreshToken) {
    return Promise.reject();
  }

  const now = new Date()
  const expired = jwtDecode(accessToken).exp < now.getTime() / 1000

  if (expired) {
    refreshPromise = (async () => {
      const request = new Request(`${process.env.REACT_APP_API_URL}/auth/refresh`, {
        method: 'POST',
        body: JSON.stringify({accessToken, refreshToken}),
        headers: new Headers({'Content-Type': 'application/json'}),
      });
      const response = await fetch(request);
      if (response.status < 200 || response.status >= 300) {
        throw new HttpError(response.statusText, response.status);
      }
      const data = await response.json();
      localStorage.setItem('authentication.access_token', data.token);
      localStorage.setItem('authentication.refresh_token', data.refreshToken);
    })().finally(() => {
      refreshPromise = null;
    });
    return refreshPromise;
  }
}

[djhi]

let refreshPromise = null;

const refreshToken = () => {

  if (refreshPromise != null) {
    return refreshPromise;
  }

  const accessToken = localStorage.getItem('authentication.access_token');
  const refreshToken = localStorage.getItem('authentication.refresh_token');

  if (!accessToken && !refreshToken) {
    return Promise.reject();
  }

  const now = new Date()
  const expired = jwtDecode(accessToken).exp < now.getTime() / 1000

  if (expired) {
    refreshPromise = (async () => {
      const request = new Request(`${process.env.REACT_APP_API_URL}/auth/refresh`, {
        method: 'POST',
        body: JSON.stringify({accessToken, refreshToken}),
        headers: new Headers({'Content-Type': 'application/json'}),
      });
      const response = await fetch(request);
      if (response.status < 200 || response.status >= 300) {
        throw new HttpError(response.statusText, response.status);
      }
      const data = await response.json();
      localStorage.setItem('authentication.access_token', data.token);
      localStorage.setItem('authentication.refresh_token', data.refreshToken);
    })().finally(() => {
      refreshPromise = null;
    });
    return refreshPromise;
  }
}

This will work. However, we're going to provide a way to do that automatically in a later minor version.

[davidhenley]

@djhi That was it! Thank you