When using Web3Auth PnP (MetaMask Embedded Wallet) + wagmi + Next.js,
I found a state mismatch issue after disconnecting a social login and reconnecting with MetaMask.
This happens even when using the official Next.js quick-start example with no modification other than the clientId.
Hi 조성혁 — thanks for the clear repro and details. I can see this is an issue report (state mismatch after switching from a social login to MetaMask). Below I’ve summarized what you’ve provided and then listed likely causes, quick checks/workarounds, and the minimal extra info that will help the support team triage this faster.
Repo/example: web3auth-examples/quick-starts/nextjs-quick-start (you only changed clientId)
Repro steps: Login with Google → disconnect (useWeb3AuthDisconnect().disconnect()) → immediately reconnect with MetaMask → observe Web3Auth isConnected === true but wagmi.useAccount shows undefined / isConnected false
Noted: Page refresh correctly makes wagmi detect the address
Likely cause
Web3Auth’s provider / internal state is being updated on connect, but wagmi’s connector state is not being updated/rehydrated automatically when the underlying provider switches from a social login to MetaMask. In short: Web3Auth thinks it’s connected, but wagmi hasn’t been told to connect/sync to the new provider/account, so wagmi hooks stay stale until a refresh.
What to try (quick actionable steps)
Ensure you’re explicitly connecting/updating wagmi when Web3Auth connects a new wallet/provider
Hook into Web3Auth events (e.g., web3auth.on(‘connected’) or after connect resolves) and then call wagmi’s connect API with the appropriate connector (in effect telling wagmi: “this is the new provider/account”). This forces wagmi to read the provider and update useAccount.
Listen for account/provider events and forward them to wagmi
Add an accountsChanged handler from the Web3Auth provider and, when accounts change, trigger a wagmi connect or revalidation so wagmi updates its state.
Short-term workaround
A page refresh works (you noted this). If you need a hot fix: after Web3Auth connect, call web3auth.provider.request({ method: ‘eth_requestAccounts’ }) and then programmatically call the wagmi connect flow (useConnect) to the matching connector.
Why we ask for a couple small details (only if you haven’t already shown them)
Initialization snippets: how you create the Web3Auth instance and how you initialize/wire wagmi (client + connectors). This helps confirm whether you’re using a Web3Auth-specific wagmi connector or an injected connector wrapper. Please paste the minimal relevant code (initialization & login/disconnect snippets).
Browser console logs / screenshots: any console errors or logs around connect/disconnect events will help (especially any provider events or warnings). If you have a small recording or console screenshot showing the mismatch, that’s useful.
If you want, paste the two small code snippets now:
Web3Auth initialization (where you create the modal / provider)
wagmi client/connector setup (how you create the wagmi client and any connectors)
I’ll take a look and suggest the exact place to wire the wagmi connect/update so the hooks stay in sync. If you already have those snippets in the repo, just point me to the file names and I’ll inspect them.
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 biweekly Office Hours to get this resolved even faster. MetaMask Developer Office Hours