[Archive] Web3auth auto-connect feature on page refresh?

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by pietro.ciattaglia on 12/5/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

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);

}

};