Can I use an Axios instance & Next-auth on both the client and in SSR?

[denvudd]

Summary

Hello everyone!
I encountered an issue during the development of my pet project. I am using the Next-Auth Credentials Provider for my backend and Axios to manage API calls. To avoid passing the access token in the headers.Authorization every time, I created an Axios instance that looks like this:

import axios from 'axios';
import { getSession } from 'next-auth/react';

const instance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_BACKEND_API_URL,
});

instance.interceptors.request.use(async (config) => {
  const session = await getSession();

  config.headers.Authorization = `Bearer ${session?.accessToken}`;

  return config;
});

export default instance;

I'm not sure how correct it is to use this code (there might be room for improvement), but it works for me. However, I cannot use this instance in SSR because it relies on getSession internally. Are there any ways to make this instance available both on the server and client or is the only solution to pass the token on the server and use the instance on the client (where there are more requests to private routes)?

Additional information

No response

Example

No response

[AliasgharAhmadpour]

having same problem and tried many days to configure axios and next-auth to work in both server and client component. but no result

[filigreti]

i present to you this, i saw this from a github code block, made some few tweaks....

[filigreti]

`
import axios, { AxiosError } from "axios";
import { GetServerSidePropsContext } from "next";
import { auth } from "@/app/api/auth/[...nextauth]/authOptions";
import { redirect } from "next/navigation";
import { getOut } from "@/app/api/auth/[...nextauth]/actions";

const isServer = () => {
return typeof window === "undefined";
};

let accessToken = "";
let context = {};
const baseURL = "http://localhost:3333";

export const setAccessToken = (_accessToken: string) => {
accessToken = _accessToken;
};

export const getAccessToken = () => accessToken;

export const setContext = (_context: GetServerSidePropsContext) => {
context = _context;
};

export const api = axios.create({
baseURL,
headers: {
"Content-Type": "application/json",
},
withCredentials: true, // to send cookie
});

api.interceptors.request.use(async (config) => {
const session = await auth();
if (session?.user.token !== "") {
config.headers.Authorization = Bearer ${session?.user.token};
}

if (isServer() && context?.req?.cookies) {
config.headers.Cookie = gid=${context.req.cookies.gid};;
}
return config;
});

api.interceptors.response.use(
(response) => {
return response;
},
async (error: AxiosError) => {
if (
error.response?.status === 401 &&
!error.response?.config?.url?.includes("/refresh") &&
!error.response?.config?.url?.includes("login")
) {
return refreshToken(error);
}
return Promise.reject(error);
}
);

let fetchingToken = false;
let subscribers: ((token: string) => any)[] = [];

const onAccessTokenFetched = (token: string) => {
subscribers.forEach((callback) => callback(token));
subscribers = [];
};

const addSubscriber = (callback: (token: string) => any) => {
subscribers.push(callback);
};

const refreshToken = async (oError: AxiosError) => {
const session = await auth();

try {
const { response } = oError;

const retryOriginalRequest = new Promise((resolve) => {
  addSubscriber((token: string) => {
    response!.config.headers["Authorization"] = `Bearer ${token}`;
    resolve(axios(response!.config));
  });
});

if (!fetchingToken) {
  fetchingToken = true;

  const { data } = await api.post("/refresh-token", {
    refresh_token: session?.user.refreshToken,
  });

  if (!isServer) {
    setAccessToken(data.data.token);
  }
  onAccessTokenFetched(data.data.token);
}
return retryOriginalRequest;

} catch (error) {
return Promise.reject(oError);
}
};

`

[ghmeec]

ReferenceError: Cannot access 'WEBPACK_DEFAULT_EXPORT' before initialization

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

auth.ts (9:19) @ authConfig

  7 |     signIn,
  8 |     signOut,
> 9 | } = NextAuth({ ...authConfig });

getting this error when calling auth() in backend