How can I get it from baseQuery to the login page?

[dev-splin]

https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#automatic-re-authorization-by-extending-fetchbasequery

Hello :)

I'm developing a re-authorization after seeing the link above.
When I get 401 status, I want to move it to the login page.

How do I get to the login page in baseQuery?

I'd appreciate it if you could reply!

[phryneas]

Well... how would you do that navigation outside of RTK Query?

[dev-splin]

If i proceed outside of RTK Query, i must do redirection one by one.
This processing is cumbersome, so I want to automatically redirection when I get the 401 code

[phryneas]

I did not say "do it outside of RTK Query", I asked you how the code would look if you would do it outside of RTK Query, because that code will differ for every single router out there, and without a code example from your side I can't give you a code example on what to do.

If you don't want to give an example: wrap your baseQuery as shown in out documentation examples, and on a 401 execute whatever code you would otherwise execute to forward the user. I don't know your router.

[dev-splin]

I know there should be an example code of course for a detailed answer, but it's similar to the code on the link, so I didn't attach it.

I'll mark the point of time I want and attach the code!

// create a new mutex
const mutex = new Mutex();

const baseQuery = fetchBaseQuery({
  baseUrl: constants.API_BASE_URL,
  prepareHeaders: (headers, { extra }) => {
    const accessToken = extra.cookies?.[constants.ACCESS_TOKEN_NAME];

    if (accessToken) {
      headers.set('authorization', `Bearer ${accessToken}`);
    }

    return headers;
  },
  credentials: 'include',
});

const refreshFetchBase = async (args, api, extraOptions) => {
  // wait until the mutex is available without locking it
  await mutex.waitForUnlock();
  let result = await baseQuery(args, api, extraOptions);
  if (result.error?.status === 401) {
    // checking whether the mutex is locked
    if (!mutex.isLocked()) {
      const release = await mutex.acquire();
      try {
        const refreshToken = api.extra?.cookies?.[constants.REFRESH_TOKEN_NAME];
        if (refreshToken) {
          const refreshResult = await baseQuery(
            {
              url: constants.REFRESH_TOKEN_URL,
              method: 'POST',
              headers: {
                'Content-Type': 'application/json; charset=utf-8',
                refreshToken,
              },
            },
            api,
            extraOptions,
          );

          if (refreshResult.data) {
            // Retry the initial query
            result = await baseQuery(args, api, extraOptions);
          } else {
            // I want to know how to get it to the login page right away at this point.
          }
        }
      } 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;
};

[phryneas]

My question was "in your non-Redux-Toolkit-Code, how would you do a redirect/navigation?"

[dev-splin]

OMG!!!

Why didn't I think of window.location.href..
Thanks to you, I found it. Thank you!

[JJJ4032002]

Thanks to you both!!!. Was wandering how to achieve this and got my answer here.

[ghost]

it worked for me, I tried :

window?.location.replace(`/auth/login?redirect=${window.location.pathname}`);

[xtiannyeto]

You can also not use redirection, but dispatch a resetToken or Logout action, and let your AuthGuard redirect the user on the login page :)

in BaseQuery
api.dispatch(resetTokens());

Your Guard:

export default function AuthGuard(props: AuthGuardProps): JSX.Element | null {
  const token = useAppSelector(selectAccessToken);
  return !token ? <Navigate to="/login" replace /> : props.children;
}