Web3auth auto-connect feature on page refresh?

Help - Plug n Play PnP Web SDKs
1

I am seeking information about a specific feature on Web3Auth, similar to the ‘auto-connect’ function available on Rainbowkit. My website currently has an issue where users are logged out each time they refresh the page, requiring them to log in again.

As a temporary solution, I have implemented a useEffect hook to automatically trigger the login process upon page load.

However, this approach results in a brief popup displaying a message like ‘Connecting to…’ (I don’t recall the exact wording) every time the page is refreshed.

Although the popup closes automatically after a successful login, and the session is effectively stored, the recurring popup is a source of frustration. I’m interested in knowing if Web3Auth offers a feature to streamline this process, preventing the popup from appearing on each refresh.

 useEffect(() => {
    try {
      if (web3auth.status !== 'connected') {
        console.log(web3auth.status);
        login();
      }
    } catch (error) {
      setLoggedIn(false);
    }
  }, [web3auth]);

  const login = async () => {
    try {
      console.log('Attempting to login...');
      const connectResponse = await web3auth.connect();
      const user = await web3auth.getUserInfo();
      setProvider(web3auth.provider);
      const rpc = new RPC(web3auth.provider);
      const address = await rpc.getAccounts();
      setUser({
        ...user,
        address: address,
      });
      setLoggedIn(true);
      const userRef = collection(db, 'referrals');
      const q = query(userRef, where('userAddress', '==', address));
      const querySnapshot = await getDocs(q);
      if (querySnapshot.empty) {
        setShowReferralModal(true);
      }
    } catch (error) {
      console.error('Login failed:', error);
    }
  };
2

@pietro.ciattaglia Thanks for your recent post.

Please try our updated example . Additionally, could you kindly share the result you get when using web3auth.provider upon reloading the page?

You can also have a look at this thread Keep web3auth session persistent after page refresh using Wagmi Connector.

3

this is my current code:

useEffect(() => {
    const initWeb3Auth = async () => {
      const web3AuthInstance = new Web3Auth({
        web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
        clientId:
          'BGIx.......6x1k', // Get your Client ID from the Web3Auth Dashboard
        chainConfig: {
          chainNamespace: CHAIN_NAMESPACES.EIP155,
          chainId: '0x61',
          rpcTarget:
            'https://...et.quiknode.pro/c....3/',
        },
        modalZIndex: '99998',
      });
      const openloginAdapter = new OpenloginAdapter({
        loginSettings: {
          mfaLevel: 'optional',
        },
        adapterSettings: {
          uxMode: 'redirect', // "redirect" | "popup"
          whiteLabel: {
            logoLight: 'https://web3auth.io/images/web3auth-logo.svg',
            logoDark: 'https://web3auth.io/images/web3auth-logo---Dark.svg',
            defaultLanguage: 'en', // en, de, ja, ko, zh, es, fr, pt, nl
            mode: 'dark', // whether to enable dark, light or auto mode. defaultValue: auto [ system theme]
          },
          mfaSettings: {
            deviceShareFactor: {
              enable: true,
              priority: 1,
              mandatory: true,
            },
            backUpShareFactor: {
              enable: true,
              priority: 2,
              mandatory: false,
            },
            socialBackupFactor: {
              enable: true,
              priority: 3,
              mandatory: false,
            },
            passwordFactor: {
              enable: true,
              priority: 4,
              mandatory: false,
            },
          },
        },
      });
      web3AuthInstance.configureAdapter(openloginAdapter);
      setWeb3Auth(web3AuthInstance);
      await web3AuthInstance.initModal();
      setProvider(web3AuthInstance.provider);
    };
    initWeb3Auth();
  }, []);

  useEffect(() => {
    try {
      if (web3auth.status !== 'connected') {
        console.log(web3auth.status);
        login();
      }
    } catch (error) {
      setLoggedIn(false);
    }
  }, [web3auth]);

  const login = async () => {
    try {
      console.log('Attempting to login...');
      const connectResponse = await web3auth.connect();
      const user = await web3auth.getUserInfo();
      setProvider(web3auth.provider);
      const rpc = new RPC(web3auth.provider);
      const address = await rpc.getAccounts();
      setUser({
        ...user,
        address: address,
      });
      setLoggedIn(true);
      const userRef = collection(db, 'referrals');
      const q = query(userRef, where('userAddress', '==', address));
      const querySnapshot = await getDocs(q);
      if (querySnapshot.empty) {
        setShowReferralModal(true);
      }
    } catch (error) {
      console.error('Login failed:', error);
    }
  };