In SSR v10, after switching the network and refreshing the app, it doesn't stay connected to the newly selected network

Help - Plug n Play
1

Provider.tsx

"use client";

// IMP START - Setup Web3Auth Provider
import { Web3AuthProvider, type Web3AuthContextConfig } from "@web3auth/modal/react";
import { IWeb3AuthState, WEB3AUTH_NETWORK } from "@web3auth/modal";
// IMP END - Setup Web3Auth Provider
// IMP START - Setup Wagmi Provider
import { WagmiProvider } from "@web3auth/modal/react/wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React from "react";
// IMP END - Setup Wagmi Provider

// IMP START - Dashboard Registration
const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
// IMP END - Dashboard Registration

// IMP START - Setup Wagmi Provider
const queryClient = new QueryClient();
// IMP END - Setup Wagmi Provider
 
// IMP START - Config
const web3AuthContextConfig: Web3AuthContextConfig = {
    web3AuthOptions: {
      clientId,
      web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
        // IMP START - SSR
      ssr: true,
      // IMP END - SSR
    }
  };
// IMP END - Config

// IMP START - SSR
export default function Provider({ children, web3authInitialState }: 
  { children: React.ReactNode, web3authInitialState: IWeb3AuthState | undefined }) {
// IMP END - SSR
  return (
    // IMP START - Setup Web3Auth Provider
    // IMP START - SSR
    <Web3AuthProvider config={web3AuthContextConfig} initialState={web3authInitialState}>
      {/* // IMP END - SSR */}
      {/* // IMP END - Setup Web3Auth Provider */}
      {/* // IMP START - Setup Wagmi Provider */}
      <QueryClientProvider client={queryClient}>
        <WagmiProvider>
        {children}
        </WagmiProvider>
      </QueryClientProvider>
      {/*// IMP END - Setup Wagmi Provider */}
      {/*// IMP START - Setup Web3Auth Provider */}
    </Web3AuthProvider>
    // IMP END - Setup Web3Auth Provider
  );
}

Layout.tsx

import React from "react";
// IMP START - Quick Start
import Provider from "../components/provider";
// IMP END - Quick Start
// IMP START - SSR
import { cookieToWeb3AuthState } from "@web3auth/modal";
// IMP END - SSR
import "./globals.css";

import { Inter } from "next/font/google";
// IMP START - SSR
import { headers } from "next/headers";
// IMP END - SSR
const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Web3Auth NextJS Quick Start",
  description: "Web3Auth NextJS Quick Start",
};

// eslint-disable-next-line no-undef
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  // IMP START - SSR
  const headersList = await headers();
  const web3authInitialState = cookieToWeb3AuthState(headersList.get('cookie'));
  // IMP END - SSR
  return (
    <html lang="en">
      <body className={inter.className}>
        {/* // IMP START - SSR */}
        <Provider web3authInitialState={web3authInitialState}>{children}</Provider>
        {/* // IMP END - SSR */}
      </body>
    </html>
  );
}
2

Thanks for sharing your detailed setup and code snippets! Here’s a summary of your issue for the support team:

Issue Summary

  • SDK Details: Web3Auth Plug n Play, using @web3auth/modal/react and SSR (Next.js 13+ with app directory)

  • Platform: Next.js (SSR, app directory)

  • SDK Version: Not specified (please confirm if not latest)

  • Issue:
    After switching the network in your dApp, if you refresh the page, the app does not stay connected to the newly selected network—it reverts to the default.

  • Code Provided:

    • Provider.tsx (Web3Auth + Wagmi + SSR setup)
    • Layout.tsx (SSR state hydration using cookieToWeb3AuthState)

Next Steps & Information Needed

To help the support team reproduce and resolve this, could you clarify a couple of points:

  1. Network Switching Implementation:

    • How are you handling the network switch? Are you using Wagmi’s switchNetwork or a custom method?
    • Is the selected network stored anywhere (e.g., in cookies, localStorage, or app state) to persist across reloads?

  2. Web3Auth State Persistence:

    • The code shows SSR state hydration for authentication, but network selection is not part of the Web3Auth state by default.
    • Are you expecting Web3Auth to remember the network, or are you handling network persistence separately?

  3. SDK Version:

    • Which versions of @web3auth/modal and related packages are you using? (If possible, please share your package.json dependencies for these.)

  4. Console Errors:

    • Are there any errors or warnings in the browser console after refreshing?

Possible Solution & References

  • Network Persistence:
    Web3Auth manages authentication state, but network selection (e.g., Ethereum Mainnet, Polygon, etc.) is typically managed by your dApp logic or Wagmi.
    To persist the network across reloads, you may need to:

    • Store the selected network in a cookie or localStorage on network switch
    • On app load, read the stored value and initialize Wagmi/Web3Auth with that network

    See Web3Auth SSR Docs and Wagmi Network Switching for more details.

  • Example Approach:

    • On network switch, save the selected network to localStorage or a cookie.
    • On SSR hydration, read this value and set the initial network for Wagmi/Web3Auth.

Let us know the details above, and we can guide you with a code example if needed!
If you have screenshots or a minimal reproduction repo, feel free to share those as well.

Thanks for your detailed report—looking forward to helping you resolve this!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support 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. Web3Auth Developer Office Hours

3

Additionally, the Web3Auth-state cookie from the v10 examples does not store the chainId correctly.

4

Hey @betnow

Can you share with us the code for your switchChain implementation?

5

Interestingly, the network switching now works as expected—cookies are updating correctly, and the switched network persists on refresh.

That said, I’m still encountering the following issues:

  1. Logout with External Wallet (MetaMask):
    On first login, MetaMask is detected properly. But after logging out and attempting to log in again, MetaMask is no longer recognized—the UI instead prompts to install it.

  2. Switching from Social Login to External Wallet:
    After logging in with a social provider and then logging out, logging in again using an external wallet results in the useAccount hook from Wagmi returning undefined instead of the connected wallet address.

Just to clarify, I’m seeing these issues on the “web3auth-examples” main branch without making any code changes.