How to properly protect/access api route on next-auth 5.0.0-beta.4?

[romanslonov]

Hello everyone,

I am using this official example repo and faced an issue when trying to get data from protected api route using server side page.

page.ts

export default async function Dashboard() {
  const res = await fetch("http://localhost:3000/api/lists");
  const data = await res.json();

  return (
     <pre>
        <code>{JSON.stringify(data, null, 2)}</code>
     </pre>
  );
}

lists route

import { auth } from "auth";

export const GET = auth(async (req) => {
  if (req.auth) {
    const lists = [];

    return Response.json({ lists });
  }

  return Response.json({ message: "Not authenticated" }, { status: 401 });
});

I always got req.auth as null and as a result response is { message: "Not authenticated" }, { status: 401 }

[csulit]

Are you using middleware?

[StuartMorris0]

Replying on behalf of the creator, as I have the same issue.

It occurs with a custom middleware or just using the default:
export const { auth: middleware } = NextAuth(authConfig);

The only note to add is that our auth config is split, in my example. We are using two bits of auth config, due to our provider adapter not supporting edge (DrizzleAdapter).

So our core auth file looks like this

export const authConfiguration = {
  adapter: DrizzleAdapter(db),
  // secret: process.env.AUTH_SECRET,
  session: {
    strategy: 'jwt', // Drizzle adapter does not support database sessions -> https://authjs.dev/guides/upgrade-to-v5#edge-compatibility
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  callbacks: {
    async session({ session, token, _ }) {
      session.user.id = token.sub!;
      session.accessToken = token.accessToken as string;
      return session;
    },
    async jwt({ token, user, account }) {
      if (user) {
        token.id = user.id;
      }
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
  },
  ...authConfig,
  debug: true,
} satisfies NextAuthConfig;

export const { handlers, auth, signOut } = NextAuth(authConfiguration);

And our authConfig additional configuration looks like this:

export default {
  theme: {
    colorScheme: 'dark', // "auto" | "dark" | "light"
    brandColor: '#000', // Hex color code
    buttonText: 'TEST', // Hex color code
  },
  providers: [
    Cognito({
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      clientId: process.env.COGNITO_CLIENT_ID!,
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      clientSecret: process.env.COGNITO_CLIENT_SECRET!,
      issuer: process.env.COGNITO_ISSUER,
    }),
  ],
} satisfies NextAuthConfig;

Our middleware has to use the later config and not the entire config (first code snippet) otherwise we get a bunch of edge errors, like crypto package etc.

[HenriTeinturier]

Hello
I have the same problem.
Have you found a solution?

[StuartMorris0]

We've been unable to resolve @HenriTeinturier. We have some temporary auth checks directly on the database as the auth wrapper on endpoints does not work based on the above 👍

[romanslonov]

Make sure to include headers in your request, otherwise the next-auth will not be able to determine whether you are authorized or not.

[HenriTeinturier]

I have sold this probleme with this code:

import { headers } from "next/headers";


 const response = await fetch(`...URL/api/posts`, {
      headers: new Headers(headers()),
    });