[bug] Social Media login not working on Safari

[melvinmcrn]

Link to minimal reproducible example

https://terminal.infinit.tech

Summary

TL;DR

Social media login is not working on Safari browser on both iOS and Mac. We tested it on Chrome and Brave and they are working fine.

Details:

Our project is a multichain projects (has both EVM and Solana).
We use viem, @solana/web3.js, and @reown/appkit.

We enable these socials:

[
      'google',
      'x',
      'discord',
      'farcaster',
      'apple',
    ],

Our Debugging Method:

We try using the website in Chrome and Brave, and try loggin in with Google and Apple, it's working just fine.
So we try to debug it on Safari by

1. Open the AppKit Modal
2. Click "Continue With Google"
3. It pop-up the Google's sigh in page. We successfully logged in.
4. It redirects to walletconnect's "Successfully Login..." page
5. Then, it redirects to another page under the domain secure.walletconnect.org and show a blank page.
6. We inspect the log of that blank page, there's a console error Error: Missing projectId in AppKitProvide
7. We search for that log in the code of that page and found that you guys check for the path "oauth" from the URL, but it's missing. The URL of the blank page is https://secure.walletconnect.org/sdk/<Long string and other query that seem confidential>

We notice that opening the AppKit Demo app works fine on Safari, so we try to inspect the OAuth URL that was redirect from the demo app compared to our app. We found that, the encoded query string from both our App and from the Demo app are similar. Here's an example of the headers of our app (decoded JWT):

{
  "API_KEY": <MASKED>,
  "DOMAIN_ORIGIN": "https://secure.walletconnect.org",
  "host": "auth.magic.link",
  "sdk": "magic-sdk",
  "version": "28.0.7",
  "ext": {
    "solana": {
      "rpcUrl": "https://rpc.walletconnect.org/v1/?chainId=solana:<MASKED>&projectId=<MASKED>",
      "chainType": "SOLANA"
    }
  },
  "locale": "en_US",
  "meta": {
    "projectId": <MASKED>
  }
}

I have masked some info that I think it's confidential. But as you can see, the ProjectID is already included in the RPC and on the meta object.

List of related npm package versions

"@reown/appkit": "^1.6.9",
"@reown/appkit-adapter-solana": "^1.6.9",
"@reown/appkit-adapter-wagmi": "^1.6.9",
"@solana/wallet-adapter-react": "^0.15.35",
"@solana/wallet-adapter-wallets": "^0.19.32",
"@solana/web3.js": "^1.98.0",
"viem": "^2.23.6",
"wagmi": "^2.14.11"

Node.js Version

22.x

Package Manager

[email protected]

[linear]

APKT-2398 [bug] Social Media login not working on Safari