Web3auth.connected is false even after login

[bsrinath4839]

import { web3AuthChainConfig, web3AuthCliedId } from "@root/constants";
import { AuthAdapter } from "@web3auth/auth-adapter";
import { ADAPTER_EVENTS, UX_MODE, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { Web3AuthNoModal as Web3Auth } from "@web3auth/no-modal";
import { useCallback, useEffect, useState } from "react";

const useWeb3Auth = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [provider, setProvider] = useState(null);
  const [web3auth, setWeb3auth] = useState(null);
  console.log("==>", loggedIn, web3auth, provider);

  useEffect(() => {
    const initiate = async () => {
      try {
        const privateKeyProvider = new CommonPrivateKeyProvider({
          config: { chainConfig: web3AuthChainConfig },
        });

        const web3auth = new Web3Auth({
          clientId: web3AuthCliedId,
          privateKeyProvider,
          web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
        });

        const authAdapter = new AuthAdapter({
          adapterSettings: {
            uxMode: UX_MODE.REDIRECT,
          },
        });

        web3auth.configureAdapter(authAdapter);

        setWeb3auth(web3auth);

        await web3auth.init();
        setProvider(web3auth.provider);
        web3auth.on(ADAPTER_EVENTS.CONNECTED, () => {
          console.log("### web3auth connected");
        });
        web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {
          console.log("### web3auth disconnected");
        });
        web3auth.on(ADAPTER_EVENTS.CONNECTING, () => {
          console.log("### web3auth connecting");
        });
        web3auth.on(ADAPTER_EVENTS.ERRORED, (error) => {
          console.error("### web3auth error", error);
        });

        if (web3auth.connected) {
          setLoggedIn(true);
        }

      } catch (e) {
        console.log("Error during Web3Auth initialization", e);
      }
    };

    initiate();
  }, []);


  const login = useCallback(async () => {
    if (!web3auth) {
      return;
    }

    const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
      loginProvider: "google",
    });

    console.log("web3authProvider", web3authProvider);
    setProvider(web3authProvider);
  }, [web3auth]);

  return { loggedIn, login };
};

export default useWeb3Auth;

The SS is what showing in localStorage

[w3abot]

Hi Srinath! Thank you for sharing your issue with us. From your message, I see that you’re facing a problem where web3auth.connected remains false even after logging in.

Here are the details I’ve gathered for the support team:

• SDK Details: Plug n Play
• Issue: web3auth.connected is false even after login.
• Code Snippet:
  • Initialization and login logic provided in the code snippet.
• Browser Console Screenshot: Included in your message.

To help pinpoint the issue, could you please confirm the following:

1. SDK Version Number: Could you share the version of the Web3Auth SDK you are using?
2. Platform: Are you working on a specific platform (e.g., web, mobile)?
3. Custom Authentication: Is this issue related to the Google login provider you mentioned?

If you have any relevant link or images that could provide further context, please share those too!

Once I have these additional details, we can help you quicker! Thank you for your patience!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

[bsrinath4839]

when I put below code the issue is happening.

const authAdapter = new AuthAdapter({
          adapterSettings: {
            uxMode: UX_MODE.REDIRECT,
        },
});

when comment

      adapterSettings: {
            uxMode: UX_MODE.REDIRECT,
        },

The login opening in new Window and successfully logged in

These are the versions

    "@web3auth/auth-adapter": "^9.4.0",
    "@web3auth/base": "^9.4.0",
    "@web3auth/base-provider": "^9.4.0",
    "@web3auth/no-modal": "^9.4.0",

[Ayush]

I think it’s most likely the way you are handling the redirect, and initialising the Web3Auth. When you comment the UX Mode redirect, it uses the popup mode to login. when you use the redirect mode, it basically redirects you to a new page, and redirects back to the app after the OAuth flow is completed. Since, you are being again redirected back to the app, it’ll call the useEffect again, and by the time you check web3auth.connect, it’s not yet connected.

Also, you should avoid creating the Web3Auth instance, and AuthAdapter inside the useEffect, you should only call the web3Auth.init inside the useEffect.

Please checkout the quick start for reference code from the example. web3auth-pnp-examples/web-no-modal-sdk/quick-starts/react-no-modal-quick-start/src/App.tsx at main · Web3Auth/web3auth-pnp-examples · GitHub

Also, instead of checking web3auth.conected , you can use setLoggedIn inside the event, that’s the best practice I would recommend.

web3auth.on(ADAPTER_EVENTS.CONNECTED, () => {
     console.log("### web3auth connected");
     setLoggedIn(true)
});