[AzureADProvider - next-auth v5] InvalidCheck: PKCE code_verifier cookie was missing

[matt-wigg]

Problem

Experiencing a PKCE code_verifier missing cookie error when attempting a second login using next-auth v5 and AzureADProvider after logging out, specifically on Vercel deployments. The error does not occur during local development. Here's the error log from Vercel: �[31m[auth][error]�[0m InvalidCheck: PKCE code_verifier cookie was missing.. Read more at https://errors.authjs.dev#invalidcheck

I have the following Web redirect URIs in my Azure App registration's authentication settings:

1. http://localhost:3000/api/auth/callback/azure-ad
2. https://<my-next-application-name>.vercel.app/api/auth/callback/azure-ad

Any insights or solutions to resolve this issue would be appreciated.

TL;DR

• Next-Auth v5 & AzureADProvider.
• Successful first login attempt.
• Error on subsequent logins after logout.
• Error only in Vercel deployment, not in localhost.
• Azure App registration's Web redirect URIs are correctly set for localhost and Vercel app.

Environment

• Next.js v14.1.4
• Next-auth v5.0.0-beta.16
• Deployed on Vercel

Configurations

• AzureADProvider is configured with proper client details and scopes.
• PKCE code verifier cookies are configured with httpOnly, sameSite: none, secure: true options.

Code

package.json

{
  "name": "next-14-azure-auth",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@microsoft/microsoft-graph-client": "^3.0.7",
    "next": "14.1.4",
    "next-auth": "^5.0.0-beta.16",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

auth.config.ts

import AzureADProvider from "next-auth/providers/azure-ad";
import { getUserDetails } from "@/app/services/msGraphApi";
import { authEnvConfig } from "@/app/config/env.config";
import type { NextAuthConfig } from "next-auth";

export const authConfig = {
  pages: {
    signIn: "/login",
    signOut: "/",
    error: "/login",
  },
  providers: [
    AzureADProvider({
      clientId: authEnvConfig.AUTH_AZURE_ENTERPRISE_APPLICATION_ID,
      clientSecret:
        authEnvConfig.AUTH_AZURE_APP_REGISTRATION_CLIENT_SECRET_VALUE,
      tenantId: authEnvConfig.AUTH_AZURE_APP_REGISTRATION_DIRECTORY_TENANT_ID,
      authorization: {
        params: {
          scope: "openid profile email User.Read offline_access",
        },
      },
    }),
  ],
  // https://github.com/nextauthjs/next-auth/discussions/6898#discussioncomment-5308820
  cookies: {
    pkceCodeVerifier: {
      name: "next-auth.pkce.code_verifier",
      options: {
        httpOnly: true,
        sameSite: "none",
        path: "/",
        secure: true,
      },
    },
  },
  callbacks: {
    async jwt({ token, account }) {
      if (account?.access_token) {
        try {
          const userDetails = await getUserDetails(account.access_token);
          token.userDetails = userDetails;
        } catch (error) {
          console.error(
            "Failed to fetch user details from Microsoft Graph API",
            error
          );
        }
      }
      return token;
    },
    async session({ session, token }) {
      if (token.userDetails) {
        session.user = { ...session.user, ...token.userDetails };
      }
      return session;
    },
    async authorized({ auth }) {
      return !!auth?.user;
    },
  },
  secret: authEnvConfig.AUTH_SECRET,
} satisfies NextAuthConfig;

auth.ts

import NextAuth from "next-auth";
import { authConfig } from "@/app/config/auth.config";

// https://authjs.dev/guides/upgrade-to-v5
export const {
  auth,
  signIn,
  signOut,
  handlers: { GET, POST },
} = NextAuth({
  ...authConfig,
});

api/[...nextauth]/route.ts

// https://authjs.dev/guides/upgrade-to-v5#configuration
export { GET, POST } from "@/auth";

middleware.ts

import { NextResponse } from "next/server";
import { auth } from "@/auth";
import {
  isPublicRoute,
  redirectToLogin,
  redirectToWelcome,
} from "@/app/utils/middleware.utils";
import { AuthenticatedNextRequest } from "@/app/types/middleware.types";

export const config = {
  // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

export default auth((req: AuthenticatedNextRequest) => {
  try {
    const { nextUrl } = req;
    const isAuthenticated = !!req.auth?.user;
    const isValidPublicRoute = isPublicRoute(nextUrl.pathname);

    if (isValidPublicRoute && isAuthenticated) {
      return redirectToWelcome(nextUrl);
    }

    if (!isAuthenticated && !isValidPublicRoute) {
      return redirectToLogin(nextUrl);
    }
    return NextResponse.next();
  } catch (error) {
    console.error("Error in middleware:", error);
    return redirectToLogin(req.nextUrl);
  }
});

[sagefarrenholz]

Seeing the same thing on Vercel only but not local. Next auth v4.24.7

[sagefarrenholz]

With our without the config changes

[JohannSiemens]

Can you always login successfully on the first attempt? I have the same error message for my project, but i can't even login with the first attempt. The first error i get is that the "State cookie" is missing, after that i get the same error as you.
In my case the behaviour is the same as yours, i only get the error on vercel, but what is kind of weird in my case is that i had it running previously, i just updated my dependencies to the current versions, tried it on my machine, everything worked fine and then pushed it to vercel from which it started throwing the error.

[sagefarrenholz]

Yup I get the State cookie error first as well.

[bahadryalcn]

Same for me

[matt-wigg]

First-time login is successful after the Microsoft redirect. After logging out, it takes three attempts to sign back in. The first two return configuration errors with a missing PKCE code_verifier error in the Vercel logs; the third time, the cookie is granted and it works.

[bahadryalcn]

On my side its keep trying😩

[bahadryalcn]

I started getting the same error after a new deployment today. The old deployment URLs are still operational. I have tried to deploy with all NodeJS versions. But the result is the same. I am using Keycloak as the provider.

Using:
next-auth: 4.24.7
nextjs: 14.1.4.
node: 20.12.2
npm: 10.5.2

Error on vercel logs:

OAUTH_CALLBACK_ERROR { error: TypeError: PKCE code_verifier cookie was missing. at Object.use (/var/task/node_modules/next-auth/core/lib/oauth/checks.js:71:30) at oAuthCallback (/var/task/node_modules/next-auth/core/lib/oauth/callback.js:90:24) at async Object.callback (/var/task/node_modules/next-auth/core/routes/callback.js:52:11) at async AuthHandler (/var/task/node_modules/next-auth/core/index.js:208:28) at async NextAuthApiHandler (/var/task/node_modules/next-auth/next/index.js:22:19) at async m (/var/task/build/server/pages/api/auth/[...nextauth].js:1:4809) at async K (/var/task/node_modules/next/dist/compiled/next-server/pages-api.runtime.prod.js:20:16545) at async U.render (/var/task/node_modules/next/dist/compiled/next-server/pages-api.runtime.prod.js:20:16981) at async r2.runApi (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:42106) at async r2.handleCatchallRenderRequest (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:36819) { name: 'OAuthCallbackError', code: undefined }, providerId: 'keycloak' }

I am not sure but it might be an error caused by vercel.

[sagefarrenholz]

Yup fairly certain this is a Vercel problem.

[davidwitten]

I'm also experiencing this on Vercel. My old deployment links still work

[sagefarrenholz]

I just tweeted at them: https://x.com/sagefarrenholz/status/1780286565450739737?s=46
Anyone here know some people at vercel to get this fixed quickly?

[bahadryalcn]

I couldn't see any discussion or problem post regarding this issue on the Vercel page. vercel/vercel#6052. This link may be related to this issue. 4 days ago someone said they were having an issue with secure cookies. Apart from this, I didn't see any other posts. Unfortunately, I don't think it will be resolved anytime soon. I will support your tweet

[FrancoARossi]

Same problem here. I tried to log in into my app using next auth with the google provider and got that error, local environment works just fine tho...

[sagefarrenholz]

Also seeing the same for Google provider

[sagefarrenholz]

Def seems like Vercel issue

[lassegit]

I am experiencing the same issue with Google provider. A customer reported an issue and after a while I could verify it in production only. However some users are still able to signup with Google provider, so it could be a regional issue. I ended up adding an alert to the sign in page: https://www.sqlai.ai/signin

@sagefarrenholz Thanks for spearheading this.

[pvrzl]

Encountering the same problem with google provider , we resorted to temporarily setting checks to ['none'] as a workaround.

[LooproInc]

How to setting checks to ['none']?

[pvrzl]

something like this:

[pvrzl]

Please note that setting it to 'none' will likely make it less secure since the recommended approach is to check state and PKCE. That's why I suggested it temporarily until we find a better solution.

[swarnava]

Hi there,

Swarnava from Vercel Customer Success team here.

• Do you have a rough estimate when this issue started happening? Can you share an example deployment when you first noticed this?
• Could you share a minimal reproducible repository that can be shared publicly as a git repository so that we can take a look

[matt-wigg]

Hey @swarnava. I noticed this about two weeks ago (maybe slightly shorter). Here is a public repo example with a Vercel deployment - https://github.com/matt-wigg/next-14-azure-auth. Thanks.

[swarnava]

Thank you. We rolled back a change which we think may introduce the problem. Can you redeploy and let us know if you can still reproduce the issue?

[swarnava]

We rolled back a change which we think may introduced the issue. Can you redeploy and let us know if you can still reproduce the issue?

[matt-wigg]

I can also confirm the roll back fixed the issue after deploying.

[JohannSiemens]

Can confirm that it worked for my project too.

[bahadryalcn]

I can also confirm that it fixed👍🏻 Thanks for the quick support @swarnava

[swarnava]

Thank you gentlemen for confirming!

[Elmosh]

Hi @swarnava, I did redeploy yesterday, yet I keep getting the same error all day with facebook and google providers. the error is constant with facebook with each login, but with google it only happened once, 30 minutes ago.