How can I attach my JWT to every axios call?

[kamal-choudhary]

Question 💬

I am building a Next.js application. I am using NextAuth for authentication and Axios for API calls.

The problem I am facing is that I want to attach the JWT with every Axios call I make.

I have an Axios instance created as:

axios-client.js

const ApiClient = () => {
  const defaultOptions = {
    baseURL,
  };

  const instance = axios.create(defaultOptions);

  instance.interceptors.response.use(
    (response) => {
      return response;
    },
    (error) => {
      console.log(`error`, error);
      throw new Error(error.response.data.message);
    },
  );

  return instance;
};

export default ApiClient();

I can get the jwt from getSession() function.

But the problem is that function is asynchronous. If I try to get JWT from this from the getSession() function, I always get a "Promise" instead of value.

I can't use the useSession() hook as this is a plain Javascript function instead of React component.

PS: I am using Strapi which sends the JWT after successful login.

How to reproduce ☕️

N/A

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[jaketoolson]

useSession() can only be used for client side. getSession is used for client and server side.

You can make the code you have use async/await:

async (response) => {
      const session = await getSession();
      if (session) {
        request.headers.Authorization = `Bearer ${session.accessToken}`;
      }
      return response;
    },

[nirglow]

I am struggling with this too. It seems like the alternatives are:
(1) Passing the accessToken throughout the entire code
(2) Using getSession() for client side calls, which results in additional API calls, and doesn't work for server side rendering.

@balazsorban44 do you have any suggestions on this?

[FeMaffezzolli]

+1

[nik32]

@nirglow and @FeMaffezzolli can you guys look into the solution I have posted in this discussion. This is the link - #3550 (reply in thread). Do let me know the concerns you have... as it will help me improve my solution

[IamDieuKhanh2001]

How can we edit the session in server side sir ?. Im truggling with it

[whateverneveranywhere]

any ideas on how to remove the session from cookie storage in a server-sided manner (that doesn't trigger 'use client' error) in the case of getting a specific error code?

// Response interceptor
	this.axiosService.interceptors.response.use(
		(response: AxiosResponse<ApiResponseData>) => response,
		(error) => {
			if (error.response.status === 403 || error.response.status === 401) {
				// remove next-auth session
			}
			if (error.response.data && error.response.data.detail && error.config.hasToast) {
				ErrToast(error.response.data.detail);
			}

			return Promise.reject((error.response.data as TError) || error.message);
		}
	);

[kamal-choudhary]

@jaketoolson thanks for the great help. It fixed my issue.

For future readers, this is the Axios instance I am using and it is working fine for me.

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

const baseURL = process.env.SOME_API_URL || 'http://localhost:1337';

const ApiClient = () => {
  const defaultOptions = {
    baseURL,
  };

  const instance = axios.create(defaultOptions);

  instance.interceptors.request.use(async (request) => {
    const session = await getSession();
    if (session) {
      request.headers.Authorization = `Bearer ${session.jwt}`;
    }
    return request;
  });

  instance.interceptors.response.use(
    (response) => {
      return response;
    },
    (error) => {
      console.log(`error`, error);
    },
  );

  return instance;
};

export default ApiClient();

[Webbrother]

@nik32
As far as I understand your solution will request token on every API call if you are not authorized. Am I right? If so, this solution solve the problem for 50% only.

PS
Please use code alignment and formatting to make it more readable.

\```typescript
   ... your code here
\```

[nik32]

@Webbrother yes... but if the there is no token then the user will be redirected to login page and ideally he should then login. So that situation should not arise often until and unless the user is a bogus user, trying to take our site down.

[nik32]

@Webbrother Do let me know any other reservations you have about this solution. It will let me know the cases I have not solved for.

[IamDieuKhanh2001]

Can we edit properties of session in interceptor response of axios sir ?. Im strugling with this one

[diep89]

Hi there, I've implemented a workaround for this, it'd be great the hear feedback for whether it's a good temporary solution or a bad workaround. It's been working smoothly really.

I created a custom hook that returns the axios instance that should be passed down to the endpoint function.

const useAuth = () => {
  const { data: session, update } = useSession();

  ...

  // function that sets up interceptor request
  const setUpInterceptorRequest = session => {
    return axiosInstance.interceptors.request.use(
      config => {
        if (!config.headers.Authorization)
          config.headers.Authorization = `Bearer ${session?.auth?.access_token}`;

        return config;
      },
      error => Promise.reject(error)
    );
  };

  // function that sets up interceptor response
  const setUpInterceptorResponse = () => {
    return axiosInstance.interceptors.response.use(
      response => response,
      async error => {
        const { response } = error;
        const originalRequest = error.config;

        if (!response || response.status !== 401 || originalRequest._retry)
          return Promise.reject(error);

        originalRequest._retry = true;

        // if http response is 401, getSession() is called, which triggers the refresh token flow
        // server-side (implemented on jwt callback following the refresh token rotation example
        // on next auth page). This 'refreshedSession' has the refreshed access token, which is set
        // on the originalRequest Authorization header. However, before returning a new axios instance call 
        // with this new header, next auth update method is called, which updates the current token info
        // with the refreshed one. Might seem weird but it actually works; besides, if I didn't call update()
        // the useSession hook would provide the expired access token (in other words, calling getSession()
        // here does not update session data despite triggering the jwt and session callbacks). 
        try {
          const refreshedSession = await getSession();
          if (!refreshedSession) return Promise.reject(error);
          if (refreshedSession.error) {
            await customSilentSignIn({ provider: refreshedSession.auth.provider });
            return Promise.reject(error);
          }
          originalRequest.headers.Authorization = `Bearer ${refreshedSession.auth.access_token}`;
          await update();
          return axiosInstanceAlt(originalRequest);
        } catch {
          return Promise.reject(error);
        }
      }
    );
  };

  useEffect(() => {
    const request = setUpInterceptorRequest(session);
    const response = setUpInterceptorResponse();

    return () => {
      axiosInstance.interceptors.request.eject(request);
      axiosInstance.interceptors.response.eject(response);
    };
  }, [session]);

  return {
    axiosInstance,
    ...
  };
};

Would appreciate any feedback on this solution. Been struggling with the refresh token rotation and this was actually
the best solution I came up with to make it work along with an axios interceptor set up.
Clear drawback is that in every component that needs to make an api call, axiosInstance should be provided, but couldn't find a better solution.

[pvandamme]

Hi there, I've found a solution that works great for me :

I have a simple axios instance and a setToken function :

// http.ts
import axios from 'axios'

const http = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_PATH,
})

const setToken = (token: string) => {
  http.defaults.headers.common['Authorization'] = `Bearer ${token}`
}

export { http, setToken }

Then I have a wrapper component that manage my session, when session.status === authenticated, I just call my setToken function with my new token.

// SessionLoader.tsx
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/router'
import { setToken } from '../utils/http.utils'

const SessionLoader = ({ children }: { children: React.ReactNode }) => {
  const router = useRouter()
  const session = useSession()

  if (session.status === 'loading') {
    return <div className="loading" />
  }

  if (session.status === 'authenticated') {
    setToken(session.data.user.access_token)
  }

  if (router.pathname === '/auth/login' && session.status === 'authenticated') {
    router.push('/admin')
  }

  return <>{children}</>
}

export default SessionLoader

I've stress tested this solution in my project and it work like a charm !

@always-maap maybe it can help you :)

[neotrow]

Not sure what you mean by that.

You can find the source code here:
https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react/index.tsx#L327

And as mentioned in my previous answer the session is refetched based on a time interval, as seen here:
https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react/index.tsx#L440

So if you pass 10 to the SessionProvider refetchInterval the session will get refetched every 10 seconds. You will also be able to see this in your browsers network monitor.

Futhermore the SessionProvider component useses a React.Context. Which means everytime the session is updated all the components that use the useSession hook will get rerendered and therfore receive the new values.

[Webbrother]

@neotrow if you don't understand the question why you answering to it? Btw the question was addressed not to you.

[neotrow]

Curious to hear if @pvandamme has a better answer

[nik32]

@pvandamme How are you handling handling the case of refresh token? If you don't have refresh token... then how are you handling the case when access token gets expired while the user is performing some action on your site

[coder054]

great

[modbender]

I'm doing what @pvandamme showed, thank you for that.
But instead of SessionLoader, I'm wrapping useSession like this:

export const useAuth = () => {
  const { data, status } = useSession();

  if (status !== "loading") {
      if (status === "authenticated") {
        setAuthToken(data.accessToken);
      } else if (status === "unauthenticated") {
        setAuthToken("");
      }
    }

  return {
    session: data,
    loading: status === "loading",
    isAuthenticated: status === "authenticated",
  };
};

Also setting my token like this:

const setAuthToken = (token) => {
  if (!!token) {
    axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token}`;
  } else {
    delete axiosInstance.defaults.headers.common["Authorization"];
  }
};

[nik32]

@modbender How are you handling handling the case of refresh token? If you don't have refresh token... then how are you handling the case when access token gets expired while the user is performing some action on your site

[modbender]

@nik32 2 things

1. I didn't handle it, I had to keep the login Max age to arround 2 days. It was a really stupid idea but didn't get a good workaround for this at the end.
2. I switched away from NextJS, for all that it's good, react js sucks, limitations, the number of imports and optimising them sucked. And also these auth problems. I'm now using Nuxt js, and Nuxt-auth which is a port of next auth allows me to use auth without much of worries. And also let's me forget about importing each component or module I want to use thanks to auto import.

[nik32]

@modbender Thanks for your prompt reply. Even I have started to face problems while integrating refresh token. Still trying to think for solutions

[Phoenix-Alpha]

I recommend using secure, http only cookies to store access token and use it for axios

[neotrow]

@Phoenix-Alpha

Can you elaborate what you mean by that?

[jasondicker]

For anyone running into the same issue, I found the above solutions not to be sufficient (getSession is called on every Axios request, and it didn't work with refreshed tokens).

See my implementation of an Axios client. Multiple calls to the server (getSession) are avoided by checking if the session is still valid. This also works for tokens that have been silently refreshed.

const ApiClient = () => {
  const instance = axios.create({
    baseURL: env.NEXT_PUBLIC_API_BASE_URL,
  });

  let lastSession: Session | null = null;

  instance.interceptors.request.use(
    async (request) => {
      if (lastSession == null || Date.now() > Date.parse(lastSession.expires)) {
        const session = await getSession();
        lastSession = session;
      }

      if (lastSession) {
        request.headers.Authorization = `Bearer ${lastSession.accessToken}`;
      } else {
        request.headers.Authorization = undefined;
      }

      return request;
    },
    (error) => {
      console.error(`API Error: `, error);
      throw error;
    }
  );

  return instance;
};

[viniciuslk]

How can I switch between server-side and client-side requests? I'm using Next.js 13 with app folder and sometimes a request should be on the server or in the client, but I'm not finding a good way to set it automatically on my axiosInstance.

Should I validate if in the client getSession or getServerSession if in the server?

[emreastarcioglu]

I am also interested for app directory hacks. Because, when I've tried the hacks above with getSession()/getServerSession(), I got undefined or null for session value in axios request interceptor. I dunno if this is related with app directory or stem from other sources.

[viniciuslk]

Yes, my workaround was:

1. Create a function called authHeadersFactory();
2. Set use server;
3. Enable server actions at next.config.js
4. Always use getServerSession()

It has worked so far, but I know this is not the best solution.

[pauloreis7]

I managed to arrive at this solution by handling tokens both in the client components and on the server side with next 13.

I'm not calling getSession with each request only when I identify that the Authorization header of the axios instance is empty.

My api client:

const ApiClient = () => {
  const microsoftAdApi = axios.create({
    baseURL: 'https://graph.microsoft.com/v1.0/',
  })

  microsoftAdApi.interceptors.request.use(async (request) => {
    if (request.headers.Authorization) return request

    const session = await getSession()

    if (session) {
      const authHeaderValue = `Bearer ${session.accessToken}`

      request.headers.Authorization = authHeaderValue
      microsoftAdApi.defaults.headers.common.Authorization = authHeaderValue
    }

    return request
  })

  microsoftAdApi.interceptors.response.use(
    (response) => response,
    async (error: AxiosError) => {
      toast.error('expired session')

      microsoftAdApi.defaults.headers.common.Authorization = undefined
      await signOut({ callbackUrl: '/' })

      return Promise.reject(error)
    },
  )

  return microsoftAdApi
}

export const microsoftAdApi = ApiClient()

my next auth config:

    async redirect({ url, baseUrl }) {
      // These conditions redirect user after a successful login
      if (url.startsWith('/')) return `${baseUrl}${url}`
      else if (new URL(url).origin === baseUrl) return url

      return baseUrl
    },
    async jwt({ account, token, user, profile }) {
      if (profile) {
        user.email = profile.email!
        token.name = profile.name
        token.email = profile.email
      }

      if (account) {
        token.accessToken = account.access_token ?? ''
        microsoftAdApi.defaults.headers.common.Authorization = `Bearer ${token.accessToken}`
      }

      return token
    },
    async session({ token, session }) {
      if (token) {
        session.user.id = token.sub!
        session.accessToken = token.accessToken

        microsoftAdApi.defaults.headers.common.Authorization = `Bearer ${token.accessToken}`
      }

      return session
    },
  },

This way I guarantee that the token will always be set in the axios instance both on the client and on the front, without making many calls to getSession.

[ozergul]

it kinda worked for me, thanks.

[asadishfaq]

Question 💬

I'm building a Next.js application using Axios for API calls. I've created a separate service for Axios on the client-side and an authService for handling login. The login method takes email and password, hits a login endpoint, and returns the authToken and refreshToken. I can then store the accessToken in cookies (or somewhere else), and this works fine. However, after the token expires, the interceptor refreshes the token and makes subsequent API calls. Even though the refresh token provides the correct response, I suspect there might be an issue with the cookies. I'm not sure what's causing the problem.

`import axios from "axios";
import AuthService from "./AuthService";
export const dynamic = "force-dynamic";

const apiService = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_URL,
headers: {
"Content-Type": "application/json",
},
});

apiService.interceptors.request.use(
async (config) => {
let token;
if (typeof window === "undefined") {
console.log("inside server");
const { cookies: serverCookies } = await import("next/headers");
serverCookies().set
token = serverCookies().get("user_token")!.value;
} else {
console.log("inside client");
const { default: clientCookies } = await import("js-cookie");
token = clientCookies.get("user_token");
}
// const token = Cookies.get("user_token");

console.log("token in interceptor:", token);
if (token) {
  config.headers.Authorization = `Bearer ${token}`;
}
return config;

},
(error) => Promise.reject(error),
);

apiService.interceptors.response.use(
(response) => response,
async (error) => {
if (error.response && error.response.status === 401) {

  try {
    let refreshToken;
    if (typeof window === "undefined") {
      const { cookies: serverCookies } = await import("next/headers");
      refreshToken = serverCookies().get("user_refresh_token")!.value;
    } else {
      const { default: clientCookies } = await import("js-cookie");
      refreshToken = clientCookies.get("user_refresh_token");
    }
    if (!refreshToken) throw new Error("Refresh Token Not Found");

    const { access_token, refresh_token } =
      await refreshAuthToken(refreshToken);

    AuthService.setUserAuthenticationToken({ access_token, refresh_token });

    error.config.headers.Authorization = `Bearer ${access_token}`;
    return apiService.request(error.config);
  } catch (refreshError) {
    console.error("Failed to refresh token:", refreshError);
    return Promise.reject(refreshError);
  }
}
return Promise.reject(error);

},
);

async function refreshAuthToken(refreshToken: string) {
try {
const response = await axios.post(
"endpointurl",
{ refresh_token: refreshToken },
);
console.log("response of refreshAuthToken :", response.data);
return response.data;
} catch (error) {
console.error("Failed to refresh token:", error);
throw new Error("Failed to refresh token");
}
}

const ApiService = {
async get(endpoint: string, params = {}) {
try {
const response = await apiService.get(endpoint, { params });
return response.data;
} catch (error) {
throw error;
}
},

async post(endpoint: string, data = {}, config = {}) {
try {
const response = await apiService.post(endpoint, data, config);
return response.data;
} catch (error) {
throw error;
}
},

async postFormData(endpoint: string, formData: FormData, token: string) {
try {
const response = await apiService.post(endpoint, formData, {
headers: {
"Content-Type": "multipart/form-data",
Authorization: Bearer ${token},
},
});
return response.data;
} catch (error) {
throw error;
}
},

async put(endpoint: string, data = {}, config = {}) {
try {
const response = await apiService.put(endpoint, data, config);
return response.data;
} catch (error) {
throw error;
}
},

async patch(endpoint: string, data = {}, config = {}) {
try {
const response = await apiService.patch(endpoint, data, config);
return response.data;
} catch (error) {
throw error;
}
},

async delete(endpoint: string, config = {}) {
try {
const response = await apiService.delete(endpoint, config);
return response.data;
} catch (error) {
throw error;
}
},
};
`
export default ApiService;
here is my piece of code

[alarbada]

everybody here overcomplicates this to the extreme:

import { useAuth } from "@clerk/clerk-react"
import axios from "axios"

axios.defaults.baseURL = env.API_BASE_URL

let usedInterceptor = false

export function useInterceptor() {
  const { getToken } = useAuth()

  if (usedInterceptor) return

  axios.interceptors.request.use(async (config) => {
    const token = await getToken()
    config.headers["Content-Type"] = "application/json"
    config.headers.Authorization = `Bearer ${token}`

    return config
  })

  usedInterceptor = true
}

To use in client side react. This is the default axios client, but you can tweak this to put your custom client if u want.

[alancapellao]

This is the solution I arrived at, I will be accepting feedback and improvements, Thank you!

api.ts
`import axios from 'axios';
import { getSession } from 'next-auth/react';
import { signOut } from '@/auth';
import { getToken } from 'next-auth/jwt';

const apiUrl = 'http://api:80';

let isRefreshing = false;
let failedQueue = [];

const processQueue = (error, token = null) => {
failedQueue.forEach(prom => {
if (error) {
prom.reject(error);
} else {
prom.resolve(token);
}
});

failedQueue = [];

};

const setupAxiosInstance = async (req) => {
const token = await getToken({ req, secret: process.env.AUTH_SECRET, secureCookie: process.env.SECURE_COOKIE === 'true' });

const instance = axios.create({
    baseURL: apiUrl,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token?.accessToken}`,
    },
});

instance.interceptors.response.use(
    response => response,
    async error => {
        const { response } = error;

        if (response && response.status === 401) {
            const originalRequest = error.config;

            if (!isRefreshing) {
                isRefreshing = true;

                try {
                    const session = await getSession();
                    const newToken = session?.accessToken;

                    if (newToken) {
                        originalRequest.headers['Authorization'] = `Bearer ${newToken}`;
                        processQueue(null, newToken);
                    } else {
                        throw new Error("Failed to refresh access token");
                    }
                } catch (err) {
                    processQueue(err, null);
                    await signOut();
                    return Promise.reject(err);
                } finally {
                    isRefreshing = false;
                }
            }

            return new Promise((resolve, reject) => {
                failedQueue.push({ resolve, reject });
            }).then((token) => {
                originalRequest.headers['Authorization'] = `Bearer ${token}`;
                return axios(originalRequest);
            }).catch((err) => {
                return Promise.reject(err);
            });
        }

        return Promise.reject(error);
    }
);

return instance;

};

export default setupAxiosInstance;
`

// auth.config.ts
`import type { NextAuthConfig } from 'next-auth';

const TOKEN_EXPIRATION_MARGIN = 1 * 60 * 1000;

export const authConfig = {
session: {
strategy: 'jwt',
},
pages: {
error: '/',
signIn: '/',
signOut: '/',
},
callbacks: {
authorized({ auth }) {
const isAuthenticated = !!auth?.user;
return isAuthenticated;
},
async jwt({ token, user }) {
if (user) {
token.accessToken = user.access_token;
token.refreshToken = user.refresh_token;
token.accessTokenExpires = Date.now() + user.expires_in * 1000;
token.user = user.user;
}

  if (Date.now() < token.accessTokenExpires - TOKEN_EXPIRATION_MARGIN) {
    return token;
  }

  return refreshAccessToken(token);
},
async session({ session, token }) {
  session.user = token.user;
  session.accessToken = token.accessToken;
  session.error = token.error;
  return session;
}

},
providers: [],
} satisfies NextAuthConfig;

export async function refreshAccessToken(token) {
try {
const url = 'http://api:80/oauth/token';

const response = await fetch(url, {
  headers: {
    "Content-Type": "application/json",
  },
  method: "POST",
  body: JSON.stringify({
    grant_type: "refresh_token",
    refresh_token: token.refreshToken,
    client_id: process.env.CLIENT_ID,
    client_secret: process.env.CLIENT_SECRET,
  }),
});

const refreshedTokens = await response.json();

if (!response.ok) {
  throw new Error('Failed to refresh access token');
}

return {
  ...token,
  accessToken: refreshedTokens.access_token,
  refreshToken: refreshedTokens.refresh_token || token.refreshToken, // Manter o mesmo refresh token se não for atualizado
  accessTokenExpires: Date.now() + refreshedTokens.expires_in * 1000,
};

} catch (error) {
console.log(error);

return {
  ...token,
  error: "RefreshAccessTokenError",
};

}
}
`

// auth.ts
`import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';

async function getUser(accessToken: string): Promise {
const response = await fetch('http://api:80/api/user', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': Bearer ${accessToken},
},
});

    const user = await response.json();

    if (response.ok) {
            return user;
    } else {
            return null;
    }

}

export const {
auth,
signIn,
signOut,
handlers: { GET, POST },
} = NextAuth({
...authConfig,
providers: [
Credentials({
name: 'credentials',
credentials: {
email: { label: 'email', type: 'text' },
password: { label: 'password', type: 'password' },
},
async authorize(credentials) {
const response = await fetch('http://api:80/oauth/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({
username: credentials.email,
password: credentials.password,
grant_type: 'password',
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
}),
});

                            if (response.ok) {
                                    const data = await response.json();
                                    const user = await getUser(data.access_token);

                                    if (user) {
                                            return {
                                                    ...data,
                                                    user: {
                                                            ...user,
                                                    },
                                            };
                                    } else {
                                            return null;
                                    }
                            } else {
                                    return null;
                            }
                    },
            }),
    ],

});`

// middleware.ts
`import NextAuth from 'next-auth';
import { authConfig } from '@/auth.config';
import { DEFAULT_REDIRECT, PUBLIC_ROUTES, ROOT } from '@/lib/routes';

const { auth } = NextAuth(authConfig);

export default auth((req) => {
const { nextUrl } = req;

const isAuthenticated = !!req.auth;

const isPublicRoute = PUBLIC_ROUTES.includes(nextUrl.pathname);

if (isPublicRoute && isAuthenticated)
return Response.redirect(new URL(DEFAULT_REDIRECT, nextUrl));

if (!isAuthenticated && !isPublicRoute)
return Response.redirect(new URL(ROOT, nextUrl));
});

export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};`

    "next-auth": "^5.0.0-beta.19",
    "next": "14.2.5",

[SaptakBN]

I might be a bit late to the party but here's how I solved this in both client and server side

AXIOS INSTANCE

import config from "@/shared/config";
import { requestInterceptor, requestErrorInterceptor } from "@/lib/api/interceptors/request.interceptor";
import { responseErrorInterceptor, responseInterceptor } from "@/lib/api/interceptors/response.interceptor";

const axiosInstance = axios.create({
  baseURL: config.API_URL,
  headers: {
    common: {
      ["Access-Control-Allow-Origin"]: "*",
      ["Access-Control-Allow-Methods"]: "DELETE, POST, GET",
      ["Access-Control-Allow-Headers"]: "Content-Type, Authorization, X-Requested-With",
    },
  },
});

axiosInstance.interceptors.request.use(requestInterceptor, requestErrorInterceptor);

axiosInstance.interceptors.response.use(responseInterceptor, responseErrorInterceptor);

const HTTP = axiosInstance;

export default HTTP;

REQUEST INTERCEPTOR

import { AxiosError, AxiosHeaders, InternalAxiosRequestConfig } from "axios";
import { getServerSession } from "next-auth";
import { getSession } from "next-auth/react";

export const requestInterceptor = async (config: InternalAxiosRequestConfig): Promise<InternalAxiosRequestConfig> => {
  if (!(config.headers instanceof AxiosHeaders)) {
    config.headers = new AxiosHeaders(config.headers);
  }
  const Session = async () => {
    if (typeof window === "undefined") return await getServerSession(authOptions);
    else return await getSession();
  };
  const session = await Session();
  config.headers.set("Authorization", `Bearer ${session?.user?.accessToken ?? ""}`);
  return config;
};

export const requestErrorInterceptor = (error: AxiosError) => {
  return Promise.reject(error);
};

In case there's a edge case or if there's a better way please let me know. Otherwise works like a charm.

[saousername]

Hey man. What did you use for your requestError and response interceptors?

[saousername]

Also thanks so much. This is the only thing that worked for me lol

[SaptakBN]

Hey man. What did you use for your requestError and response interceptors?

request interceptor is provided, response interceptor is empty not doing anything here for now. you can if required.

export const responseInterceptor = (response: AxiosResponse) => {
  return response;
};

export const responseErrorInterceptor = (error: AxiosError) => {
  return Promise.reject(error);
};```

[edenilson-souza]

I have gathered different parts of the above discussions and implemented the solution as follows. Enjoy.

package.json:

"next": "14.2.3",
"next-auth": "^4.24.7",
"react": "^18"

Providers:

    <SessionNextProvider>
        <SessionGuard>
            <AxiosProvider>
                {children}
            </AxiosProvider>
        </SessionGuard>
    </SessionNextProvider>

Session Next Provider:

    'use client';
    import { SessionProvider } from 'next-auth/react';
    import { ReactNode } from 'react';

    export default function SessionNextProvider({ children }: { children: ReactNode }) {
        return <SessionProvider refetchInterval={30}>{children}</SessionProvider>;
    }

Session Guard:

    'use client';
    import { useSession } from 'next-auth/react';
    import { ReactNode, useEffect } from 'react';
    import { setLastSession } from './AxiosProvider';

    export default function SessionGuard({ children }: { children: ReactNode }) {
        const { data, status } = useSession();

        useEffect(() => {
            if(!data) return;
            setLastSession(data as any);
        }, [data]);

        if(status === 'loading') return null;

        return <>{children};</>;
    }

Axios Provider:

    'use client';
    import { instance } from '@/(core)/api';
    import { Session } from 'next-auth';

    export const setLastSession = (session: Session) => {
        lastSession = session;
    };
    let lastSession: Session | null = null;

    const AxiosProvider = ({ children }: { children: React.ReactNode }) => {
        instance.interceptors.request.use(
            config => {
                if (!lastSession) {
                    return Promise.reject(new Error('Try again later'));
                }
                config.headers.Authorization = `Bearer ${lastSession.accessToken}`;
                return config;
            },
            error => {
                return Promise.reject(error);
            }
        );

        instance.interceptors.response.use(
            response => {
                return response;
            },
            error => {
                return Promise.reject(error);
            }
        );

        return <>{children}</>;
    };

    export default AxiosProvider;

[rutwik925]

Not sure if this helps anyone but here's how i used it

// axios.ts

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

export const axiosWithAuth = async () => {
const instance = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
});

const isServer = typeof window === 'undefined';

let session = null;

if (isServer) {
// Fetch session on the server side
session = await auth();
} else {
// Fetch session on the client side
session = await getSession();
}

if (session) {
instance.defaults.headers['Authorization'] = Bearer ${session?.accessToken};
}

return instance;
};

then in your client or server components you can do like this:-
const axios = await axiosWithAuth();
const response = await axios.get('https://dummyjson.com/auth/me')

[ImadMachi]

Call the session in a server component, then pass it to a client component, finally assign the token from session to axios.

// ServerComponent.js
 export default async function  ServerComponent(children) {
   const session = await getSession();
   return <ClientComponent session={session}>{children}</ClientComponent>
 }
 
// ClientComponent.js
'use client'

import { SessionProvider} from 'next-auth/react'
import { axios } from "axios"

 export default async function  ClientComponent(session, children) {
   axios.defaults.headers.common['Authorization'] = `Bearer ${session?.tokens.access}`
   return <SessionProvider session={session}>{children}</SessionProvider>
 }