Twitter OAuth2.0 "Approve App" page returns error only within the Twitter mobile browser

[RAAbbott]

Question 💬

I've been seeing an issue with using the Twitter provider with OAuth 2.0 through the Twitter mobile browser. Desktop version works great with no issue, but when I access the site from a mobile device and call the signIn function, I'm redirected to a browser within the Twitter app (expected I think), but when I approve access I'm redirected to the error callback page (shown below).

After checking the logs, it's giving this error on the api/auth/callback/twitter route:

ERROR	[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error checks.state argument is missing {
  error: TypeError: checks.state argument is missing

A couple weird things happening here: If I click on the Sign in with Twitter option on the error screen, it opens the approve app page in another twitter browser within the original one, like a nested browser or something. If I click approve on this second browser instance, then I'm able to sign in.

The other strange thing: if, once I'm redirected to the twitter mobile browser the first time, I click on the option in the bottom right corner to open it in my default mobile browser (chrome), the approve button works fine the first time.

I'm not sure if I'm missing a step in my config that is necessary for just mobile options, but everything else works great except for that. This is my nextauth config object:

{
providers: [
   TwitterProvider({
     clientId: process.env.CLIENT_ID,
     clientSecret: process.env.CLIENT_SECRET,
     version: "2.0",
     authorization: {
       url: "https://twitter.com/i/oauth2/authorize",
       params: {
         scope: "users.read tweet.read offline.access bookmark.read",
       },
     },
   }),
 ],
 adapter: MongoDBAdapter(clientPromise),
 secret: process.env.NEXTAUTH_SECRET,
 }

How to reproduce ☕️

Just using the basic OAuth2.0 configuration with the twitter authorize URL in the authorization prop in the nextauth config, then calling the signIn("twitter") function from a button click on the client (in my mobile devices default browser, which is Chrome)

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[RAAbbott]

I used the default nextauth template (just adding the v2 params for the Twitter provider) and got the same behavior, is this a known bug or is this not supposed to be happening?

[jake-field]

This has been commonly asked this year on the Twitter developer forums, and they've repeatedly said it's a known issue which has no ETA of a fix. It appears to relate to Apple's Universal Linking, but an error on Twitter's implementation.

The core issue appears to be the OAuth2.0 authorization path has not been added to the AASA (Apple-App-Site-Association file), causing the Universal Link to fire and open the Twitter app if it's installed on your device.

See Twitter's AASA here: twitter.com/.well-known/apple-app-site-association

Twitter's OAuth authorization links:

• OAuth1.0: (api|www).twitter.com/oauth/authorize (in the AASA as "NOT /oauth/*",)
• OAuth2.0: www.twitter.com/i/oauth2/authorize (there are no entries which encompass /i/* or /i/ouath2/*

I believe this is an issue that Next-Auth cannot remedy as the AASA is read by iOS as Next-Auth opens the external OAuth2.0 link, Apple would have to allow opening of links with a flag to ignore the AASA at the target website. This issue is on Twitter itself to resolve.

As for why you're facing session issues, the in-app browser I believe is sandboxed, someone can correct me on this but the cookie/session data do not transfer to/from your default browser on iOS 11.0 onwards. This is why authorizing via the Twitter app itself does not log you in on your default browser, the session only persists in the Twitter app browser. Usually this login works if you try again within the Twitter app; the first attempt will fail due to the cookie/session not transferring as described above, however the second attempt will work as intended.

[RAAbbott]

@jake-field thank you for your comment and for providing some context there, appreciate it! So this issue exists for all apps authenticating through OAuth2.0 until Twitter updates the AASA file?

[Jonniie]

any fix for this on the client-side?

[cupid20103]

Yes, I have the same problem. My project works fine locally, but not in production.

[cupid20103]

Also It fails locally sometimes, and I don't know why.