refreshing access token manually in axios

In my axios API calls, I need to give an Authorization header with the access token -

const res = await axios.get(
  `https://us-east-1.aws.data.mongodb-api.com/app/${process.env.REACT_APP_APP_ID}/endpoint/taskLogs`,
  {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      Accept: "application/json",
    },
    params: {
      taskId,
    },
  }
);

const res = await axios.get(
  `https://us-east-1.aws.data.mongodb-api.com/app/${process.env.REACT_APP_APP_ID}/endpoint/taskLogs`,
  {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      Accept: "application/json",
    },
    params: {
      taskId,
    },
  }
);

Question - How should I ideally be handling this refreshing of the access token? What I am doing right now - Using a useAccessToken hook as follows -

import { useRealmApp } from "src/store/RealmApp";
import { decodeJwt } from "jose";

export const useAccessToken = () => {
  const app = useRealmApp();
  const getValidAccessToken = async (): Promise<string | null> => {
    const accessToken = app.currentUser?.accessToken;
    const payload = decodeJwt(accessToken);
    if (payload.exp) {
      const isExpired = payload.exp * 1000 < Date.now();
      if (isExpired) {
        // refresh the custom data which will also refresh the access token
        await app.currentUser?.refreshCustomData();
        return app.currentUser?.accessToken;
      } else {
        return accessToken;
      }
    } else {
      console.log("Failed to decode the access token");
    }
    return null;
  };

  return getValidAccessToken;
};

import { useRealmApp } from "src/store/RealmApp";
import { decodeJwt } from "jose";

export const useAccessToken = () => {
  const app = useRealmApp();
  const getValidAccessToken = async (): Promise<string | null> => {
    const accessToken = app.currentUser?.accessToken;
    const payload = decodeJwt(accessToken);
    if (payload.exp) {
      const isExpired = payload.exp * 1000 < Date.now();
      if (isExpired) {
        // refresh the custom data which will also refresh the access token
        await app.currentUser?.refreshCustomData();
        return app.currentUser?.accessToken;
      } else {
        return accessToken;
      }
    } else {
      console.log("Failed to decode the access token");
    }
    return null;
  };

  return getValidAccessToken;
};

Not at all sure if this is what the recommended way is (for example - using a library like jose or an equivalent to decode the jwt). Would really appreciate some confirmation before I make changes in all my tanstack query hooks!

3 Replies

Alky•5mo ago

When the accessToken expires, you're automatically refreshing the token without the user do anything?

jairrard•5mo ago

The refresh (if expired) only happens when an API is being called.

Alky•5mo ago

Well, i don't know what app.currentUser?.refreshCustomData() does, but to me it seems that you're doing the validation on the client-side, but the validation should occur server-side. Your app should be able to automatically handle when the server responds with an "Token expired", to prompt the user(since there is a currentUser, i assume there is a user) to input the credentials again. Right now, it seems that you're refreshing the token without the user pass the credentials again, so it's like an infinite session, unless refreshCustomData()does something else

Gaming

Programming

refreshing access token manually in axios