Automatically refresh token via timeout

[matt-clegg]

I've noticed that the auth token will expire if the user idles on the same page for some time.

This can be an issue if the user can interact with the Directus backend through a Nuxt page, for example the user could create or update an item in a collection that requires the user to be logged in.

Could the module be extended with a plugin that automatically calls refreshTokens(), probably with a timeout based on the expires value from the useDirectusToken() composable?

Admittedly my ACCESS_TOKEN_TLL is set to the default of 15 minutes, but it means the user will be considered logged out if they interact with the page after being idle for over 15 minutes.

[matt-clegg]

I've written an auth refresh client side plugin which seems to achieve what I'm after.

• If the user is logged in on page load, the plugin will check the expires token and either:
  • Immediately call refreshTokens if the expires token value is close enough to 0
  • Create a timeout which will call refreshTokens then queue another timeout
• If the user logs out while the timeout is waiting to finish, the call to refreshTokens will not happen and another time out will not be queued
• The plugin will also watch the Directus user ref, if the user logs in it will queue the timeout

Here's the source code if anyone would like to try it out or has any suggestions:

export default defineNuxtPlugin(async () => {
  const { expires, refreshTokens, refreshToken } = useDirectusToken();
  const user = useDirectusUser();

  watch(user, async (val, oldVal) => {
    if (!oldVal && val) {
      // User has logged in, begin auto refresh
      await checkRefresh();
    }
  });

  let windowTimeout: number | null = null;

  async function checkRefresh () {
    if (isNaN(expires.value)) {
      return;
    }

    const expiresInMs = expires.value - Date.now();
    // Add a small buffer window to the expire time when refreshing tokens
    const expiresBufferMs = 10_000; // 10 seconds

    if (isNaN(expiresInMs)) {
      return;
    }

    if (!refreshToken.value) {
      return;
    }

    if (expiresInMs > expiresBufferMs) {
      // The token will expire some time after the buffer window
      const timeout = expiresInMs - expiresBufferMs;

      if (timeout > 1) {
        if (windowTimeout) {
          window.clearTimeout(windowTimeout);
        }

        windowTimeout = window.setTimeout(async () => {
          if (!user.value) {
            // The user has logged out so we won't perform the auto refresh or queue another timeout
            return;
          }

          await refreshTokens();
          await checkRefresh();
        }, timeout);
      } else {
        throw new Error(`Expires timeout was less than 1: '${timeout}'`);
      }
    } else {
      // The token has already expired, or we are in the buffer window
      await refreshTokens();
      await checkRefresh();
    }
  }

  await checkRefresh();
});