NextAuth Middleware don't work when deployed to Vercel

[raphaelpc]

Environment

Vercel

Reproduction URL

https://github.com/raphaelpc/middleware-test

Describe the issue

Hello everyone!

I'm trying to use the updated middleware as described here.
The problem is that the solution works great when i run it locally, but it don't work at all when i deploy it on Vercel.
Any idea of what could be the reason?

I even created a new project from the example @balazsorban44 shared, and even it doesnt work:
https://github.com/raphaelpc/middleware-test

I deployed it on: https://bolt-middleware-test.vercel.app/

As you can check, the Sign in process works: when you go to "ME", you see the info about the logged in user.

The problem is that when you try to access the "ADMIN" page, you are redirected to the login page.

I did some little changes to the middleware function to try to debug what was happening:

import { withAuth } from "next-auth/middleware"

// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
export default withAuth({
  callbacks: {
    authorized: ({ req, token }) => {
      console.log('req', req);
      console.log('token', token);
      // /admin requires admin role, but /me only requires the user to be logged in.
      return req.nextUrl.pathname !== "/admin" || token?.userRole === "admin";
    },
  },
})

export const config = { matcher: ["/admin", "/me"] }

This is what is logged at the Functions Vercel Dashboard when i try to access the "admin" page:

/admin
11:49:29:49
req { sourcePage: '/middleware' }
/admin
11:49:29:49
token null

Again: when i work everything locally it works great, problem happens when i try to deploy it on vercel =/

I've set all the env variables specified at the .env.examples:

I've also tried with next-auth versions 4.9.0 and 4.10.0.

Thanks in advance!

How to reproduce

Login in the system and try to access the ADMIN page.
You will be redirected to the login page.
You should be able to access the ADMIN page after logging in.

Expected behavior

The middleware protection should work when deployed on Vercel.
Currently, the token returned has "null" value.

[balazsorban44]

This is the same as https://next-auth-example.vercel.app just redeployed, right?

I am not sure I understand this:

The problem is that when you try to access the "ADMIN" page, you are redirected to the login page.

This is the intended behavior. 🤔 If you are not logged in and try accessing the /admin page, you should be redirected to log in. When you do, you will be redirected back to /admin, now logged in.

[raphaelpc]

1. Yes, only changes i made was to remove other providers other then GitHub and to add the logs at the middleware!

2. I will try to explain that part better!
   "The problem is that when you try to access the "ADMIN" page, you are redirected to the login page."

That happend AFTER you have logged in.
So, the user has already logged in (and that works, as all of his data is correctly shown).
But the middleware dont identify that, as the token is always null at the middleware.
And, because of that, even tought he is logged in, the login page is shown again when he tries to access the "ADMIN" page.

He can access "ME" because the validation on the middleware only blocks the "ADMIN" page (always return true if its not the admin page being accessed).

Hope that explanation has made the described error clearer!

[balazsorban44]

The /me behavior was actually incorrect, I just updated the logic to be correct:

next-auth/apps/example-nextjs/middleware.ts

Lines 6 to 13 in b7065a6

	authorized({ req, token }) {
	// `/admin` requires admin role
	if (req.nextUrl.pathname === "/admin") {
	return token?.userRole === "admin"
	}
	// `/me` only requires the user to be logged in
	return !!token
	},

If your token is null after login, you might have misconfigured something, eg. NEXTAUTH_SECRET is missing or there are some cookie policies creating problems in your browser. I just checked our deployed example on https://next-auth-example.vercel.app/ and it works as expected.

[raphaelpc]

Hey @balazsorban44 !

Thanks for the answer!

I tought that the first suspect would be NEXTAUTH_SECRET be missing, that is why i even shared an screenshot showing that i did inform that env at the VERCEL env's dashboard!

Also, like i explained, only thing not working is the middleware, the rest works (data from logged user is displayed, and if i tru to access user data at ServerSideProps it also works). And middleware works when i run locally (problem only happens when deployed to vercel). So i really dont think its the browser policy (even because your example works when i try it).

I also tested on Safari on iPad other then Chrome on Windows, and in both the problem happens.

Didnt u had to do any other type of configuration on your Vercel account for the middleware to work?

[raphaelpc]

Well, i deployed the same test on my Personal Vercel account (Hobby account).
The same error happened.
Before, i tried on a Pro account.

Also, tried on my computer from work, and got the same error.
So it's mostly definitelly not a cookie policy creating problems in my browser...

I find it hard to believe that this same code deployed in another account works and the problem is happening only on my accounts! =S
Thanks in advance for anyone that can give this a try to check what can be happening.

[raphaelpc]

Looks like this person is facing something similar to what i'm facing:

https://stackoverflow.com/questions/73031069/vercel-nextjs-middleware-request-object-is-just-a-string

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { getToken } from 'next-auth/jwt'

export async function middleware(req: NextRequest) {
  console.log('Testing!');
  console.log('req!', req);
  
  const secret = process.env.NEXTAUTH_SECRET
  console.log('secret!', secret);

  const token = await getToken({ req, secret });
  console.log('token!', token);

  // Else just pass through
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] }

The output is:

/dashboard/    17:02:03:81    Testing!
/dashboard/    17:02:03:81    req! { sourcePage: '/middleware' }
/dashboard/    17:02:03:81    secret! [correctly shows my secret]
/dashboard/    17:02:03:81    token! null

I guess that there is some problem with "req" and that is why NextAuth middleware isnt working?

[balazsorban44]

Indeed, the log here is weird but likely unrelated (I forwarded this to our team to have a look.), as the cookie values are there, it's only the Request being serialized in the log that looks wrong.

Everything should still work #4969 (comment)

[raphaelpc]

Good morning!

I'm still trying to figure out what the error is....
I've sent many hours trying to make this work, but have no clue what the problem is...

My latest code is available at https://github.com/raphaelpc/middleware-test
It can be tested at https://bolt-middleware-test.vercel.app/

@balazsorban44 to be 100% sure its not a cookie policy problem, i made this test:

import { withAuth } from "next-auth/middleware"

// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
export default withAuth({
  callbacks: {
    authorized: ({ req, token }) => {
      console.log('token!', token);
      console.log('token?.userRole!', token?.userRole);
  
      const secret = process.env.NEXTAUTH_SECRET;
      console.log('secret!', secret);

      const { cookies } = req;
      console.log('cookies!', cookies);
      console.log('cookies instanceof Map!', cookies instanceof Map);
      console.log('cookies.keys()!', cookies.keys());

      const cookieSessionToken = cookies.get('__Secure-next-auth.session-token');
      console.log('cookie "__Secure-next-auth.session-token"!', cookieSessionToken);

      const cookieCallbackUrl = cookies.get('__Secure-next-auth.callback-url');
      console.log('cookie "__Secure-next-auth.callback-url"!', cookieCallbackUrl);

      const cookieCsrfToken = cookies.get('__Host-next-auth.csrf-token');
      console.log('cookie "__Host-next-auth.csrf-token"!', cookieCsrfToken);
      
      const allCookies = cookies.entries();
      console.log('allCookies!', allCookies);

      // /admin requires admin role, but /me only requires the user to be logged in.
      return req.nextUrl.pathname !== "/admin" || token?.userRole === "admin";
    },
  },
})

export const config = { matcher: ["/admin", "/me"] }

This is the log on the Vercel dashboard:

secret! e19df68de240513871dd4aea1586c5fa
token! null
token?.userRole! undefined
secret! [correctly displays my secret]
cookies! { get: [Function: get],
  getWithOptions: [Function: getWithOptions],
  set: [Function: set],
  delete: [Function: delete],
  clear: [Function: clear],
  response: { sourcePage: '/middleware' } }
cookies instanceof Map! true
cookies.keys()! {}
cookie "__Secure-next-auth.session-token"! eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..5U3jnfy9Fk-Q_ugJ.YCWw0FvaL-XMpO3_D5StbKNQ2vNLcVKeb78vT7g864sq61kdqDcuuFI3BpnG2pUiXkgq4UZozk6yX1-F1gaEVDLlryynBNkFYtlSMamK8aCn6Uoi0I8Xz2owvbCKb_v5Kzae8H4ycWAIcS06jPPtS6r2wswqbqRBj8YdGFu9OYQfI9lxOumBS1dIE8Y7XYicj7K_UMW5Oz5jbCBoUy-EJtLnFsvMJvX1fxvlrVj5LThSRqn_bIie7bIAUZiWfrDovy6siMXEUQOHFnPVWWJTroUlPxNiWKxtNjnneafp8q4uAeWivKLZTsu7nTClQw.9wKj-ujxqFn6VPI7m5Vndw
cookie "__Secure-next-auth.callback-url"! https://bolt-middleware-test.vercel.app/
cookie "__Host-next-auth.csrf-token"! f9288c13583cdacd3dbe4cf763ca06b36fc3356c655a4d413d3e9cc6d5206cf4|48804eb98b649c659daf090a69f0cd1590c2eaeb3aaadf5f5a73b725199f124a
allCookies! {}

As you can see, all NextAuth cookies are available at the middleware.
For some very strange reason, the method cookies.entries() don't bring all the cookies, like the NextJS documentation says it should.

Any suggestion of things i should try?
From everything i researched, i'm pretty sure there is no need to do any special config on the Vercel account to make this work.
I also tried on 2 different account, one Pro and other Hobby, and it didnt work in neither of them.

Thanks in advance.

[balazsorban44]

I redeployed our example repo here: https://balazsorban44-na-4969-balazsorban.vercel.app/ with no changes, again, it works as expected. 🤔

[raphaelpc]

That is so strange! I’m starting to think it’s something with my vercel accounts. Maybe my region? (I’m in Brazil). I will try to open a ticket with them. I will update here if I find anything else.

[balazsorban44]

I'll let our team know as well. 👍

[movaldivia]

@balazsorban44 same problem here!

[techied]

@balazsorban44 I'm having the opposite issue here. Works on Vercel but not on my local machine. Exact same code, checked all the environment variables, token is always null in the middleware callback. After login I'm redirected back to the login page when trying to access any 'secure' routes. If I remove the middleware the pages work as expected after logging in.

envinfo:

System:
    OS: Linux 5.18 Fedora Linux 36 (Workstation Edition)
    CPU: (16) x64 AMD Ryzen 7 5800X3D 8-Core Processor
    Memory: 25.55 GB / 31.18 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 3.2.2 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0
  npmPackages:
    next: 12.2.3 => 12.2.3 
    next-auth: ^4.10.2 => 4.10.2 
    react: 18.2.0 => 18.2.0

[senbonsakura]

Same problem here. This is my middleware.
console.log returns null for both soken and session.

export default withAuth({
  pages: { signIn: "/signin" },
  callbacks: {
    authorized: async ({ token, req }) => {
      const session = await getToken({ req });
      console.log("authorized", token, session);
      return !!token;
    },
  },
});

[techied]

Not sure how I missed this issue in my research but the solution (for me) was: Downgrade next to 12.2.2

Related issue: #5008

[thejessewinton]

I've been trying to find the solution, but I'm already running [email protected]. Did you run into any other research?

[techied]

Sorry, I didn't find anything else that might be causing this. I would wait for a fix from Vercel.

If it helps; NodeJS 16.16.0, Yarn 3.2.2

"dependencies": {
    "@nextui-org/react": "^1.0.0-beta.9",
    "@tabler/icons": "^1.78.1",
    "@vultr/vultr-node": "^2.3.3",
    "next": "12.2.2",
    "next-auth": "^4.10.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
  

[senbonsakura]

[email protected] solved this issue for me 🎉

[wkusaa]

Works locally but not on Vercel 😢

[wkusaa]

Wait it works on netlify tho, I think it has something has to do with caching of the builds

[thejessewinton]

Same, I don't get what the issue is. Works locally no problem.

[Unbrick]

Had the same issue here, the fix which worked for me was removing the NEXTAUTH_URL enviroment variable from vercel, as it is automatically populated by them. Not sure whether this was just a fluke for me but it seems to work just fine now.

[scvsh]

Had the same problem on "next": "13.0.6", any middleware call returned null Nextauth token, removing NEXTAUTH_URL on Vercel solves!

[mkarbo]

Any solutions? We've tried 12.2.2, 12.2.5, 12.2.6 - some deployments work, some doesn't, but everything works locally.

[yardenas]

Same here, removing NEXTAUTH_URL doesn't seem to help, exactly the same issue

[maorhoox]

YESSS, same here!!!

[mkarbo]

We migrated off next-auth now, never got this fixed for us sadly

[rodrigo-arias]

Still having this issue locally with node v16.18.1 and next v13.2.4. I tried several versions but the token and session are always null in the middleware after authenticating.

[rodrigo-arias]

After digging into this a bit more, in my case, it seems that the problem is that the JWT secret key is not there to get the token.

I tried to pass the secret from the middleware without success

jwt: {
  secret: process.env.JWT_SECRET_KEY
}

However this worked for me

callbacks: {
  authorized: async ({req}) => {
    
    const session = await getToken({
      req,
      secret: process.env.JWT_SECRET_KEY
    })

    return !!session
  }
}

I don't know if I'm forgetting to pass the secret key in some way or if it's a bug in the library.

[bymoe]

Hey @rodrigo-arias I am having the same issue, but I don't get it this callback authorized is not even a valid callback https://next-auth.js.org/configuration/callbacks Where do you have that?

[rodrigo-arias]

@bymoe I'm wrapping the Next.js middleware, a more complete snippet below.

export default withAuth(
  function middleware(req) {
    // Your middleware code here...
    return NextResponse.next()
  },
  {
    jwt: {
      secret: process.env.JWT_SECRET_KEY // Doesn't seems to work.
    },
    callbacks: {
      authorized: async ({req}) => {
        const session = await getToken({
          req,
          secret: process.env.JWT_SECRET_KEY
        })

        return !!session
      }
    }
  }
)

[bestcomy-duplicate]

After testing and debugging for a day following the ideas from this thread, my working solution in my localhost is as follows.

// export { default } from "next-auth/middleware"
export default withAuth(
  // `withAuth` augments your `Request` with the user's token.
  function middleware(req) {
    console.log("next auth token is ",req.nextauth.token) //why always return null?
  },
  {
    callbacks: {
      authorized: async ({req}) => {
        const session = await getToken({
          req,
          secret: process.env.SECRET
        })
        // console.log(new Date(),"@ middleware",session,!!session)
        return !!session;
      },
    },
  }
)

[MuhammadSamir1212]

Hello, I solved the problem with these steps :

1- add this code like mine to your middleware file that code will fix the problem

import { withAuth } from "next-auth/middleware";
  import { NextResponse } from "next/server";
  
  export default withAuth(
    // withAuth augments your Request with the user's token.
    function middleware(req) {
      console.log(req.nextauth);
      if (
        req.nextUrl.pathname === "/dashboard" &&
        req.nextauth.token?.isAdmin !== true
      ) {
        return new NextResponse("You are not authorized!");
      }
    },
    {
      callbacks: {
        authorized: (params) => {
          let { token } = params;
          return !!token;
        },
      },
    }
  );
  
  export const config = {
    matcher: [
      "/dashboard",
      "/shipping",
      "/profile",
      "/editeprofile",
      "/dashboard/users",
      "/dashboard/products",
      "/dashboard/payment",
    ],
  };

2- you should add that code in your Callbacks in the [...nextauth] file that code will fix the problem :

callbacks: {
    async jwt({ token }) {
      token.isAdmin = true;
      return token;
    },
  },

3- Removing the NEXTAUTH_URL environment variable from vercel

[Ibrahim-Rezq]

Thx man it's been bugging (bun intended) me for along time
3- Removing the NEXTAUTH_URL environment variable from vercel
was what I was missing

[sadiqhasanrupani]

I am encountering an issue with the "[...nextAuth].ts" file when I deploy my code on Vercel, but it works fine when I run it on my localhost.

here is the code (I'm using nextAuth 3.0 here):

import NextAuth, { NextAuthOptions } from "next-auth";
import Provider from "next-auth/providers";

export const authOptions: NextAuthOptions = {
  providers: [
    Provider.Credentials({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        //^ destructuring the credentials
        const { username, password } = credentials as any;

        const response = await fetch("http://localhost:3000/api/auth/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ username, password }),
        });

        if (response.status === 422) {
          const resData = await response.json();
          console.log(resData);

          throw new Error(resData.message);
        }

        if (!response.ok) {
          const resData = await response.json();

          throw new Error(resData.message || "Something went wrong");
        }

        const user = await response.json();

        return { name: user.name, id: user.id, email: user.accessToken };
      },
    }),
  ],

  session: {
    jwt: true,
  },
  pages: {
    signIn: "/",
    signOut: "/gallery",
  },
};

export default NextAuth(authOptions);

[soarsx]

Hi!
I had the same issue with my Middleware.
It looks like getToken thinks the connection is insecure and use the "next-auth.session-token" instead of it's __Secure counterpart - that's the only one set in my case.
A temporary approach I'm using is setting the value "next-auth.session-token" with the value of "__Secure-next-auth.session-token" before calling getToken.

export default async function middleware(req) {
  // Setting the Secure cookie
  if (
    !req.cookies.has('next-auth.session-token')
    && req.cookies.has('__Secure-next-auth.session-token') ) {
    console.log('Relaying auth cookie...');
    req.cookies.set({
      ...req.cookies.get('__Secure-next-auth.session-token'),
      name: 'next-auth.session-token'
    })
  }

  // Getting the token
  const token = await getToken({ req: req, secret: authOptions.secret });

  // ...

Obs: I'm using the NEXTAUTH_URL environment variable.

[felipeduarte27]

I had this problem recently.

I solved it with the following steps:

1. create NEXTAUTH_URL and NEXTAUTH_SECRET on .env (url is your domain)
2. Go on your settings project on vercel and add NEXTAUTH_SECRET on your Environment Variables (same secret of your .env)

I'm using middleware and the code is:

export { default } from "next-auth/middleware"

export const config = { matcher: ["/admin/dashboard/", "/admin/dashboard/:path*"] }

My api/auth/[...nextauth]/route.tsx is:

import NextAuth from "next-auth";
import type { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";
import { login } from "@/server/user";
import { findByEmail } from "@/server/user";

const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
    }),
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials: any, req: any): Promise<any> {
        const user = await login(
          credentials ? credentials.email : "",
          credentials ? credentials.password : ""
        );

        if (user) {
          return user;
        } else {
          return null;
        }
      },
    }),
  ],
  pages: {
    signIn: "/admin/home/login",
  },
  session: {
    maxAge: 24 * 60 * 60, // A sessão expira em 1 dia
  },
  callbacks: {
    async jwt({ token }) {
      const user = await findByEmail(token.email ? token.email : "");
      if (user) {
        token.id = user.id;
        token.roleId = user.roleId;
        token.companyId = user.company_users[0]
          ? user.company_users[0].id
          : null;
      }

      return token;
    },
    async session({ session, token, user }: any) {
      session.user.id = token.id;
      session.user.roleId = token.roleId;
      session.user.companyId = token.companyId;
      return session;
    },
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

It works for me

[h0ngwon]

Thanks I worked for this code!!!

[teceer]

I added the if (process.env.NEXTAUTH_URL) return process.env.NEXTAUTH_URL; to the getBaseUrl() function. Finally working on Vercel.

// src/trpc/shared.ts

import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "~/server/api/root";

export const transformer = superjson;

function getBaseUrl() {
  if (typeof window !== "undefined") return "";
  if (process.env.NEXTAUTH_URL) return process.env.NEXTAUTH_URL;           // Use NEXTAUTH_URL for if it exists
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

export function getUrl() {
  return getBaseUrl() + "/api/trpc";
}

/**
 * Inference helper for inputs.
 *
 * @example type HelloInput = RouterInputs['example']['hello']
 */
export type RouterInputs = inferRouterInputs<AppRouter>;

/**
 * Inference helper for outputs.
 *
 * @example type HelloOutput = RouterOutputs['example']['hello']
 */
export type RouterOutputs = inferRouterOutputs<AppRouter>;

[Marshall-Moussavi]

removing the nextauthurl environment variable from vercel worked for me

[bmsoluciones]

I had the same problem. But my solution was to add NEXTAUTH_URL instead of remove it.

[Codigo-Fuentes]

me too

[elvxk]

somehow this works for me. I just removed NEXTAUTH_URL from the env in vercel, and also replaced NEXTAUTH_SECRET by generating it at https://generate-secret.vercel.app/32 . after all that, I redeployed my application, and somehow it managed to make the middleware work as expected

[CleverFlare]

I identified a potential solution I wanted to share in case it helps others. I noticed my NEXTAUTH_URL environment variable was missing the protocol (https://). It was set to project.vercel.app instead of https://project.vercel.app. Correcting this fixed the issue for me. Let me know if this helps you as well!

[rolvinss]

Hey, you also saved me. This also work for me.

[maik-emanoel]

Hey, guys. I was facing the same issue, my application was working perfectly locally, however when I deployed occured some errors.

First, I realized that the cookie token name is different in production, so I had to do this, in my middleware:
const tokenKey = process.env.NODE_ENV === 'production' ? "__Secure-next-auth.session-token" : "next-auth.session-token";

And I provided a variable called "NODE_ENV" with the value "production" on vercel enviroments variables:

But, even if doing this my application wasn't working in production. Checking the runtime logs I saw this error:

[next-auth][error][NO_SECRET]
https://next-auth.js.org/errors#no_secret Please define a secret in production. r [MissingSecretError]: Please define a secret in production.

Then, I realized that I had set this property on my authOptions, but I hadn't defined this variable on Vercel enviroment variables.

It was like that:

So, I just defined this variable (NEXTAUTH_URL) with the value of my deploy (https://task-manager-maik.vercel.app/) on Vercel and the error was gone. Now it's working normally.

I hope this helps. 😉