OAUTH_CALLBACK_ERROR State cookie was missing

[rkreddy99]

Question 💬

Using AzureAdProvider for authentication

export const authOptions: NextAuthOptions = {
  callbacks: {
    async jwt({ token, user, account, profile }) {
      if (account) {
        token.idToken = account.id_token;
      }
      return token;
    },
    async session(params) {
      console.log("sessionUSer", params);
      return params.session;
    },
  },
  providers: [
    // Add your authentication providers here
    AzureAdProvider({
      clientId: <CLIENTID>,
      clientSecret: <CLIENTSECRET>,
      tenantId: <TID>,
    }),
  ],
};

I have tried giving authorization params as well

authorization: {
        params: {
          scope: "openid profile email",
        },
      },

Getting the error

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error State cookie was missing. {
  error: TypeError: State cookie was missing.
      at Object.use (C:\Users\rkreddy\Desktop\bitbucket\ccapp\node_modules\next-auth\core\lib\oauth\checks.js:103:23)
      at oAuthCallback (C:\Users\rkreddy\Desktop\bitbucket\ccapp\node_modules\next-auth\core\lib\oauth\callback.js:89:25)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.callback (C:\Users\rkreddy\Desktop\bitbucket\ccapp\node_modules\next-auth\core\routes\callback.js:52:11)
      at async AuthHandler (C:\Users\rkreddy\Desktop\bitbucket\ccapp\node_modules\next-auth\core\index.js:208:28)
      at async NextAuthApiHandler (C:\Users\rkreddy\Desktop\bitbucket\ccapp\node_modules\next-auth\next\index.js:22:19)
      at async NextAuth._args$ (C:\Users\rkreddy\Desktop\bitbucket\ccapp\node_modules\next-auth\next\index.js:106:14) {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'azure-ad',
  message: 'State cookie was missing.'
}

How to reproduce ☕️

To reproduce use the above authOptions for azure ad, and use it in pages/api/auth/[...nextauth].ts file as specified in the docs.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[molniya0207]

Same problem with Auth0 and VK providers. Looks like problem might be because of an Next.js update - that error doesn't happen for me on Next 13.3.0

[shiam-technext]

What was your next-auth version?

[pixxelfriend]

After updating to next: 13.5.4 and next-auth: 4.23.2 the error message does not occur anymore.

[OatsProgramming]

I have the same problem with Google and Github Providers. Opened a discussion about it ( #7403 ) but still nothing. I found something similar and tried to use the solution that was found there ( #6898 ) but it wasn't working. Even downgraded to 13.2.4: nothing.

[sajithrw]

I have the same issue with Google provider with Firebase. I am using next 13.4.2 and next-auth 4.22.1 versions. Also tried to downgrade next version to 13.2.4. Didn't work though.

Tried to define cookies with pkceCodeVerifier and state. Same result. Do we have any workaround for this issue?

[sajithrw]

Hello @ashank2603, thank you for the response. I tried adding below, but it didn't work. Am I missing something?

callbacks: { async redirect({ url, baseUrl }) { return baseUrl }, },

[ashank2603]

Can you show your whole authOptions object?

[mavdotso]

This one worked for me.

Thanks so much @ashank2603!

[Tanmayyy209]

Have got the same error with google provider still stuck over there please help

[vitorsorato]

same here, Google provider..

[atomcat1978]

Had this exact same error recently in production. We have a brokered login in out auth solution, and found many of these errors in the logs:

[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error State cookie was missing. {
  error: TypeError: State cookie was missing.
      at Object.use (/usr/src/app/node_modules/next-auth/core/lib/oauth/checks.js:103:23)
      at oAuthCallback (/usr/src/app/node_modules/next-auth/core/lib/oauth/callback.js:89:25)

I could reproduce the problem in windows + latest Edge by the following steps:

• start Egde
• log in
• close edge without logging out
• start Edge again
• log in again (Edge does not pick up the previous auth session as Chrome does for example)
• after the brokered login this error appears n nextJs log

[simonecervini]

I have tried this step sequence and am unable to reproduce the problem. The only difference is that I used Mac.

I still keep seeing the same error in the logs in production.

If you can reproduce it, does it change anything by using absolute versus relative callbackUrls? That seems to be the only concrete observation that came out of this discussion.

[atomcat1978]

Hi,

We have solved the problem partially after I figured out that we had a redirect in our load balancer, which redirected traffic from www.ourdomain.com to ourdomain.com - which certainly screwed up all the cookies for someone who used www.ourdomain.com. We turned it into a rewrite, so the browser jumps over to the correct domain without the www. prefix now. This has solved the problem partially, however, I still see some of these error messages in the logs.

I'll report back as soon as I (hopefully) figure out the reason we still get these messages (though in far lower numbers).

[RoboTums]

Had this problem with Auth0.
added callbacks: { async redirect({ url, baseUrl }) { return baseUrl }, } to my NextAuth authOptions object, and that fixed it for me on Next 13.3.0 + Next-Auth 4.22.1

what tripped me up is I specify the callback in the signIn method, but that doesn't redirect properly.

[vicary]

Tried the callbacks option, doesn't work.

• next@13.4.4
• next-auth@4.22.1

I am using Google OAuth via Auth0 provider.

[Tanmayyy209]

hello , have you solved this error ? I am getting the same error with google Oauth

[simonecervini]

Had this exact same error recently in production.

I'm not able to reproduce the problem, but I am experiencing a concerning error rate in production. Therefore I'm not actually sure this error is causing real problems.

• next@13.4.4 with app dir, but I'm still using API routes for next-auth (/api/auth/[...nextauth].ts)
• next-auth@4.22.1

[simonecervini]

I tried as suggested above some changes in the redirect callback, but actually I was already using a quite similar function that has remained unchanged for the last 18 months.

I also tried to unify the callbackUrls and make them all relative (and not a mix of absolute and relative), but nothing changed. Maybe I could try the opposite.

[lbowes]

What does your callbacks: block look like?

[simonecervini]

callbacks: {
    async redirect({ url, baseUrl }) {
        const redirectUrl = url.startsWith('/') ? new URL(url, baseUrl).toString() : url;
        console.log(`[next-auth] Redirecting to "${redirectUrl}" (resolved from url "${url}" and baseUrl "${baseUrl}")`);
        return redirectUrl;
    },
}

[simonecervini]

I added the console.log recently for debugging purposes and noticed that it gets called in places where you would not expect it. In this application I have a tRPC backend and next-auth is used only once to pass the session object into the application context (getServerSession()) and I noticed that the redirect is often called during mutations that have nothing to do with the sign in/sign out flow and this is clearly an error

[DuncanLHS]

Nice find. Perhaps worth recreating this as an issue then rather than discussion

[DuncanLHS]

Same error here with the Discord provider.
next-auth 4.22.1
next 13.4.4

All works fine on localhost but see the problem when deployed to vercel. Tried the redirect callback but no change.

[yutounun]

totally same here.

[AndyPandyGeek]

I've spent hours solving this issue with Next-Auth 4.22.1. Didn't work on either localhost or pm2.

Eventually upgraded from Next 13.2.4 to 13.4.4 and that solved it on both local and remote servers.
What a bummer!

[vicary]

I am on 13.4.4 but it still happens, which provider are you using?

[AndyPandyGeek]

I am on 13.4.4 but it still happens, which provider are you using?

It was a Google provider.

[amir-h-e]

i'm using google provider too, but i still have the error

[JoMaCaCha]

An app with Next 13.4.2 and Next-Auth 4.22.1, deployed on Google App Engine, had this issue when using the Google provider. In "Authorized redirect URIs" I had "https://www.example.com/api/auth/callback/google", but after adding "https://example.com/api/auth/callback/google" this issue was resolved.

[robValtech]

I am having too the same problem using Next 12.1.6 with next-auth 4.22.1 and Cognito provided.
Our provider config is fairly simple, can't see what could be done to avoid the oAuthCallback issue. This worked fine before the upgrade.

In our config we use

url.searchParams.append(
    'redirect_uri',
    `${APP_URL}/api/auth/callback/cognito`
  );

Even when the APP_URL is 'localhost:3000' (so no www. present) the issue occurs.

[rene6502]

We observe this error frequently in prod.
It is caused by an unmotivated /api/auth/callback.
The call occurs quite long after a successful login (10-70s).
Because the state cookie is deleted at the end of the login the error is reported.
I have no clue what triggers this call.
We are using next:12.3.1 and next-auth:4.20.1

[balazsorban44]

This endpoint is public, so it might simply be a bad actor trying. I would have a look at the logs to see where the requests are coming from.

Doesn't sound like a bug to me at first.

[simonecervini]

What do you mean by "bad actor"? In the logs I can personally confirm that the errors always come from requests made by real users to the endpoint /api/auth/callback/google?state=[...]&code=[...]&scope=[...]&authuser=0&prompt=none. I verified using Microsoft Clarity registrations as well, and they are all legit registration attempts.

If there is any way I can help please tell me, I understand that it is not the clearest discussion in the world and without accurate reproductions it is difficult to work

[simonecervini]

I usually observe that the first request succeeds and then a new request is made after several seconds and fails (the last one I looked at 14 seconds). In both I notice that searchParams has the same structure except for the code and prompt parameter (in the first case "consent" and in the second case "none"). So state does not change

[pmuens]

We're seeing the same error in our production logs. Do you know if users see an error if this happens? Or is this just a failing callback that doesn't affect the user experience.

Unfortunately I'm not able to reproduce this and test this myself...

We're on:

"next": "^13.5.4"
"next-auth": "^4.23.2"

[JW709]

Experiencing the same issue here.
Node v20.10.1
next-auth "^4.24.5"
next "13.4.7" <- the most recent supported version on firebase

at async NextAuth._args$ (/workspace/node_modules/next-auth/next/index.js:108:14) {
name: 'OAuthCallbackError',
code: undefined
},
providerId: 'facebook',
message: 'State cookie was missing.'
}

We get the same error for Google, Apple, and Facebook. All redirect URIs have been added.

const authOptions = { secret: process.env.NEXTAUTH_SECRET, // Configure one or more authentication providers providers: [ FacebookProvider({ clientId: process.env.FACEBOOK_CLIENT_ID ?? "", clientSecret: process.env.FACEBOOK_CLIENT_SECRET ?? "", }), AppleProvider({ clientId: process.env.APPLE_ID ?? "", clientSecret: process.env.APPLE_SECRET ?? "", }), GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_ID ?? "", clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "", authorization: { params: { prompt: "consent", access_type: "offline", response_type: "code", }, }, }), ], jwt: { secret: process.env.NEXTAUTH_SECRET, }, cookies: { sessionToken: { name: __Secure-next-auth.session-token, options: { httpOnly: true, sameSite: "lax", path: "/", secure: true, }, }, callbackUrl: { name: __Secure-next-auth.callback-url, options: { sameSite: "lax", path: "/", secure: true, }, }, csrfToken: { name: __Host-next-auth.csrf-token, options: { httpOnly: true, sameSite: "lax", path: "/", secure: true, }, }, pkceCodeVerifier: { name: "next-auth.pkce.code_verifier", options: { httpOnly: true, sameSite: "lax", path: "/", secure: true, maxAge: 900, }, }, state: { name: "next-auth.state", options: { httpOnly: true, sameSite: "lax", path: "/", secure: true, maxAge: 900, }, }, nonce: { name: "next-auth.nonce", options: { httpOnly: true, sameSite: "lax", path: "/", secure: true, }, }, }, callbacks: { async redirect({ url, baseUrl }: any) { return baseUrl; }, async jwt({ token, account }: { token: any; account: any }) { if (account) { token.accessToken = account.access_token; token.provider = account.provider; } return token; }, async session({ session, token }: { session: any; token: any }) { session.accessToken = token.accessToken; session.provider = token.provider; return session; }, async signIn({ user, account }: { user: any; account: any }) { try { await registerUser({ displayName: user.name, email: user.email, region: "1", identityProvider: { id: account?.provider?.toUpperCase(), accessToken: account?.access_token, }, }); } catch (err: any) { console.warn(err); } return true; }, }, };

Here is my sample [...nextAuth] configuration. As a last ditch effort attempting to [manually specify cookies](https://next-auth.js.org/configuration/options#cookies) although this approach is not recommended.

[Gmust]

Had same problem with this on "next": "^13.4.5-canary.6", when I was using localhost it was Ok, after deploying it on vercel i recieve this error after login attemp
[next-auth][error][OAUTH_CALLBACK_ERROR] https://next-auth.js.org/errors#oauth_callback_error State cookie was missing. { error: TypeError: State cookie was missing. at Object.use (/var/task/node_modules/next-auth/core/lib/oauth/checks.js:103:23) at oAuthCallback (/var/task/node_modules/next-auth/core/lib/oauth/callback.js:89:25) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 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 NextAuth._args$ (/var/task/node_modules/next-auth/next/index.js:106:14) { name: 'OAuthCallbackError', code: undefined }, providerId: 'google', message: 'State cookie was missing.' }

[gavinthomas-valtech]

Having the same issue after upgrading to 1.20 from 1.15. Anyone from next auth understand whats changed between these versions?

[gertig]

One thing that can also cause this error is if your environment variable NEXTAUTH_URL is not set correctly. For example if you click the button that triggers Google oauth from a page at URL http://localhost:6060 then your .env (or similar) should include NEXTAUTH_URL=http://localhost:6060

[huychau-agilityio]

My steps:

1. Open Google accounts, the list must be greater than 1 account. Choose an account not registered, then redirect to my registration form.
2. Do nothing and click the back button on browser to back the list of accounts. Then choose the existing account. Got this error.
   Note: When I open Google accounts and choose the direct existing one, no problem.

[tcb1978]

"next": "14.0.4",
"next-auth": "^4.24.5",


Exact same problem with Okta when running with Cypress Test Runner. Work in local just fine manually. Error only appears when running with Cypress.

[AliakseiPaseishviliSyntheticabio]

Hi everyone, hope my answer will help to everyone. We work with Keycloak.

Our config looks like this:

import dayjs from 'dayjs';
import { jwtDecode } from 'jwt-decode';
import { AuthOptions } from 'next-auth';
import { JWT } from 'next-auth/jwt';
import KeycloakProvider from 'next-auth/providers/keycloak';

declare module 'next-auth/jwt' {
  interface JWT {
    access_token: string;
    id_token: string;
    expires_at: number;
    refresh_token: string;
    error?: string;
    roles: string[];
  }
}

declare module 'jwt-decode' {
  export interface JwtPayload {
    realm_access: { roles: string[] };
  }
}

declare module 'next-auth' {
  interface Session {
    error?: string;
    roles: string[];
    sub?: string;
  }
}

const COOKIES_LIFE_TIME = 24 * 60 * 60;
const COOKIE_PREFIX = process.env.NODE_ENV === 'production' ? '__Secure-' : '';

const refreshAccessToken = async (token: JWT) => {
  const url = `${process.env.KEYCLOACK_ISSUER}/protocol/openid-connect/token`;
  const resp = await fetch(url, {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      client_id: process.env.KEYCLOACK_CLIENT_ID,
      client_secret: process.env.KEYCLOACK_CLIENT_SECRET,
      grant_type: 'refresh_token',
      refresh_token: token.refresh_token,
    }),
    method: 'POST',
  });
  const refreshToken = await resp.json();
  if (!resp.ok) throw refreshToken;

  const tokenData = jwtDecode(refreshToken.access_token);

  return {
    ...token,
    access_token: refreshToken.access_token,
    id_token: refreshToken.id_token,
    expires_at: Math.floor(Date.now() / 1000) + refreshToken.expires_in,
    refresh_token: refreshToken.refresh_token,
    roles: tokenData.realm_access.roles,
  };
};

export const authOptions: AuthOptions = {
  providers: [
    KeycloakProvider({
      clientId: process.env.KEYCLOACK_CLIENT_ID,
      clientSecret: process.env.KEYCLOACK_CLIENT_SECRET,
      issuer: process.env.KEYCLOACK_ISSUER,
    }),
  ],
  callbacks: {
    async jwt({ token, account, trigger }) {
      const nowTimeStamp = dayjs();

      try {
        // we refresh token on update action
        if (trigger === 'update') {
          return await refreshAccessToken(token);
        }

        // we get intial token on sign in
        if (
          account &&
          account.access_token &&
          account.id_token &&
          account.expires_at &&
          account.refresh_token
        ) {
          const tokenData = jwtDecode(account.access_token);

          token.roles = tokenData.realm_access.roles;
          token.access_token = account.access_token;
          token.id_token = account.id_token;
          token.expires_at = account.expires_at;
          token.refresh_token = account.refresh_token;
          return token;
          // if time of expires is more then current date then we return existing token.
        } else if (
          token &&
          nowTimeStamp.isBefore(dayjs.unix(token.expires_at))
        ) {
          return token;
          // this happens after user session is expired, so in this case we try to update user session
        } else {
          return await refreshAccessToken(token);
        }
        // if session update is failed we return error and on client we are doing logout(TokenExpireController).
      } catch (error) {
        return { ...token, error: 'RefreshAccessTokenError' };
      }
    },
    async session({ session, token }) {
      session.error = token.error;
      session.roles = token.roles;
      session.sub = token.sub;

      return session;
    },
  },
  events: {
    async signOut({ token }) {
      const logOutUrl = new URL(
        `${process.env.KEYCLOACK_ISSUER}/protocol/openid-connect/logout`,
      );
      logOutUrl.searchParams.set('id_token_hint', token.id_token!);

      await fetch(logOutUrl);
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: '/auth/signin',
  },
  cookies: {
    sessionToken: {
      name: `${COOKIE_PREFIX}next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
        secure: true,
      },
    },
    callbackUrl: {
      name: `${COOKIE_PREFIX}next-auth.callback-url`,
      options: {
        sameSite: 'lax',
        path: '/',
        secure: true,
      },
    },
    csrfToken: {
      name: `${COOKIE_PREFIX}next-auth.csrf-token`,
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
        secure: true,
      },
    },
    pkceCodeVerifier: {
      name: `${COOKIE_PREFIX}next-auth.pkce.code_verifier`,
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
        secure: true,
        maxAge: COOKIES_LIFE_TIME,
      },
    },
    state: {
      name: `${COOKIE_PREFIX}next-auth.state`,
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
        secure: true,
        maxAge: COOKIES_LIFE_TIME,
      },
    },
    nonce: {
      name: `${COOKIE_PREFIX}next-auth.nonce`,
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
        secure: true,
      },
    },
  },
};

So why I added cookies to config?
I figured out that main 2 cookies pkceCodeVerifier and state live only 15 minutes, which creates bug.
For example user can do login via keycloak for 30 minutes, and if user just waits for 15 minutes and more, then after successful login in keycloak with redirect we got State cookie was missing, which actually shows wierd signin page from nextauth.
Changing time to 1 day totally fix the issue.

In this case we do not need to turn off 'checks' in config.
From other point in documentation said that rewriting cookies is not good, but this is only the way to fix our issue.

We also do redirect from nextauth signin page to our custom signin page with nice design.

[arielff3]

Nice job!

[maiconcarraro]

just curious, how do you use the trigger param for jwt function? how does it "trigger the trigger"?

[AliakseiPaseishviliSyntheticabio]

@maiconcarraro in docs described when you can use 'trigger'.
We have logic, where we refresh user session in client app. It is method update of useSession hook. It is said that you trigger update of JWT, but as it is keycloak - you need to write this logic on your own in config.

[maiconcarraro]

gotcha, thank you, missed this

[vuongpd95]

Great job!

[arisonx]

To me, fixing the DNS addresses of the network solved the issue. I was using the following: 1.1.1.1, 8.8.4.4. After hours of trying to resolve it, I decided to change the DNS to: 8.8.8.8 and 8.8.4.4, and finally it worked. Maybe because I was using Cloudflare and Google as DNS.

[tsafadi]

Same issue with Keycloak

[peppescg]

hi @tsafadi did you find a fix for this issue? I have Keycloak too, actually I am not able to run vercel preview env

[tzhangchi]

Same issue with vercel:

[OAUTH_CALLBACK_ERROR] State cookie missing when using Google OAuth provider

Description
When using the Google OAuth provider with NextAuth.js, I'm encountering an OAUTH_CALLBACK_ERROR with the message "State cookie was missing." The error occurs during the OAuth callback handling process.

Steps to Reproduce

1. Configure the Google OAuth provider in NextAuth.js with the correct client ID and secret.
2. Initiate the sign-in process using the Google OAuth provider.
3. After being redirected back from Google, NextAuth.js throws the OAUTH_CALLBACK_ERROR with the message "State cookie was missing."

Error Details

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error State cookie was missing. {
  error: TypeError: State cookie was missing.
      at Object.use (/var/task/.next/server/chunks/936.js:6:204092)
      at oAuthCallback (/var/task/.next/server/chunks/936.js:6:200299)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.callback (/var/task/.next/server/chunks/936.js:30:804)
      at async AuthHandler (/var/task/.next/server/chunks/936.js:6:181958)
      at async NextAuthRouteHandler (/var/task/.next/server/chunks/936.js:30:19994)
      at async e.length.t (/var/task/.next/server/chunks/936.js:30:21463)
      at async /var/task/node_modules/@sentry/nextjs/cjs/common/wrapRouteHandlerWithSentry.js:56:36
      at async /var/task/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:14:39709 {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'google',
  message: 'State cookie was missing.'
}

Environment
next.js
vercel
Next.js version: 13.5.6

[LinnJS]

Does this only happen in production or also on your local?

[yepMad]

Does this only happen in production or also on your local?

Only production

[tzhangchi]

Only production

Only production

[tycomo]

@yepMad @tzhangchi did you ever find a solution for this? I started seeing this randomly with my GoogleProvider where around 1% of requests when deployed to Vercel in production are throwing the "state cookie was missing" error. The other solutions with disabling checks or specific next versions seemed undesirable or do not seem to make a difference for me.

[VruyrSaribekyan]

если решили вопрос помогите пожалуйста

[dennis-gonzales]

everything was working fine for me with version "next": "^14.2.3" until I upgraded it to "next": "^14.2.5" and now this "[ERROR State cookie was missing]" suddenly shows up. I immediately reverted back my changes so that this works again. really not sure what's the issue here.

[nikushx]

@dennis-gonzales has the answer that worked for me. In my case I had been on an old version that was also broken.

14.2.3 is the working version.

[igokul1973]

Switch back to next: 14.2.3 did not help in my case (I had recently upgraded to 14.2.5). I am having trouble only with Twitter (Google and Facebook are working) and only on localhost. Twitter OAUTH configuration page has localhost and my prod domain name in all necessary places. Banging my head for the second day. AFAIR it did work on localhost and then I added the production domain and that is when (my wild guess) it stopped working on localhost.
Forgot to mention that I am using "next-auth": "^5.0.0-beta.19".
P.S.
The next day the problem disappeared. My guess is that problem lied with Twitter OAuth servers and got fixed. Unfortunately, the error does not allow to see the culprit.

[thathurtabit]

FWIW, I'm seeing this same issue in my error logs for other users, despite it working correctly for myself (i.e. I can log in via different accounts successfully in my app).

Error:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error State cookie was missing. {
  error: TypeError: State cookie was missing.
 ...

I'm using:

"next": "^14.2.5",
"next-auth": "^4.24.7",

[peppescg]

"next": " 14.2.3.",
"next-auth": "5.0.0-beta.20,

I fixed my issue removing AUTH_REDIRECT_PROXY_URL from vercel env var
Now I am able to signin locally, on vercel preview and production environment

[ozergul]

This solution worked for me

GoogleProvider({
    ..clientParams,
    authorization: {
      params: {},
    },
    checks: ["none"],
  }),

"next": "14.2.6",
"next-auth": "^4.24.7",

[danirisdiandita]

For me, due to mismatch between localhost and 127.0.0.1, my NEXTAUTH_URL=http://127.0.0.1:3000 but i opened the dashboard from http://localhost:3000. when I logged in from 127.0.0.1:3000 it works (not from localhost:3000).

and Make sure the NEXTAUTH_URL variable matched the url domain in local / production and loaded correctly during running time (and other dependency variable within build time)

[piyushyadav0191]

fixed the problem! My NEXTAUTH_URL and callback URL were correct, but the issue arose from using the following

<Link href="/api/auth/callback/github">Login with GitHub</Link>

I changed the link to use the signIn function from next-auth/react:

import { signIn } from 'next-auth/react';

<Button onClick={() => signIn()}>Login with GitHub</Button>

Advice for Similar Issues

If you encounter a similar problem in your codebase, here are some tips to consider:

• Check your NEXTAUTH_URL in your .env file.
• Verify your callback URL in your developer settings (Google Developer Console for Google, GitHub Developer Settings for GitHub).
• Use the built-in signIn function from the next-auth package.
• Carefully review the options you provided in the next-auth configuration.

Feel free to let me know if you need any further assistance!

[julienguillot77]

I have the problem with Nuxt and Sidebase-auth which are based on Next-auth 4.
I created an issue on their github but they tell me that it is related to Next-auth.

sidebase/nuxt-auth#922

Can someone explain me why the state cookie is not created and how to solve the problem without having to disable checks because it is a big security flaw?

[tycomo]

I have the same issue that started occurring last week when I upgraded my Next version and haven't been able to reproduce or come up with any meaningful solution. Like you, I have not wanted to disable security checks as no one has really explained what the implication of disabling the check is. I handle the error with a unique message asking users to try a different provider as a workaround 😭. I commented this on another post but my findings are that this occurs only a low percentage of requests with no consistency on device agents (I had thought it could be a specific browser issue).

[julienguillot77]

I want to precise that Sidebase-auth is based on next-auth v4 (before 4.25).

[VruyrSaribekyan]

import NextAuth, { NextAuthOptions, Profile } from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import GoogleProvider from 'next-auth/providers/google'
import AppleProvider from 'next-auth/providers/apple'
import VKProvider from 'next-auth/providers/vk'
import { decode } from 'jsonwebtoken'
import { authApi } from '@/api/auth'
import { ELoginTypes } from '@/models/auth'

interface TokenPayload {
_id: string;
email: string;
role: string;
}

const apiVersion = '5.131'

export const authOptions: NextAuthOptions = {
providers: [
CredentialsProvider({
name: 'credentials',
credentials: {
email: { label: 'Email', type: 'email', placeholder: 'you@example.com' },
password: { label: 'Password', type: 'password' }
},
async authorize(credentials) {
try {
if (!credentials?.email || !credentials?.password) {
throw new Error('Email and password are required.')
}

      const response = await authApi.signIn({
        email: credentials.email,
        password: credentials.password,
        type: ELoginTypes.USER
      })

      const data = response.data

      if (response.status === 200 && data.access_token) {
        const decodedToken = decode(data.access_token) as TokenPayload | null

        if (!decodedToken || !decodedToken._id || !decodedToken.email || !decodedToken.role) {
          throw new Error('Failed to decode access token')
        }

        return {
          id: decodedToken._id,
          email: decodedToken.email,
          role: decodedToken.role,
          accessToken: data.access_token
        }
      } else {
        throw new Error('Invalid credentials')
      }
    } catch (error: any) {
      throw new Error(
        error.response?.data?.message || 'Invalid credentials'
      )
    }
  }
}),
GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID!,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
  authorization: {
    params: {},
  },
  checks: ["none"],
}),
AppleProvider({
  clientId: process.env.APPLE_CLIENT_ID!,
  clientSecret: process.env.APPLE_CLIENT_SECRET!,
  authorization: {
    params: {
      scope: 'name email',
      response_mode: 'form_post'
    }
  }
}),
VKProvider({
  clientId: process.env.VK_CLIENT_ID!,
  clientSecret: process.env.VK_CLIENT_SECRET!,
  authorization: {
    params: {
      scope: 'email',
      response_type: 'code',
      v: apiVersion
    }
  },
  accessTokenUrl: `https://oauth.vk.com/access_token?v=${apiVersion}`,
  requestTokenUrl: `https://oauth.vk.com/access_token?v=${apiVersion}`,
  profile(profile) {
    return {
      id: profile.id.toString(),
      email: profile.email,
      firstName: profile.first_name,
      lastName: profile.last_name,
      role: ELoginTypes.USER
    }
  }
})

],
session: {
strategy: 'jwt',
maxAge: 7 * 24 * 60 * 60 // 7 дней
},
pages: {
signIn: '/'
},
callbacks: {
async redirect({ url, baseUrl }) {
const redirectUrl = url.startsWith('/') ? new URL(url, baseUrl).toString() : url;
console.log([next-auth] Redirecting to "${redirectUrl}" (resolved from url "${url}" and baseUrl "${baseUrl}"));
return redirectUrl;
},
async jwt({ token, user, account, profile }) {

  let access_token = ''

  if (account?.provider === 'google') {
    const response = await authApi.googleSignUp({
      access_token: account.access_token as string,
      auth_type: ELoginTypes.USER
    })
    access_token = response.data.access_token
  }

  if (account?.provider === 'apple') {
    const authorizationCode = account?.code as string

    const response = await authApi.appleSignUp({
      code: authorizationCode,
      auth_type: ELoginTypes.USER
    })
    access_token = response.data.access_token
  }

  if (account?.provider === 'vk') {
    const vkProfile = profile as Profile & { id: string }

    if (!vkProfile.id) {
      throw new Error('VK authentication failed: missing profile id')
    }

    const silent_token = account.access_token as string
    const uuid = vkProfile.id

    const response = await authApi.vkSignUp({
      silent_token: silent_token,
      uuid: uuid,
      auth_type: ELoginTypes.USER
    })
    access_token = response.data.access_token
  }

  if (user) {
    const accessTokenExpires = Date.now() + 15 * 60 * 1000 // 15 минут
    const accessToken = user.accessToken || access_token
    return {
      ...token,
      accessToken,
      refreshToken: user.refreshToken,
      accessTokenExpires,
      user: {
        id: user.id,
        email: user.email,
        role: user.role
      }
    }
  }

  if (typeof token.accessTokenExpires === 'number' && Date.now() < token.accessTokenExpires) {
    return token
  }

  return {
    ...token,
    error: 'TokenExpiredError'
  }
},
async session({ session, token }) {
  session.user = token.user as any
  session.accessToken = token.accessToken
  session.refreshToken = token.refreshToken
  session.error = token.error

  if (token.email) {
    session.user.email = token.email
  }

  return session
}

},
secret: process.env.NEXTAUTH_SECRET!
}

export default NextAuth(authOptions)

на localhost:3000 работает но на дев окружении не работает
NEXTAUTH_URL=https://dev.mydomen.com

и все настройки правильно сделаны
помогите пожалуйста

"next": "^14.1.4",
"next-auth": "^4.24.8",

[BRBCoffeeDebuff]

OK I have been having this error for awhile and after diving into it the issue seems to be due to a misconfiguration on Nginx in conjunction with a misconfiguration in the auth provider cookies section.

1. Diving into the docs on next-auth the useSecureCookies option tries to smart default for you. If you have Nginx in front of your server of course then you are likely running your application on something like http://localhost:port with Nginx proxying data in and out as well as providing SSL.
2. If you are able to log into your site you will see that JSESSIONID cookie in your web browser developer tools panel under Application > Cookies is not secure (No Suprise here)
3. If your problem is the same as mine then forwarding port 80 > 443 should SEEM to fix the issue, however you leave yourself open to session hijacking attacks if you don't also ensure you fix your next-auth config to set your useSecureCookies
4. On the Nginx side I think the big items are
   location / { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }
   with the last line being critical to pass the hint to nextjs/next-auth that your original request was https even though the https is terminated at Nginx

HTH