[question][web3auth simple-app example] Keep context between page refresh

[bmarcot]

I need some assistance with my React application (based on https://github.com/alchemyplatform/aa-sdk/tree/main/examples/aa-simple-dapp). I have a React context that is initialized by clicking a button that calls login, which triggers the Web3Auth modal. However, since React context is not preserved between page refreshes, I need to click the login button again after a refresh to reinitialize the context.

I tried to replicate the login process in a useEffect hook, but I have to call signer.authenticate, which briefly shows and then immediately dismisses the modal. While this approach works, it doesn't provide a great user experience.

After refreshing the page, the Web3Auth session appears to persist since the modal doesn't appear. Is there a way to maintain the signer and smart account client/provider between page refreshes?

const [web3AuthSigner] = useState<Promise<Web3AuthSigner | null>>(() => createWeb3AuthSigner());
const [provider, setProvider] = useState<AlchemySmartAccountClient>();

const login = useCallback(async () => {
  const signer = await web3AuthSigner;

  // Authenticate the signer
  await signer.authenticate({
    init: async () => {
      await signer.inner.initModal();
    },
    connect: async () => {
      await signer.inner.connect();
    },
  });

  // Set the login state to true
  setIsLoggedIn(true);

  // Create and set the Alchemy Smart Account Client
  const alchemySmartAccountClient = await createLightAccountAlchemyClient({
    apiKey: "alch_key",
    chain: sepolia,
    signer,
    version: "v2.0.0", // Required if not v1.1.0
    gasManagerConfig: {
      policyId: "alch_policy",
    },
  });

  setProvider(alchemySmartAccountClient);
}, [web3AuthSigner]);

Calling the UserOp using the context provider:

const { provider, login } = useWalletContext();

const uoHash = await provider.sendUserOperation({
  uo: {
    target,
    data,
    value: 0n, // (Optional) value to send to the target contract address
  },
  account: provider.account!,
});

Thanks!

[bmarcot]

The Web3Auth.inner is apparently deleted or reinitialized on changing path, and Web3Auth.signer becomes undefined. How can I persist this object between path change?

[moldy530]

I'm not super familiar with how web3auth works, but you might be able to call this:

await signer.authenticate({
    init: async () => {
      await signer.inner.initModal();
    },
    connect: async () => {
      await signer.inner.connect();
    },
  });

in a useEffect hook so that it runs on page load. The main thing you'll want to do though is see if you can call signer.inner.connect() without popping open the modal in case the user is not connected.

So in that use effect you could call signer.authenticate conditionally if the session still exists. The trick is figuring out how to check if the session still exists

[moldy530]

That might be as simple as changing the signer.authenticate method in the useEffect to look like:

await signer.authenticate({
    init: async () => {
      await signer.inner.initModal();
    },
    connect: async () => {},
  });

[bmarcot]

Getting this error then: WalletLoginError: Wallet is not connected. No wallet is connected. Nevermind, I'll use Turnkey instead, hopefully Alchemy will add support for social logins soon.

[moldy530]

We're pretty close with adding social login support! will keep you posted