Occassional data leak across requests with SSR

[rvdriest]

Every once in a while, all of a sudden all users are logged in as the same user. I suspect it has to do with our usage of the pinia store within our nuxt plugin. The plugin code looks as follows:

import type { Pinia } from 'pinia';
import type { LoginResponse } from '~/utils/types';

export default defineNuxtPlugin((ctx) => {
  const runtimeConfig = useRuntimeConfig();
  const baseURL = runtimeConfig.public.apiBaseUrl || 'localhost:8000/api';
  const $pinia = ctx.$pinia as Pinia;

  const $api = $fetch.create({
    baseURL,
    retryStatusCodes: [401],
    retry: 1,
    onRequest({ options }) {
      const authStore = useAuthStore($pinia);
      if (authStore.isLoggedIn && authStore.accessToken) {
        options.headers = {
          ...options.headers,
          Authorization: `Bearer ${authStore.accessToken}`,
        };
      }
    },
    onResponseError: ({ response }) => {
      const authStore = useAuthStore($pinia);
      if (response.status === 401) {
        return $fetch<LoginResponse>('/auth/refresh', {
          method: 'POST',
          baseURL,
          headers: {
            Authorization: `Bearer ${authStore.refreshToken}`,
          },
          body: {
            refresh_token: authStore.refreshToken,
          },
        }).then((response) => {
          authStore.signIn(response);
        }).catch(async () => {
          authStore.logout();
          await navigateTo('/login');
        });
      }
    },
  });

  return {
    provide: {
      api: $api,
    },
  };
});

Am I doing something wrong here? I can't really reproduce it since it only happens once in a while.

For fuller context I use this composable as a useFetch wrapper:

export function useFetchAPI<T>(url: string | (() => string), options: UseFetchOptions<T> = {}) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api,
  });
}

And this is the auth store:

import { defineStore } from 'pinia';
import type { UserProfile } from '~/utils/types';

export const useAuthStore = defineStore(
  'auth',
  () => {
    const accessToken = ref('');
    const refreshToken = ref('');
    const profile = ref<UserProfile | null>(null);

    const isLoggedIn = computed(() => !!accessToken.value);

    function signIn(login: LoginResponse) {
      accessToken.value = login.access_token;
      refreshToken.value = login.refresh_token;
      profile.value = login.user;
    }

    function logout() {
      accessToken.value = '';
      refreshToken.value = '';
      profile.value = null;
    }

    return {
      accessToken,
      refreshToken,
      profile,
      logout,
      isLoggedIn,
      signIn,
    };
  },
  {
    persist: {
      storage: piniaPluginPersistedstate.cookies(),
    },
  },
);

[jamsmd]

@rvdriest Did you fix it?

[aymenhmaidiwastaken]

This is a classic SSR cross-request state pollution bug. In your Nuxt plugin, you're creating a $fetch instance that captures the Pinia store — but during SSR, multiple requests share the same server process, and if the store state bleeds between requests, all users see the same session.

The root cause is usually one of:

1. Store state not being reset between SSR requests. Pinia stores in Nuxt must be created per-request. If you're accessing a store outside of a Nuxt context (e.g., in a module-scoped singleton), it persists across requests.

2. The $fetch plugin capturing a single store instance. Your plugin creates api once and binds it to the store from the first request. Subsequent SSR requests reuse the same plugin instance with stale state.

Fix:

Make sure you access the store inside each request, not at plugin initialization:

export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({
    async onRequest({ options }) {
      // Get fresh store state per request
      const sessionStore = useSessionStore(nuxtApp.$pinia);
      const token = sessionStore.token;
      if (token) {
        options.headers = {
          ...options.headers,
          Authorization: `Bearer ${token}`,
        };
      }
    },
  });

  return { provide: { api } };
});

Also ensure:

• You're using useSessionStore() inside request handlers/composables, never at module scope
• Your Pinia store uses useState or is properly scoped per-request in Nuxt
• Check that useRequestHeaders or cookies are read per-request, not cached

This is a critical security issue — I'd prioritize fixing it. The pattern is almost always "store accessed at module scope or plugin init instead of per-request".