Add SSR to nextjs example

yashovardhan · yashovardhan · commit e0023356430e · 2025-05-22T15:21:33.000+05:30
diff --git a/quick-starts/nextjs-quick-start/app/layout.tsx b/quick-starts/nextjs-quick-start/app/layout.tsx
@@ -1,10 +1,12 @@
 import React from "react";
 // IMP START - Quick Start
 import Provider from "../components/provider";
+import { cookieToWeb3AuthState } from "@web3auth/modal";
 // IMP END - Quick Start
 import "./globals.css";
 
 import { Inter } from "next/font/google";
+import { headers } from "next/headers";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -15,10 +17,12 @@ export const metadata = {
 
 // eslint-disable-next-line no-undef
 export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const web3authInitialState = cookieToWeb3AuthState((headers()).get('cookie'))
+
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Provider>{children}</Provider>
+        <Provider web3authInitialState={web3authInitialState}>{children}</Provider>
       </body>
     </html>
   );
diff --git a/quick-starts/nextjs-quick-start/components/provider.tsx b/quick-starts/nextjs-quick-start/components/provider.tsx
@@ -2,11 +2,12 @@
 
 // IMP START - Setup Web3Auth Provider
 import { Web3AuthProvider, type Web3AuthContextConfig } from "@web3auth/modal/react";
-import { WEB3AUTH_NETWORK } from "@web3auth/modal";
+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
@@ -23,14 +24,16 @@ const web3AuthContextConfig: Web3AuthContextConfig = {
       clientId,
       web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
       authBuildEnv: "testing",
+      ssr: true,
+
     }
   };
 // IMP END - Config
 
-export default function Provider({ children }: { children: React.ReactNode }) {
-    return (
+export default function Provider({ children, web3authInitialState }: { children: React.ReactNode, web3authInitialState: IWeb3AuthState | undefined }) {
+  return (
     // IMP START - Setup Web3Auth Provider
-    <Web3AuthProvider config={web3AuthContextConfig}>
+    <Web3AuthProvider config={web3AuthContextConfig} initialState={web3authInitialState}>
       {/* // IMP END - Setup Web3Auth Provider */}
       {/*// IMP START - Setup Wagmi Provider*/}
       <QueryClientProvider client={queryClient}>
