Checks.state argument is missing when trying to sign in inside an IFrame

[GabrielMachado11]

Description

I am facing the error Checks.state argument is missing when i try sign in inside an IFrame. I checked some similar errors where env variables were misconfigured, but i think this is not my case since the authentication flow works fine in outside IFrame.

The problem happens in the first login attempt, if the user already is logged the redirect works as expected.

Reproduction

• Create an application and install @auth0/nextjs-auth0
• Setup environment variables
• Instantiate application inside an IFrame
• Sign in

Environment

Please provide the following:

• Version of this library used: 1.5.0
• Next JS version: 11.1.0

[adamjmcgrath]

Hi @GabrielMachado11 - thanks for raising this

You're hitting a SameSite issue, because you're serving your site in an iframe. When the browser is redirected back to your site after logging in, it can't read your state cookies because they're in a 3rd party context (in an iframe).

You should be able to workaround this by setting SameSite to None (you'll need to be on https for this - including on localhost) - but I noticed that we don't allow customising the SameSite of the state transaction cookies, so I'll add some work to do this and give you some instructions on how to get this working. Might be a couple of weeks before I can look at this.

[adamjmcgrath]

FYI it's the same change that we did in the express SDK here auth0/express-openid-connect#188

[GabrielMachado11]

Hi @adamjmcgrath , thanks for your reply!

No worries, i will wait for the changes

[dqunbp]

I have the same issue without iframe.
After authorization, a redirect back to the application occurs and I get this error
As example
http://localhost:3000/api/auth/callback?code=qRjrwf5TkwkOx5Tq&state=eyJyZXR1cm5UbyI6Ii9wcm9qZWN0cyJ9
checks.state argument is missing

It seems that this error occurs when there is no required value in the cookie after the redirect.

[adamjmcgrath]

@dqunbp

This is expected behaviour, you need to set a state check cookie by visiting /api/auth/login first

[GersonDias]

hitting the same issue here... also using Nextjs and running inside an iFrame

[richbachman]

Same issue here testing a Nextjs app via Cypress locally. Works fine with remote URLs, but getting this error when running localhost:3000.

[dqunbp]

@dqunbp

This is expected behaviour, you need to set a state check cookie by visiting /api/auth/login first

@adamjmcgrath
Of course I visit first /api/auth/login then I enter the credentials and then I catch this message.
It happens time by time not permanently, and I don't know how to investigate this problem

[jnlsn]

I'm experiencing exactly what @dqunbp described in a next.js app I'm working on. Most times the auth0 login works fine, however randomly we are getting the checks.state argument missing error on login. If the user attempts to log in again, it works.

[davecarlson]

^^ I get the same too

[dqunbp]

I read the FAQ and tried to reduce the size of the cookies, but that didn't solve the problem.
I will try to fix this by handle the error and prompt the user to login again as recommended in the FAQ.

[charanjit-mtech]

Stuck on same issue

[ngocmobilefolk]

I'm also getting stuck on the same issue. Are there any updates for this?