Middleware Error on Production (No Secret)

[batuhanbilginn]

Environment

System:
OS: macOS 12.3
CPU: (10) x64 Apple M1 Pro
Memory: 24.96 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.0 - /usr/local/bin/node
npm: 8.3.1 - /usr/local/bin/npm
Browsers:
Chrome: 100.0.4896.88
Firefox: 97.0.1
Safari: 15.4
npmPackages:
next: latest => 12.0.8
next-auth: ^4.3.2 => 4.3.2
react: ^17.0.2 => 17.0.2

Reproduction URL

---

Describe the issue

I use this code block to detect if the user is authenticated or not. It works perfectly on local but it doesn't work on the production.

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

export default withAuth({
  callbacks: {
    authorized({ token }) {
      if (token) return true; // If there is a token, the user is authenticated
    },
  },
});

The error is "No Secret" but I already provided the NEXTAUTH_SECRET environment variable to the Vercel and I can verify that with successful login and cookie creation. Somehow, Middleware can't access the variable or there is something else.

How to reproduce

You can push your app with a middleware setup and try to use the code block that I provided or from the documentation.

Expected behavior

The code block should detect if the user is logged in or not.

[promet99]

I have noticed this issue as well.
process.env.NEXTAUTH_SECRET in line 28 of next-auth/next/middleware.js does not exists.
Other env var were not available, and process.browser was true.
I believe this error is caused by middleware.js executed on the client side, not on the server side.

[promet99]

I also believe this issue to be related to #3878

[promet99]

And, this issue is caused by an error in next.js, which is fixed as of 12.1.4
I would recommend @batuhanbilginn to use latest version of next.js :)

[ThangHuuVu]

Thanks, @promet99 for looking into it 🙏. Could you try upgrading next.js to the latest version and see if the error persists @batuhanbilginn?

[d-ivashchuk]

I was bumping into this issue myself and can tell that upgrading both next & next-auth makes error go away indeed. But by some trial and error I've figured that I can't use the middleware way of securing api routes with db strategy(prisma in my case). Is there any other sensible option to still use middleware and prevent unauthenticated user from accessing the routes?

Thinking of getSession() inside the _middleware.ts and then checking the object if user is logged in or not. Wouldn't this work?

Thanks in advance!

[ThangHuuVu]

@d-ivashchuk Currently, only JWT strategy is supported for middleware. See: https://next-auth.js.org/configuration/nextjs#caveats

Thinking of getSession() inside the _middleware.ts and then checking the object if user is logged in or not. Wouldn't this work?

It won't work, unfortunately 😢

[d-ivashchuk]

that was what I was the most afraid of :/ any workarounds that you might think of? Is there an issue or PR to follow/contribute to make the middleware working with DB strategy?

[ThangHuuVu]

With the introduction of D1 Database, it might be possible to start implementing & running NextAuth.js on the edge now. The problem is that D1 seems very slow, so it might not be as efficient as you might expect.
We'll create an RFC and let you know, thanks for showing interest! 👍

[RibhararnusPracutian]

This issue is still happening to me. I am using "next": "12.1.6", and "next-auth": "^4.5.0".

[rcmarc]

The issue seems to be in the default export function from 'next-auth/middleware because it doesn't read the same secret defined in [...nextauth].js.

The docs states that the secret is the same used in the [...nextauth].js file and that the default value is the NEXTAUTH_SECRET env var, that's confusing.

The workaround I've found so far is to read the secret in both places using an environment variable.

[...nextauth].js

export const authOptions = {
# ... config
secret: process.env.SECRET
}

export default NextAuth(authOptions);

middleware.js

import { withAuth } from "next-auth/middleware";
export default withAuth({
  secret: process.env.SECRET,
});
export const config = {
  matcher: ["/"],
};

hope it helps

[jarvs10]

ty very much man it works for me too

[CrypticHatter]

Thanks, It saved my day

[naweli777]

It literally saved my dat

[Abu-Jayed]

Thanks you so much. 😌

[rcmarc]

glad it was helpful.

[ekkusi]

I am still running into the same issue or at least I think it related to middleware not running properly. For me the solution of @rcmarc didn't work, even though I thought this would be the fix.

For me the problem is every route gets redirected back to login with 307 status, even though the session and the token are set. Everything is running fine locally.

My configs are as follows:

middleware.ts

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

export default withAuth(
  {
    callbacks: {
      authorized: ({ token }) => {
        console.log("Authorized callback, token: ", token);
        return !!token;
      },
    },
    secret: process.env.NEXTAUTH_SECRET,
  }
);
export const config = {
  matcher: ["/((?!auth|api/register).*)"],
};

[...nextauth].ts

export const authOptions = {
# ... config
secret: process.env.NEXTAUTH_SECRET
}

export default NextAuth(authOptions);

I can't see the log of the authorized callback either which is why I think the problem has to do with the middleware. The log is shown locally as well.

[wayne-crosby]

I'm having the same issue of 307 on every request, even if the user is authed, and have the same withAuth configuration. It works fine locally, but just keeps requesting the user to login in prod if the page matches the middleware pattern.

I was able to solve the "[next-auth][error][NO_SECRET]
https://next-auth.js.org/errors#no_secret" by setting an environment variable through the vercel interface, but I also shouldn't of had to since it was defined in my .env. I've upgraded to the latest next (12.2.4) and next-auth (4.20.1). I'm using the new appDir/ functionality and not sure if that's what's causing the issue.

[wayne-crosby]

Super strange, but I regenerated my secret with openssl rand -base64 32 and updated my NEXTAUTH_SECRET environment variable on the vercel deployment and things are working now. Same code. Same everything, just a different secret.

[wayne-crosby]

Ok, after a bunch of trial and error, it seems like the character that was causing problems was the '$'. The only change I made was replacing $ in the original secret with 'S' in the vercel environment variable NEXTAUTH_SECRET, and my issue was resolved. Changing it back to '$' and the issue of a null token comes back. I've tested with other special characters, @!*& and all seem to work ok, but it just doesn't like $ for some reason.

[AlanChen4]

Removing special characters from my secret variables worked for me as well - thanks so much

[Autushka]

Similar issue.
That's what I have:

.env

NEXTAUTH_SECRET='my secret'

[...nextauth].ts

export const authOptions: NextAuthOptions = {
  ...
  secret: process.env.NEXTAUTH_SECRET,
};

middleware.ts

export default withAuth(
  async (req) => {
    ...
    return response;
  },
  {
    callbacks: {
      authorized: ({ token, req }) => {
      ...
    },
    secret: process.env.NEXTAUTH_SECRET,
  }
);

Getting no secret error when deployed on vercel platform (locally - no issue in production mode). As a workaround solution - manually adding NEXTAUTH_SECRET env variable on vercel and redeploying...

[isotopic]

Adding NEXTAUTH_SECRET on vercel form (and not on .env) solved the NO_SECRET I was facing on every deploy to production. Cannot tell who is wrong here: vercel not parsing .env files or NextAuth stating on docs that vercel does this.

[FilipeAPV]

Also solved the problem for me: https://vercel.com/docs/concepts/projects/environment-variables. Thank you.

[formidabilus]

what do you mean by adding it on "form"? I can't figure it out, I still have that error with NEXTAUTH_SECRET added on vercel environments.

L.E. : I've managed to solve it by using

import { withAuth } from "next-auth/middleware";
export default withAuth({
 secret: process.env.SECRET,
});
export const config = {
 matcher: ["/"],
};

like @rcmarc wrote above.

[MarioCohuo]

Mil gracias, funciono para mi al subir a Vercel.

[felipeduarte27]

For deploy nextjs app with nextauth on vercel

followed 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

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

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

It works for me

[iamshubhamjangle]

Thanks

[ProgrammerDATCH]

On my side I found that the problem was because NEXTAUTH_URL was not set in vercel ENV. and after adding it = to vercel link ex: example.vercel.app. middleware is working correctly.