Can't figure out how to switch from access_token to refresh_token in fetchBaseQuery 😞

[AndreaBarghigiani]

Following the example in docs, I've customized it to follow my needs, the thing is that no matter what I do the headers I send via RTK Query keeps using the access_token instead of the refresh_token.

const mutex = new Mutex();
const baseQuery = fetchBaseQuery({
  baseUrl: `${process.env.NEXT_PUBLIC_BACKEND_URL}`,
  credentials: "include",
  prepareHeaders: (headers, { getState, endpoint }) => {
    const state = getState() as RootState;
    const token = state.auth.access_token;

    if (token) {
      headers.set("Authorization", `Bearer ${token}`);
    }
    return headers;
  },
});

const baseQueryWithReauth: BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
  await mutex.waitForUnlock();
  let result = await baseQuery(args, api, extraOptions);

  if (result.error && result.error.status === 401) {
    // checking whether the mutex is locked
    if (!mutex.isLocked()) {
      const release = await mutex.acquire();
      try {
        const state = api.getState() as RootState;
        const refreshResult = await baseQuery({
          url: "/auth/refresh",
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${state.auth.refresh_token}`,
          },
        }, api, extraOptions);
        if (refreshResult.data) {
          // const state = api.getState() as RootState;
          api.dispatch(setAuth({ ...refreshResult.data }));
          // retry the initial query
          result = await baseQuery(args, api, extraOptions);
        } else {
          // api.dispatch(logout());
        }
      } finally {
        // release must be (called once the mutex should be released again.
        release();
      }
    } else {
      // wait until the mutex is available without locking it
      await mutex.waitForUnlock();
      result = await baseQuery(args, api, extraOptions);
    }
  }
  return result;
};

I even tryed to swap the token inside fetchBaseQuery like that, but it didn't work:

const baseQuery = fetchBaseQuery({
  baseUrl: `${process.env.NEXT_PUBLIC_BACKEND_URL}`,
  credentials: "include",
  prepareHeaders: (headers, { getState, endpoint }) => {
    const state = getState() as RootState;
    const token =
      endpoint === "/auth/refresh"
        ? state.auth.refresh_token
        : state.auth.access_token;

    if (token) {
      headers.set("Authorization", `Bearer ${token}`);
    }
    return headers;
  },
});

I also read this discussion but it is not applicable to my use case because he sent the token via body while I need to send it via headers.

I thought of not customize the fetchBaseQuery at all, but all my endpoints needs the access_token in the headers and I am not even sure I'll be able to solve like that.

Please help me out because I am not able to figure it out.

[phryneas]

Your baseQueryWithReauth calls the other baseQuery, which then sets the Authorization header.

Maybe add something like if (!headers.has("Authorization")) before setting it?

[AndreaBarghigiani]

@phryneas thank you so much!!!

I didn't know I could do something like that 😱

But now that I think again I should've because I remember reading one of your previous answers about fetchBaseQuery and prepareHeaders where you told us that the latter get's call as the last one.

Now it's clear, since is gonna be the last one, if I set the headers before it it'll not run 😅

Gonna share the code if it's gonna be helpful to someone else too:

const baseQuery = fetchBaseQuery({
  baseUrl: `${process.env.NEXT_PUBLIC_BACKEND_URL}`,
  credentials: "include",
  prepareHeaders: (headers, { getState }) => {
    const state = getState() as RootState;
    const token = state.auth.access_token;

    if (!headers.has("Authorization") && token) {
      headers.set("Authorization", `Bearer ${token}`);
    }

    return headers;
  },
});

Don't wanna run out of credits, but could you be so gentle to point me to the right documentation where I could learn how to persist the login state after an hard refresh?

I know I'm maybe going OT, but I heard you kinda know RTK 😅

[AndreaBarghigiani]

Nevermind, I understood that with credentials: "include" I need the server to be configured in order to accept the cookies and persist the session.

I am going to ask to my BE team to change the configuration of the server.

Unless you know a different approach 😊

I thought of getting the access_token right in the apiSlice.ts where I define the baseQuery, but tbh I am not sure if this could be the best approach 🤔

[phryneas]

The safesst approach really is a cookie that can never even be read by JavaScript. If that's not a possibility (but it really should!), the approach you are going for here is fine, but then you need to find your own way of persisting (probably in localStorage or sessionStorage?), but we have nothing of the likes documented, since we don't want to steer people that way in the first place.

[AndreaBarghigiani]

Thank you so much once more 🙏