Attach JWT token to all axios requests

[harrisonratcliffe]

Question 💬

Hello, after successful login I fetch a JWT token from my backend API and store it as session.accessToken. How can I attach that to all axios requests? I tried using an axios interceptor with getSession inside a axios hook but that is returning as undefined.

I'm able to get the access token fine using something like getServerSideProps but having issues getting it from my axios hook.

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

const ApiClient = () => {
    const defaultOptions = {
        baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
    };

    const instance = axios.create(defaultOptions);

    instance.interceptors.request.use(async (response) => {
        const session = getSession();
        if (session) {
            response.headers.Authorization = `Bearer ${session.accessToken}`;
        }
        return response;
    });
    
    instance.interceptors.response.use(
        (response) => {
            return response;
        },
        (error) => {
            console.log(`error`, error);
        }
    );

    return instance;
};

export default ApiClient();

How to reproduce ☕️

Attempt to talk to my backend API using the above hook.

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[vitali-duckma]

hi, did you solved it?? i also need to attach it to axios

[harrisonratcliffe]

Nope, we ended up ditching NextAuth.

[mamlzy]

Nope, we ended up ditching NextAuth.

so what you are using now?

[Akhouad]

You could save the token in cookies from [...nextauth].ts and set true to withCredentials in axios interceptor...
something like this:

[...nextauth].ts

callbacks: {
      ...
      async signIn({ account, profile, email, credentials }) {
        res.setHeader(
          "set-cookie",
          `Authentication=${
            account?.access_token
          }; path=/; samesite=lax; httponly; expires=${new Date(
            account?.expires_at! * 1000
          ).toUTCString()}`
        );
        return true;
      },
},

axios.ts

...
instance.interceptors.request.use(async (request) => {
    request.withCredentials = true;
    return request;
  });
...

[heavyjg]

Where does "res", in signIn callback, comes from?

[Akhouad]

@heavyjg here is the complete example below:

export const nextAuthOptions = (
  req: NextApiRequest,
  res: NextApiResponse
): NextAuthOptions => {
  return {
    ...
    callbacks: {
      async signIn({ account }) {
        ...
        res.setHeader(
          "set-cookie",
          `Authentication=${
            account?.access_token
          }; path=/; samesite=lax; httponly; expires=${new Date(
            account?.expires_at! * 1000
          ).toUTCString()}`
        );
        ...
      },
    },
  };
};

export default (req: NextApiRequest, res: NextApiResponse) => {
  return NextAuth(req, res, nextAuthOptions(req, res));
};

[SkyFrontend1]

it is work in localhost?

[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>
 }