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(),
    },
  },
);