Session management

Help - Plug n Play
1

Hi,

Do you have example of implementing session management using Next.JS. Basically, an app build in NextJS with multiple pages and session persists across the pages.

2

Thanks for your question, Nestor! Here’s a summary for the support team and some guidance for you:

User Request Summary

  • SDK/Integration: Web3Auth Plug and Play (PnP) SDK
  • Platform: Next.js (Web, React-based framework)
  • Topic: Session management—how to persist user sessions across multiple pages in a Next.js app using Web3Auth.
  • User Asks: Looking for an example or best practice for session management with Web3Auth in a Next.js application, ensuring the session persists across page navigation.

Guidance & Documentation

Web3Auth session management in web apps (including Next.js) is handled via configuration options like sessionTime and storageType in the Web3Auth SDK. Here’s how you can achieve persistent sessions:

1. Configure Web3Auth for Persistent Sessions

When initializing Web3Auth, set the following options:

const web3AuthOptions = {
  clientId: "YOUR_CLIENT_ID",
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  sessionTime: 86400 * 7, // 7 days in seconds
  storageType: "local",   // 'local' persists across tabs and reloads
};
  • storageType: "local" ensures the session persists across browser tabs and page reloads.
  • sessionTime controls how long the session remains valid.

2. Next.js Integration Example

Web3Auth provides a Next.js Quick Start guide and React SDK docs that are directly applicable. The session will persist as long as you use the same Web3AuthProvider context at the top level (e.g., in _app.js or _app.tsx).

Example setup in _app.tsx:

import { Web3AuthProvider } from "@web3auth/modal/react";
import web3AuthContextConfig from "../web3authContext"; // your config file

function MyApp({ Component, pageProps }) {
  return (
    <Web3AuthProvider config={web3AuthContextConfig}>
      <Component {...pageProps} />
    </Web3AuthProvider>
  );
}
export default MyApp;

3. Session Persistence

  • As long as storageType is set to "local" and the provider is at the app root, the session will persist across all Next.js pages.
  • If you need to access the authentication state or user info on different pages, use the Web3Auth React hooks (useWeb3Auth) as described in the React SDK docs.

References

If you need a more detailed code example or run into any issues with session persistence, let us know your current code setup or any specific errors you encounter!

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