Error when using Cypress to login with Azure Active Directory

[AnimeAllstar]

I followed this tutorial to login via Azure Active Directory using Cypress.

The login works, up until the last point when the following error occurs:

[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 (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next-auth/core/lib/oauth/checks.js:103:23)
      at oAuthCallback (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/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 (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next-auth/core/routes/callback.js:52:11)
      at async AuthHandler (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next-auth/core/index.js:201:28)
      at async NextAuthHandler (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next-auth/next/index.js:24:19)
      at async /Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next-auth/next/index.js:60:32
      at async Object.apiResolver (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next/dist/server/api-utils/node.js:372:9)
      at async DevServer.runApi (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next/dist/server/next-server.js:513:9)
      at async Object.fn (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next/dist/server/next-server.js:815:35)
      at async Router.execute (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next/dist/server/router.js:243:32)
      at async DevServer.runImpl (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next/dist/server/base-server.js:432:29)
      at async DevServer.run (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next/dist/server/dev/next-dev-server.js:814:20)
      at async DevServer.handleRequestImpl (/Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next/dist/server/base-server.js:375:20)
      at async /Users/asad/Code/UBC/cpsc319/repos/yojana-next/node_modules/next/dist/server/base-server.js:157:99 {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'azure-ad',
  message: 'State cookie was missing.'
}

I am using the middleware to protect all my pages and when this error occurs the user is rerouted to the login page.

I am not sure how I am supposed to fix this or if there is an example somewhere with Azure AD + Cypress + Next-Auth.

Any help with how to fix this or an example would help a lot.

[brandonlenz]

Not sure if there's a better way yet, but Cypress and Next-auth directly contradict eachother.

Cypress says never to login via redirects, next-auth has an example encouraging that.

I ran in to a similar issue as you, after allowing Cypress to go through the redirect flow. I think the issue was somehow related to cypress setting cookies differently than when the app is running in a browser normally (this is likely where your issue comes from).

Cypress recommends mocking/programmatically setting the logged in state to your application. I ended up creating a cypress login command that borrowed some code from next-auth's source code to create and store the next auth session cookie. It works, but it's not ideal.

I would not use Next Auth in a future project in part due to this reason.

[ThreeMangoTrees]

I have also added the question to stack overflow where I have described the issue in much more detail --> stack overflow link

[murilotoloni]

Hey, guys, did you find the solution? I`m having the same issue here... Also, seems that this stack overflow question was removed :(

[brandonlenz]

Not helpful, but I no longer use NextAuth (Or NextJS for that matter), or Cypress.

But that's more related to the project I'm currently assigned to.

That said, this issue still being troublesome would make me avoid NextAuth.

I've entirely switched from cypress to Playwright as well. I haven't used NextAuth in combination with playwright to know if these same issues exist, however.

[murilotoloni]

I found a fix for my scenario! It seems that when the session cookie was set on the initial request it was using the sameSite=Lax policy, so when later the request to exchange the authorization_code with the access token was done I wasn`t getting the session cookie on this request... This is because cypress runs our projects inside an Iframe which is not a first level layer of browsing, so sameSite=Lax prevents the request of having these cookies.

So the solution was to add a intercept to the initial call that is made to mutate the Set-Cookie header by changing the sameSite=Lax to sameSite=None

something like this(you can change to your default auth endpoint that sets the session cookie):

cy.intercept('*', (req) => { req.on('response', (res) => { const setCookies = res.headers['set-cookie']; if (setCookies) { res.headers['set-cookie'] = ( Array.isArray(setCookies) ? setCookies : [setCookies] ) .filter(Boolean) .map((headerContent) => headerContent.replace( /samesite=(lax|strict)/gi, 'SameSite=None; Secure' ) ); } }); });

[austinb847]

@murilotoloni you're a life saver! it also fixes the issue if you adjust the checks property in the provider config to this:

 MicrosoftEntraID({
      ...other configs,
      checks: ['none']
    }),

but I much prefer your solution for security purposes!