Keeping web3auth connection alive after Page Refresh

Help - Core-Kit Single Factor Auth Web SDK
1

I did a login test on the demo site specified in Web3Auth-SFA-Read

When I try to refresh, the login session doesn’t seem to persist. (In Plug and Play, the login session was maintained when refreshing)

Do I need to add any other code of my own to keep it refreshed?

Please provide the following details too when asking for help in this category:

  • SDK Version: SFA v6.4.1
  • Verifier Details:
    • Verifier Name:
    • JWKS Endpoint:
    • Sample idToken(JWT)
2

Hey @bjkim

Session Management does exist in all our SFA SDKs. It works very similarly to how PnP SDKs handle session management. You can install the latest version of the SDK to experience it.

Thanks for pointing out the demo. It was not updated with the latest SDK, we’re in the process of doing that. We’ll make sure it is up to date as soon as possible.

3

SFA Demo code Link

I updated the library to the latest in the demo code and tested it.

It still doesn’t seem to keep the session after refreshing.

  • get ethProvider → refresh → ethProvider is null

ISSUE VIDEO LINK

Do I need to add any other settings???

// package.json
"@web3auth/base": "^6.1.4",
"@web3auth/ethereum-provider": "^6.1.5",
"@web3auth/single-factor-auth": "^6.4.1",
4

This example code has to be rewritten properly. We’ll make sure to do that. Basically calling the init function in useEffect (constructor) will the key here.
Session Management kicks in once init function is called.

5

Will the existing demo code and configuration change a lot?

After switching from PNP to SFA in my project, the session is not maintained.

useEffect(() => {
   async function init() {
      try {
          setIsLoading(true);
          const web3authSfa = new Web3Auth({
             clientId,
             web3AuthNetwork: 'testnet',
             usePnPKey: true,
          });

          const privateKeyProvider = new EthereumPrivateKeyProvider({
             config: { chainConfig: CHAIN_CONFIG[CHAIN_ENV] },
          });
          await web3authSfa.init(privateKeyProvider);
          setWeb3authSFAuth(web3authSfa);
       } catch (error) {
          console.error(error);
       } finally {
          setIsLoading(false);
       }
   }
   init();
}, []);

I made the code similar to PNP No modal, but does the code change a lot here?

And… Is there some other example code I can refer to somewhere?

6

Any update? It is still not working.

7

Can I save the provider here to maintain the session? It seems to work fine when I refresh.

useEffect(() => {
   async function init() {
      try {
          setIsLoading(true);
          const web3authSfa = new Web3Auth({
             clientId,
             web3AuthNetwork: 'testnet',
             usePnPKey: true,
          });

          const privateKeyProvider = new EthereumPrivateKeyProvider({
             config: { chainConfig: CHAIN_CONFIG[CHAIN_ENV] },
          });
          await web3authSfa.init(privateKeyProvider);
          setWeb3authSFAuth(web3authSfa);
          // <-- added
          if (web3AuthInstance.sessionId && web3AuthInstance.provider) {
             setProvider(web3AuthInstance.provider);
           }
         // -->
       } catch (error) {
          console.error(error);
       } finally {
          setIsLoading(false);
       }
   }
   init();
}, []);
8

yes, you can save the provider after init if a session is there.
Also, we are working on updating the SFA examples to reflect session management

1 Like