[Archive] WalletLoginError: Failed to connect with wallet. Already connected

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by oldbin2022 on 9/14/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.


  • SDK Version:
"@web3auth/base": "^7.0.1",
"@web3auth/metamask-adapter": "^7.0.1",
"@web3auth/no-modal": "^7.0.1",
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";
import { MetamaskAdapter } from "@web3auth/metamask-adapter";

const App = () => {

 const web3authRef = useRef(null)

const [provider, setProvider] = useState(null)
useEffect(() => {
const fn = async () => {
try {
//Initialize within your constructor
const clientId = “xxxxxx-xxxxx-xxxxx-xxxxxxxx”
const options = {
clientId, // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: “cyan”,

      chainConfig: {
        chainNamespace: CHAIN_NAMESPACES.EIP155,
        chainId: "0x1",
        rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
      },
    }
    const web3auth = new Web3AuthNoModal(options);
    const metamaskAdapter = new MetamaskAdapter({
      ...options,
      sessionTime: 3600,
      redirectUrl: "http://localhost:5173/login",
    });
    web3auth.configureAdapter(metamaskAdapter);
    web3authRef.current = web3auth
    console.log('web3auth', web3auth)
    await web3auth.init();
    if (web3auth.provider) {
      setProvider(web3auth.provider);
    };
  } catch (error) {
    console.log('web3auth error', error)
  }
}
fn()

}, )
const web3AuthLogin = async () => {
if (!web3authRef.current) {
return;
}
const web3authProvider = await web3authRef.current.connectTo(WALLET_ADAPTERS.METAMASK, {
mfaLevel: “default”, // Pass on the mfa level of your choice: default, optional, mandatory, none
loginProvider: “google”, // Pass on the login provider of your choice: google, facebook, discord, twitch, twitter, github, linkedin, apple, etc.
});
setProvider(web3authProvider);
}

return (
<div onClick={web3AuthLogin}><strong>Login</strong></div>
)
}

Are you using Custom Auth or setup only Google login?

Please take a look at our examples here

The examples help me a lot. All my problems are solved, tks.