next-auth fails in iOS when using PWA

[Ramos-Diego]

How can I make my app a PWA and still be able to use next-auth in iOS?

When an application is a PWA next-auth returns [next-auth][error][callback_oauth_error] Error: Invalid state returned from oAuth provider when used from an iOS device as seen in #783 and #656. It is important to mention that next-auth works as intended with any other OS. I tested Android, Windows, MacOS and iOS.

[GET] /api/auth/callback/google?state=770d5...
12:41:07:32
Status: 302
Duration: 3.47ms
Memory Used: 126 MB
ID: gscxw-1607449...
User Agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 14_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Mobile/15E148 Safari/604.1
2020-12-08T17:41:07.367Z    20132d29-5534-4302-a619-da1d3...    ERROR   [next-auth][error][callback_oauth_error] Error: Invalid state returned from oAuth provider
    at /var/task/node_modules/next-auth/dist/server/lib/oauth/callback.js:46:27
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/var/task/node_modules/next-auth/dist/server/lib/oauth/callback.js:26:103)
    at _next (/var/task/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:194)
    at /var/task/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:364
    at new Promise (<anonymous>)
    at /var/task/node_modules/next-auth/dist/server/lib/oauth/callback.js:28:97
    at /var/task/node_modules/next-auth/dist/server/lib/oauth/callback.js:143:17
    at /var/task/node_modules/next-auth/dist/server/routes/callback.js:58:31
    at Generator.next (<anonymous>) 
https://next-auth.js.org/errors#callback_oauth_error

Reproduction
I created a repo which is the union of the Next.js examples with-next-auth and progressive-web-app. You may go to pwa-sage.vercel.app and test it from there or deploy it yourself.

Feedback

• [ ] Found the documentation helpful
• [ ] Found documentation but was incomplete
• [x] Could not find relevant documentation
• [x] Found the example project helpful
• [ ] Did not find the example project helpful

[martinatwainobicom]

I had a similiar issue with the GitHub provider on iOS.
The solution was to set state to false in the GitHub provider configuration.
However, please note that I am not aware of the security issues introduced by setting state to false.

Providers.GitHub({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET, state: false })

[Ramos-Diego]

That worked, thanks! The state seems to protect against CSRF attacks. I don't know much about this, but I will come back if I find a safer solution. Honestly, I just want to yell at Apple for having the only browser that causes this issue.