Web3Auth with Google Custom Credentials => Error 400: redirect_uri_mismatch

Embedded Wallets (Web3Auth)
1

  • Describe your issue or question:

    • NextJS framework

    • When using default credentials configured by Web3Auth, works fine (the Google oAuth consent screen shows “Choose an account to continue with web3auth.io”

    • But if I do “Custom Credentials” and enter an app iD and the Google Client ID (xxxx.apps.googlecontentuser.com), the Google oAuth consent screen shows “Access blocked: This app’s request is invalid - Error 400: redirect_uri_mismatch”)

    • I am testing locally, so in the Google Client ID for web application setup page, I have in “Authorized Redirect URIs” localhost:3000. I also tried with an ngrok domain just in case localhost wouldn’t work, but same error

    • If I add Web3Auth to “Authorized Redirect URIs”, then the Google oAuth consent screen works but it says “Choose an account to continue with web3auth.io” …

2

Hi Marcelo — this is the common Google OAuth redirect_uri_mismatch with Embedded Wallets (Web3Auth). Short answer: when you use your own Google Client ID, Google must allow the exact redirect URI Web3Auth uses (Web3Auth). If you only add localhost you’ll get redirect_uri_mismatch. Adding Web3Auth fixes the error but the consent screen will show “web3auth.io” because Web3Auth’s OAuth app performs the flow. To change that branding you’d need to run your own OAuth broker (host the OAuth flow yourself), which is outside the default Embedded Wallets flow. Quick checklist for you to confirm: 1) In Google Cloud Console → Credentials → select your Web application client → Authorized redirect URIs include exactly Web3Auth (with https://). 2) Client type is “Web application.” 3) Verify the actual redirect_uri in the browser network tab if it still errors. One more thing: what Embedded Wallets SDK version are you using? If you want to pursue a custom OAuth broker/branding, I can outline the steps.

Note: This response was generated by an AI bot and may require further verification. The MetaMask Community Team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our monthly Office Hours to discuss this with our engineering team. MetaMask Developer Office Hours

3

Hi @marchie ! Do you find the bot answer helpful? Kindly let us know if you are still having the issue.