Keep web3auth session persistent after page refresh

Help - Plug n Play PnP Web SDKs
1

Hello everyone! I am trying to use make the web3auth session persistent even after the page refresh. I was hope that wagmi autoConnect: true will work, but no. Also I thought, that data, stored in localStorage will be used by wagmi and web3auth to restore connection.

In reality, every time when I refresh the page, it loses the session and I have to reconnect manually. Please, help me to understand how to make it work

  • SDK Version: @web3auth/modal@^4.2.3; @web3auth/web3auth-wagmi-connector@^2.1.1; wagmi@^0.10.15
  • Platform: Browser Google Chrome. User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
import { createClient, configureChains } from "wagmi";
import * as wagmiChains from "wagmi/chains";
import { InjectedConnector } from "wagmi/connectors/injected";
import { jsonRpcProvider } from "@wagmi/core/providers/jsonRpc";
import { Web3Auth } from "@web3auth/modal";
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";

export function createWagmiClient() {
  const nodeUri = process.env.NEXT_PUBLIC_NODE_URI;

  if (!nodeUri) {
    throw new Error("process.env.NEXT_PUBLIC_NODE_URI is undefined");
  }

  const { chains, provider } = configureChains(
    [wagmiChains.goerli, wagmiChains.localhost],
    [
      jsonRpcProvider({
        rpc: () => ({
          http: nodeUri,
        }),
      }),
    ]
  );

  const web3authClientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID;
  if (!web3authClientId)
    throw new Error("process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID is undefined");

  // Instantiating Web3Auth
  const web3AuthInstance = new Web3Auth({
    clientId: web3authClientId,
    web3AuthNetwork: "testnet",
    chainConfig: {
      chainNamespace: "eip155",
      chainId: "0x" + chains[0].id.toString(16),
      rpcTarget: nodeUri,
    },
  });

  const wagmiClient = createClient({
    autoConnect: true,
    connectors: [
      new Web3AuthConnector({
        chains,
        options: {
          web3AuthInstance,
        },
      }),
      new InjectedConnector({
        chains,
      }),
    ],
    provider,
  });

  return wagmiClient;
}
2

Same problem, is there any solution?

3

Here is the solution that solved my problem:

import { ReactNode, useEffect } from "react";
import { useAccount, useConnect } from "wagmi";

export const EagerConnectionWrapper = ({
  children,
}: {
  children: ReactNode;
}) => {
  const { connect, connectors, pendingConnector } = useConnect();
  const { isDisconnected } = useAccount();

  useEffect(() => {
    if (!isDisconnected) return;

    // if wagmi.connected set to true, then wagmi will not show modal
    // to reconnect user wallet, but instead will use prev connection
    // I found this example in this public repo: https://github.com/sumicet/web3auth-modal-wagmi
    const wagmiConnected = localStorage.getItem("wagmi.connected");
    const isWagmiConnected = wagmiConnected
      ? JSON.parse(wagmiConnected)
      : false;

    if (!isWagmiConnected) return;
    connect({ connector: connectors[0] });
  }, [connect, connectors]);

  return <>{children}</>;
};

In the project root wrap your code in that component

const App = () => {
  return (
    <WagmiConfig client={wagmiClient}>
      <EagerConnectionWrapper>
        { /* your code */ }
      </EagerConnectionWrapper>
    </WagmiConfig>
  );
};
1 Like