Synchronization Issue Between next-auth Session and useSWR Fetching

[Johncena-Huang]

Title: Synchronization Issue Between next-auth Session and useSWR Fetching

Description:

I’m using next-auth with useSWR for data fetching, and I'm trying to set up an Axios interceptor to add an Authorization token to the request headers. However, I’m encountering a synchronization issue where useSWR is firing before I reset the axios interceptor.

Steps to Reproduce:

1. Use useSWR to fetch data with Axios.
2. In the Axios request interceptor, set the Authorization header with the token from next-auth's useSession().
3. useSWR is called before the axios interceptor is reset.

Code Example:

Global setup

// src/providers/session-provider.ts
"use client";
import { ReactNode, useEffect } from "react";
import { useSession } from "next-auth/react";
import { setAxiosInteceptors } from "@/utils/fetcher";
import { useIsomorphicLayoutEffect } from "ahooks";

export default function SessionProvider({ children }: { children: ReactNode }) {
  const { data: session } = useSession();

  useIsomorphicLayoutEffect(() => {
    if (session) {
      setAxiosInteceptors(session);
    }
  }, [session]);

  return children;
}

// src/app/[locale]/layout.tsx
import SessionProvider from "@/providers/session-provider";

<AuthProvider session={session}>
  <SessionProvider>
    <NextIntlClientProvider messages={messages}>
      {children}
    </NextIntlClientProvider>
  </SessionProvider>
</AuthProvider>

My fetcher

// src/utils/fetcher.ts
import axiosInstance from 'axios';

export function setAxiosInteceptors(session: Session): void {
  axiosInstance.interceptors.request.use(
    config => {
      const token = session?.token;
      if (token) {
        config.headers["Authorization"] = `Bearer ${token}`;
      }
      return config;
    },
    error => Promise.reject(new Error(error.message))
  );
}

export const fetcher = async <T>(url: string, options: FetcherOptions = {}): Promise<T> => {
  const response = await axiosInstance({ url, ...options });
  return response.data.data as T;
};

How the fetcher is used

// src/components/test.ts
const { status } = useSession();
const { data: priceItemList } = useSWRImmutable(
  status === "authenticated" ? ["priceList", params] : null,
  ([url, params]) => fetcher(url, params as FetcherOptions),
  { keepPreviousData: true }
);

Expected Behavior:

when useSWR calls the fetcher, axios instance interceptor should already be synchronized with useSession.

Environment:

• SWR version: [2.2.5]
• React version: [18]
• Next.js version: [14.2.16] app router
• Axios version: [1.7.7]
• next-auth version: [4.24.10]