RFC - Better Cookies, Auto refresh tokens, ipv4-first, and add expiration computed values to useTokens

[ranseur92]

Originally, I built my own port of Directus SDK to add features i wanted, But I figured I'd might as well contribute to this 1to make it better for everyone else.

Better refresh Cookie

Specifying the length of the refresh token in the module config/runtime config, we can use that to ensure the cookie lasts as long as it's intended too.

const cookie = useCookie<string | null>('directus_refresh_token', { maxAge: config.public.directus.refresh_token_expires })

IPV4-First

If the users directus url contains localhost, call

    const dns = await import('node:dns')
    if (dns.setDefaultResultOrder) {
      dns.setDefaultResultOrder('ipv4first')
    }

add expiration composables to useTokens

  const expires_in = computed(() => Math.max(0, (expires().value ?? 0) - new Date().getTime()));
  const expired = computed(() => !token().value || expires_in.value == 0);

Would be nice and could aid in benefiting other features of the module, such as when passing the auth token,

  const { token, expired } = useDirectusToken();
  if (token && token.value && !expired.value) {
    headers.Authorization = `Bearer ${token.value}`;
  } else if (config.public.directus.token && useStaticToken) {
    headers.Authorization = `Bearer ${config.public.directus.token}`;
  }

Auto refresh tokens

When using directus, it would be nice if we had an option to refresh tokens before requests if it's missing or expired, and a refresh token exists.

      const authPaths = ['/auth/refresh', '/auth/logout']
      if (!authPaths.includes(path)) {
        if (expired.value) {
          await refreshTokens();
        }
      }

and also, checking the refresh token on app/page load could be nice for OAuth implementations.

import { defineNuxtPlugin, useRuntimeConfig } from '#app'

import { useDirectusTokens } from '../composables/useDirectusTokens';

export default defineNuxtPlugin(async (nuxtApp) => {

  const config = useRuntimeConfig();
  const { auto_refresh } = config.public.directus;

  async function checkRefreshToken() {
    const { token, refreshTokens } = useDirectusTokens();
    if (token.value) await refreshTokens();
  }

  if (auto_refresh) {
    nuxtApp.hook('app:created', async () => {
      if (process.server) {
        await checkRefreshToken();
      }
    })
    nuxtApp.hook('page:start', async () => {
      if (process.client) {
        await checkRefreshToken();
      }
    })
  }
})

I would suggest also editing fetch-user to use the above format, that way it's called when needed.

import { defineNuxtPlugin, useRuntimeConfig } from '#app'

import { useDirectusTokens } from '../composables/useDirectusTokens';
import { useDirectusUser } from '../composables/useDirectusUser';

export default defineNuxtPlugin(async (nuxtApp) => {

  const config = useRuntimeConfig();
  const { auto_fetch } = config.public.directus;

  async function checkIfUserExists() {
    const { access_token } = useDirectusTokens();
    const { user, fetchUser } = useDirectusUser();

    if (!user.value && access_token.value) {
      await fetchUser();
    }
  }

  if (auto_fetch) {
    nuxtApp.hook('app:created', async () => {
      if (process.server) {
        await checkIfUserExists();
      }
    })
    nuxtApp.hook('page:start', async () => {
      if (process.client) {
        await checkIfUserExists();
      }
    })
  }
})

[Intevel]

Hey @ranseur92!
First of all, thank you for this great RFC.

Better refresh Cookie

In #131 we talked about adding the maxAge to both token cookies,
There are currently some problems with the Reactivity of useCookie, we stay with this feature until they go fixed.
But this is great, and we want to implement this.

IPV4-First

This is not a problem which is caused by nuxt-directus so this module shouldn't control that, also this can lead to issues in serverless deployment.

If a recommendation from the Nuxt team is in favor of implementing this fix, we can talk about it. But for now, we don't want to that. But we can make an Information in the documentation for all who gets the problem.

Expiration composables

This is a great idea and we will implement this soon, with this composables the handling of expires date will be better.

Thinking about adding this to the useDirectusToken composable

const expires_in = computed(() => Math.max(0, (expires().value ?? 0) - new Date().getTime()));
const expired = computed(() => !token().value || expires_in.value == 0);

Auto-Refresh Tokens

Adding this to a plugin would be a great idea, we have to check in how this causes maybe a breaking change and if they are other alternatives.

@casualmatt Thought about adding this to the useDirectus composable, whenever a request will fail by an auth issue, nuxt-directus will try to refresh the tokens.

But maybe a plugin which uses the expiration date would be better.
What do you think about this?

---

Thank you @ranseur92 for this RFC 💚

[casualmatt]

Expiration composables

Yes I think I will add them to useDirectusToken

Auto-Refresh Tokens

We can, for now, add it to the docs as we did for the middleware example.
And then take our time to see possible breaking changes (getting feedback from the community) or if we really will switch to useFetch then the refresh in useDirectus make more sense.

[ranseur92]

if it's ok with @casualmatt and @Intevel I have already develop all features of this RFC. I can port them to this library except the ipv4-first, and submit a PR? Everything will be opt-in based off of config, so no breaking changes.

[casualmatt]

Yes,
Just open a PR so that we can take a look together.

[casualmatt]

Closed with #142