Unable to pass session in Axios header

[ghost]

I am using "credentials" as my authentication method because I have an external API. When I was using React app, upon successful login, the response would be a JWT token. So, I still need this token from the server in order to make requests to the API as I need to send it to the header.

So, for my auth provider I do a post request to the server and get the JWT token as a response. I then needed to modify the callback to add it to the session (I am also not sure if what I am doing here is correct)

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import Axios from "axios";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.Auth0({
      clientId: process.env.AUTH0_CLIENT_ID,
      clientSecret: process.env.AUTH0_CLIENT_SECRET,
      domain: process.env.AUTH0_DOMAIN,
    }),
    Providers.Credentials({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        try {
          const response = await Axios.post(
            "http://localhost:8000/api/admin/login",
            { username: credentials.email, password: credentials.password }
          );

          if (response.status === 201) {
            const user = {
              email: credentials.email,
              password: credentials.password,
              servertoken: response.data.token,
              test: "some other test data",
            };
            return user;
          } else {
            return null;
          }
        } catch (err) {
          console.log(err.response);
        }
      },
    }),
  ],
  callbacks: {
    jwt: async (token, user, account, profile, isNewUser) => {
      if (user) {
        token.data = user;
      }
      return Promise.resolve(token);
    },
    session: async (session, user) => {
      session.user = user.data;
      return Promise.resolve(session);
    },
  },
});

This seems to work okay because I now have the token from the server in my session and can access it. However, on a page where I need to use it, I can't do it. I get an error that basically says getStaticProps can't run because 'session' isn't defined. If I try to move useSession() out of the component I get an error and if I try move getStaticProps into the component I get an error because I can't do that.

import { useSession, signOut } from "next-auth/client";
import Axios from "axios";

export const getStaticProps = async () => {
  const response = await Axios.get(
    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/admin/all-users`,
    {
      headers: {
        Authorization: "Bearer " + session.user.servertoken,
      },
    }
  );
  const data = response.data;
  console.log(data);

  return {
    props: {
      bookings: data,
    },
  };
};

const Dashboard = () => {
  const [session, loading] = useSession();

  if (!session) {
    return <h1>Please sign in</h1>;
  } else {
    return (
      <>
        <h1>Dashboard</h1>
        <button
          onClick={() =>
            signOut({ callbackUrl: `http://localhost:3000/api/auth/logout` })
          }
        >
          Sign out
        </button>
      </>
    );
  }
};

export default Dashboard;

[balazsorban44]

What you are trying to do is not possible. getStaticProps does not have access to the same context as say getServerSideProps. getStaticProps will generate an output that can potentially be cached in a public CDN, so you cannot do authentication in there. If you want to fetch authenticated content for a page, you have two options:

1. do it client-side, where you have the token from your backend sent to the session (as your first code snippet perfectly does that)
2. use getServerSideProps, where you can use the getSession function to get the token.

[ghost]

Thank you for your comments! Would you please be able to expand on option 1 as I don't really understand what you mean. You are saying that I am already doing some of it correctly which is to pass the jwt token from the server to the session and have access to it there.

But I don't know what you mean by doing it client-side ie: I don't know if you mean I should rather use React useEffect or something like that instead of getStaticProps? Sorry, I am new to Next.js and still trying to wrap my head around everything as I am used to React app.

I would prefer to do it on the client because it will be in the dashboard area where when records are deleted etc. it should update the state and then filter out the deleted record, updating the list in 'real time'.

UPDATE:

I have tried something though which seems to work actually. Just not sure if I am doing it correctly... I am also looking into SWR as that might be a good option here as well.

import { useSession, signOut, getSession } from "next-auth/client";
import Axios from "axios";

const Dashboard = ({ bookings }) => {
  const [session, loading] = useSession();

  if (!session) {
    return <h1>Please sign in</h1>;
  } else {
    return (
      <>
        <h1>Dashboard</h1>
        <button
          onClick={() =>
            signOut({ callbackUrl: `http://localhost:3000/api/auth/logout` })
          }
        >
          Sign out
        </button>
        <div>
          {bookings.map((b) => (
            <p>{b.count}</p>
          ))}
        </div>
      </>
    );
  }
};

export default Dashboard;

export async function getServerSideProps(context) {
  const session = await getSession(context);
  const response = await Axios.get(
    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/admin/bookings`,
    {
      headers: {
        Authorization: "Bearer " + session.user.servertoken,
      },
    }
  );
  const data = response.data;

  return {
    props: {
      bookings: data,
    },
  };
}