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.

[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