Refresh Auth Token and User data

[casualmatt]

Hello,

I notice that the module misses the token refresh token in the cookie or local/session-storage, which means that is not possible to refresh the token.

Is that intentional?

Another improvement could be to add user data on the cookie or session storage, with the same life-span of the main token, so that we don't need to fetch the username so many times, and it should give a small boost to performances, and use fewer resources on the back end.

Especially if you use the user information to understand if the user is login.
Check here for an example of a Real-life use: #14

[Intevel]

Hey, you're right about that. Currently there is no way to refresh the token via the module, it would be good if you could. 💚

Also it makes sense to be able to set the storage option for the token to switch between cookie, localStorage and also sessionStorage.

[Intevel]

All clear! I can understand that and like to see any PRs no matter if docs or module. I will create a PoC for this idea, and tag you.

[casualmatt]

Big question, do you want to build the module as a standalone module(if i remeber correcly the directusSDK include those option) or will you be open to use Pinia as a dependency to manage the storage option?

Because Vuex, is no longer the default "state management library" for vue3 so that is probably out of the option.

[Intevel]

I will be open to all options, but currently standalone.

[Nisthar]

All clear! I can understand that and like to see any PRs no matter if docs or module. I will create a PoC for this idea, and tag you.

does this mean it won't support ssr?

[casualmatt]

won't support ssr

No, it was a reply to my statement, that i can just contribute with documentation.

@Danielwinkelmann for example in his MR, has taken in consideration SSR.

[Danielwinkelmann]

Hello together 👋,
I notice that the refresh token flow is not implemented, too.
I'm would like to implement this feature.
I think cookie is the best storage for Nuxt Projects because Nuxt can't access the local storage on the server site.
With Nuxt 3 State their is no need for Vuex/Pinia.
What u think @Intevel ?

[casualmatt]

Pinia support for Nuxt3 is already there, you can find it on the compatible modules for the 3 version (2, bridge, 3).
For what to do, is more on @Intevel, the SDK can be use to adopt the Local and Session storage or can be use an external library/module to do it, like Pinia.

[Danielwinkelmann]

Its not a good practice, to rely on to many external packages. I see this module as a lightweight opportunity, to access the Directus CMS in your Nuxt 3 Project.

[Danielwinkelmann]

@casualmatt I created a PR maybe u can test it with your project?

[Intevel]

I will take a look at it.

[Intevel]

The question is, should we merge #16 with the current cookie options or wait until we also have localStorage support built in. Possibly Pinia?

[casualmatt]

Pinia is now the de facto state manager for Vue 3.

So that could be a good fit, and support all the storage type.

But the module will not be a self contained module.

[iojanis]

I'm sorry to ask, but is there some progress on this?
This feels like a very important feature to me.

[khanetor]

What is this v3.3.0? Nuxt version number?

I also noticed that this module does not leverage Directus SDK. Is this due to legacy reason? I may start a PR to use Directus SDK while keeping the same api if that is desirable.

[casualmatt]

In the latest version, you have composables for refreshing your token.
Here is it

About the SDK:
It is a choice not to use the SDK; the SDK use Axios is not advised with nuxt 3, nuxt 3 is based on unJS, and it offers ofetch as fetch API .
BTW the same has been done for strapi nuxt module.

I'm already working/trying to use ofetch Interceptors and useFetch to improve the dev experience, but for now, you already have a complete set of composables to work with.

[khanetor]

I tried the "refreshTokens" method before, but it always results in 401 error. The refresh token became invalid for some reason, even though I can see new refresh token after the first successful refresh.

Here is my middleware, I am still not sure how best to call refresh.

export default defineNuxtRouteMiddleware(async (_to, _from) => {
    const { token, refreshTokens, expires } = useDirectusToken()
    
    if (expires.value - new Date().getTime() < 0) {
        await refreshTokens()
    }
    
    const user = useDirectusUser()
    const { onLogin } = useApollo()

    if (!user.value) {
        return navigateTo('/login')
    } else {
        onLogin(token.value)
    }
})

[Intevel]

@nlhkh It doesn't get automatically refreshed.

[khanetor]

@nlhkh It doesn't get automatically refreshed.

I think we have already established that. The issue is how to best refresh the token given the current status of this module.