How to reinit autorefresh session cookie with Nuxt on page reload?

Help
1

Hello Everybody,

I’m using Nuxt to develop a frontend application with Directus SDK. I can successfully authenticate the users using session cookies and the autorefresh works correctly as long as there is client side naviagtion.
But the autorefresh timer stops working when the user reloads the page using the browser button.
How can I restart or reinit the timer so that the users don’t get disconnected during their browsing session ?
Just to add some context, I undertstand that the SDK provides composables to refresh the session. I just don’t know where and how to use it …
Thanks in advance.

6

That haunted me because I was not sure if directus client can trigger auto refresh of tokens without any requests being made after hydration. And in fact I could reproduce the issue. So, to kickstart token refresh after page reload, you have to do basically any request.

I updated the directus plugin to automatically call a token refresh once on client side by adding:

  // Call refresh once on client-side to kickstart auto-refresh after page reload
  if (import.meta.client) {
      const storedData = storage.get();
      if (storedData && typeof storedData === 'object' && 'access_token' in storedData) {
          console.log('🚀 Kickstarting token refresh after page reload');
          directus.refresh().catch(() => {
              console.log('⚠️ Initial token refresh failed - user may need to login again');
          });
      }
  }

The whole plugin looks something like this (quick reproduction, not exactly like in the tutorial)

import {
    createDirectus,
    rest,
    readItems,
    registerUser,
    authentication,
    readMe,
    refresh,
    type AuthenticationStorage
} from "@directus/sdk";

export default defineNuxtPlugin(() => {
    class NuxtCookieStorage {
        cookie = useCookie('directus-data')
        
        get() {
            return this.cookie.value
        }
        
        set(data: any) {
            // Check if this is a token refresh (has access_token and refresh_token)
            if (data && data.access_token && data.refresh_token) {
                console.log('🔄 Directus token refreshed at', new Date().toISOString());
            }
            this.cookie.value = data
        }
    }

    const storage = new NuxtCookieStorage() as AuthenticationStorage

    const directus = createDirectus(
        "http://localhost:8055",
    )
        .with(authentication("cookie", { credentials: "include", storage }))
        .with(rest({ credentials: "include" }));

    // Call refresh once on client-side to kickstart auto-refresh after page reload
    if (import.meta.client) {
        const storedData = storage.get();
        if (storedData && typeof storedData === 'object' && 'access_token' in storedData) {
            console.log('🚀 Kickstarting token refresh after page reload');
            directus.refresh().catch(() => {
                console.log('⚠️ Initial token refresh failed - user may need to login again');
            });
        }
    }

    const isAuthenticated = async () => {
        try {
            const me = await directus.request(
                readMe(),
            );
            return me
        } catch (error) {
            console.error(error);
            return false;
        }
    };

    const refreshToken = async () => {
        return directus.request(
            refresh({ mode: 'cookie' })
        );
    };

    const logout = async () => {
        await directus.logout()
        navigateTo('/login')
    }



    return {
        provide: { directus, readItems, registerUser, isAuthenticated, refreshToken, logout },
    };
});
2

Hello @gkacou

This might help directus-react-google-sso/react/src/lib/directus.ts at master · khanahmad4527/directus-react-google-sso · GitHub

3

Thanks ahmad_quvor for your reply.

As I said, I am using Nuxt. Unfortunately, I don’t have a knowledge of React and I don’t know how to translate your solution to Nuxt.

Moreover, the autorefresh works well with client-side routing / navigation. The issue occurs when the user reloads the page by hitting F5 for example.

Should I use a middleware to reinit the autorefresh ?

4

Check out the Nuxt Tutorial provided by Directus.

5

Thanks Nik,
I did the tutorial on Nuxt, and as I said, the autorefresh works as long as there is client-side navigation. But even with the tutorial, when the user hits F5, the autorefresh timer stops working and the user is disconnected after the cookie expires.

7

Hello Nik ,
Thanks a lot, it works great !
The Nuxt tutorial should be updated with your code :+1:.