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

**URL:** <https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [January 29, 2024, 4:17am UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631 "2024-01-29T04:17:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![prinzuty](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@prinzuty](https://builder.metamask.io/u/prinzuty)\
**Post date:** [January 29, 2024, 4:17am UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631/1 "2024-01-29T04:17:09Z")

</div>

> **🏛 Archived Content from Web3Auth Community**
> 
> This topic was originally posted by **prinzuty** on 1/29/2024.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

When asking for help in this category, please make sure to provide the following details:

- SDK Version: 7.3.1
- Platform: Mac
- Browser Console Screenshots:

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

```auto
"use client";
// Web3AuthContext.tsx
import React, {createContext, useEffect, useState} from “react”;
import {Web3AuthNoModal} from “@web3auth/no-modal”;
import RPC from “../web3auth/web3RPC”;
import {EthereumPrivateKeyProvider} from “@web3auth/ethereum-provider”;
import {
CHAIN_NAMESPACES,
IProvider,
ADAPTER_EVENTS,
WALLET_ADAPTERS,
CONNECTED_EVENT_DATA,
ADAPTER_STATUS,
} from “@web3auth/base”;
import {OpenloginAdapter, OpenloginUserInfo} from “@web3auth/openlogin-adapter”;
// import {subscribeAuthEvents} from “../web3auth/Web3AuthHelpers”;
import {
getPolygonAddress,
getBnbAddress,
getSolanaAddress,
getTezosAddress,
getStarkExAddress,
getStarkNetAddress,
getPolkadotAddress,
getEthereumAddress,
} from “../web3auth/ChainProviders”;
import {error} from “console”;
interface Web3AuthContextType {
web3auth: Web3AuthNoModal | null;
login: () => Promise<void>;
logout: () => Promise<void>;
isLoading: boolean;
isLoggedIn: boolean;
user: Partial<OpenloginUserInfo> | null;
authenticateUser: () => Promise<void>;
sendTransaction: () => Promise<void>;
signMessage: () => Promise<void>;
userAccounts: {
polygon: string;
bnb: string;
solana: string;
tezos: string | undefined;
starkEx: string;
starkNet: string;
polkadot: string | undefined;
} | null;
}
const Web3AuthContext = createContext<Web3AuthContextType | undefined>(
undefined
);
interface Web3AuthProviderProps {
children: React.ReactNode;
}
export const Web3AuthProvider: React.FC<Web3AuthProviderProps> = ({
children,
}) => {
const [web3auth, setWeb3Auth] = useState<Web3AuthNoModal | null>(null);
const [provider, setProvider] = useState<IProvider | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
const [user, setUser] = useState<Partial<OpenloginUserInfo> | null>(null);
const [userAccounts, setUserAccounts] = useState<{
polygon: string;
bnb: string;
solana: string;
tezos: string | undefined;
starkEx: string;
starkNet: string;
polkadot: string | undefined;
} | null>(null);
useEffect(() => {
const init = async () => {
try {
const clientId =
client_id
    // ETH_Goerli
    const chainConfig = {
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      chainId: "0x1",
      rpcTarget: "https://rpc.ankr.com/eth",
      displayName: "Ethereum Mainnet",
      blockExplorer: "https://goerli.etherscan.io",
      ticker: "ETH",
      tickerName: "Ethereum",
    };

    const web3authInstance: Web3AuthNoModal = new Web3AuthNoModal({
      clientId,
      chainConfig,
      web3AuthNetwork: "sapphire_devnet",
    });

    const privateKeyProvider = new EthereumPrivateKeyProvider({
      config: {chainConfig},
    });

    const openloginAdapter = new OpenloginAdapter({
      privateKeyProvider: privateKeyProvider,
      loginSettings: {
        mfaLevel: "mandatory",
      },
      adapterSettings: {
        whiteLabel: {
          appName: "Your app Name",
          logoLight: "https://web3auth.io/images/web3auth-logo.svg",
          logoDark: "https://web3auth.io/images/web3auth-logo---Dark.svg",
          defaultLanguage: "en",
          mode: "auto", // "light" or "dark" or "auto"
        },
        loginConfig: {
          google: {
            name: "google",
            verifier: "google_auth",
            typeOfLogin: "google",
            clientId:
              "googleclient_id",
          },
        },
        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);

    await web3authInstance.init();
    subscribeAuthEvents(web3authInstance);

    setWeb3Auth(web3authInstance);
    setProvider(web3authInstance.provider);
  } catch (error) {
    console.error(error);
  }
};

init();

};

}, );
const handleLogin = async () => {
if (!web3auth) {
console.log(“web3auth not initialized yet”);
return;
}
try {
  setIsLoading(true);
  console.log(!!web3auth);
  console.log("before :", isLoading, isLoggedIn);

  if (web3auth.status !== ADAPTER_STATUS.CONNECTED) {
    await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
      loginProvider: "google",
    });
    setIsLoading(false);
    setIsLoggedIn(true);
    return;
  }

  const web3authProvider = await web3auth.connectTo(
    WALLET_ADAPTERS.OPENLOGIN,
    {
      loginProvider: "google",
    }
  );
  console.log("Logged in Successfully!");
  setIsLoading(false);
  setIsLoggedIn(true);
  setProvider(web3authProvider);
  const loggedInUser = await web3auth?.getUserInfo();
  setUser(loggedInUser);

  const accounts = await fetchUserAccounts(provider);
  setUserAccounts(accounts);

  console.log(isLoggedIn);
} catch (error) {
  console.log("error: ", error);
}

};
const handleLogout = async () => {
if (!web3auth) {
console.log(“web3auth not initialized yet”);
return;
}
await web3auth.logout();
setWeb3Auth(null);
setProvider(null);
setUser(null); // Clear user data on logout
setUserAccounts(null);
setIsLoading(false);
setIsLoggedIn(false);
};
const subscribeAuthEvents = (web3auth: Web3AuthNoModal): void => {
web3auth.on(ADAPTER_EVENTS.CONNECTED, (data: CONNECTED_EVENT_DATA) => {
console.log(“connected to wallet”, data);
// web3auth.provider will be available here after the user is connected
});
web3auth.on(ADAPTER_EVENTS.CONNECTING, () =&gt; {
  console.log("connecting");
});

web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () =&gt; {
  console.log("disconnected");
});

web3auth.on(ADAPTER_EVENTS.ERRORED, (error) =&gt; {
  console.log("error", error);
});

};
const fetchUserAccounts = async (provider: IProvider | null) => {
try {
const polygon = await getPolygonAddress(provider);
const bnb = await getBnbAddress(provider);
const solana = await getSolanaAddress(provider);
const tezos = await getTezosAddress(provider);
const starkEx = await getStarkExAddress(provider);
const starkNet = await getStarkNetAddress(provider);
const polkadot = await getPolkadotAddress(provider);
const ethereum = await getEthereumAddress(provider);
  return {
    polygon,
    bnb,
    solana,
    tezos,
    starkEx,
    starkNet,
    polkadot,
    ethereum,
  };
} catch (error) {
  console.error("Error fetching user accounts:", error);
  return null;
}

};
const authenticateUser = async () => {
try {
if (!web3auth) {
console.log(“web3auth not initialized yet”);
return;
}
  const idToken = await web3auth.authenticateUser();
  console.log(idToken);
} catch (error) {
  console.log("Authentication error: " + error);
}

};
const sendTransaction = async () => {
try {
if (!provider) {
console.log(“provider not initialized yet”);
return;
}
  const rpc = new RPC(provider);
  const receipt = await rpc.sendTransaction();
  console.log(receipt);
} catch (error) {
  console.log("Send Transaction error: " + error);
}

};
const signMessage = async () => {
try {
if (!provider) {
console.log(“provider not initialized yet”);
return;
}
  const rpc = new RPC(provider);
  const signedMessage = await rpc.signMessage();
  console.log(signedMessage);
} catch (error) {
  console.log("Sign Message error: " + error);
}

};
return (
<Web3AuthContext.Provider
value={{
web3auth,
login: handleLogin,
logout: handleLogout,
isLoading,
isLoggedIn,
user,
userAccounts,
authenticateUser,
sendTransaction,
signMessage,
}}
>
{children}
</Web3AuthContext.Provider>
);
};

```

I’m exporting this as a provider for use in another file with “useWeb3auth()” but for some reason the state for logging in is not updating accordingly and I’m getting a wallet already connected error, and when I logout and try to login again, I get a web3auth not initialized error

[![Screen Shot 2024-01-28 at 11.06.26 PM](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/d21c09ddd2994f8bb1138dfdd3fb0604e8c64ce8.png)
Screen Shot 2024-01-28 at 11.06.26 PM1721×318 92.4 KB
](https://web3auth.io/community/uploads/default/original/2X/0/01924df07ae5e8b0f1971e5d4ee4adbbc767f153.png "Screen Shot 2024-01-28 at 11.06.26 PM")

---

<div class="post-metadata">

**Author:** ![vjgee](https://avatars.discourse-cdn.com/v4/letter/v/b5e925/32.png) [@vjgee](https://builder.metamask.io/u/vjgee)\
**Post date:** [January 29, 2024, 4:37am UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631/2 "2024-01-29T04:37:46Z")

</div>

@prinzuty Welcome Aboard!

This error means that your initialization function is not properly executed.

Use the following in this order:

- Instantiate Web3Auth
- Instantiate Openlogin Adapter
- web3auth.configureAdapter(openloginAdapter);
- await web3auth.initModal();
- await web3auth.connect();

For the Web3Auth events, please ensure to call `init()` after registering the event handler as shown in the example below:

```
  <a href="https://github.com/snaka/nextjs-web3auth-example/commit/da0a302866eb20691319a7d1f36c57b1f45e065b" target="_blank" rel="noopener">github.com/snaka/nextjs-web3auth-example</a>

```

#### [Should call `init()` after registering the event handler](https://github.com/snaka/nextjs-web3auth-example/commit/da0a302866eb20691319a7d1f36c57b1f45e065b)

```
<div class="github-info">
  <div class="date">
    committed <span class="discourse-local-date" data-format="ll" data-date="2023-08-22" data-time="01:44:09" data-timezone="UTC">01:44AM - 22 Aug 23 UTC</span>
  </div>

  <div class="user">
    <a href="https://github.com/snaka" target="_blank" rel="noopener">
      <img alt="snaka" src="/community/community/uploads/default/original/2X/1/1e7ed40c3ae55d4e4001a067d91daee2a5afafaa.jpeg" class="onebox-avatar-inline" width="20" height="20" data-dominant-color="B3AFAE">
      snaka
    </a>
  </div>

  <div class="lines" title="changed 1 files with 1 additions and 1 deletions">
    <a href="https://github.com/snaka/nextjs-web3auth-example/commit/da0a302866eb20691319a7d1f36c57b1f45e065b" target="_blank" rel="noopener">
      <span class="added">+1</span>
      <span class="removed">-1</span>
    </a>
  </div>
</div>

```

---

<div class="post-metadata">

**Author:** ![prinzuty](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@prinzuty](https://builder.metamask.io/u/prinzuty)\
**Post date:** [January 29, 2024, 7:39am UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631/3 "2024-01-29T07:39:39Z")

</div>

Hi vjgee, i’m using the NoModal and when I try to use web3auth.connect in my login function, its not an option, I only get connectTo

this is my instantiation

```auto
  useEffect(() => {
    const init = async () => {
      try {
        const clientId =
          "client_id"
        // ETH_Goerli
        const chainConfig = {
          chainNamespace: CHAIN_NAMESPACES.EIP155,
          chainId: "0x1",
          rpcTarget: "https://rpc.ankr.com/eth",
          displayName: "Ethereum Mainnet",
          blockExplorer: "https://goerli.etherscan.io",
          ticker: "ETH",
          tickerName: "Ethereum",
        };
    const web3authInstance: Web3AuthNoModal = new Web3AuthNoModal({
      clientId,
      chainConfig,
      web3AuthNetwork: "sapphire_devnet",
    });

    const privateKeyProvider = new EthereumPrivateKeyProvider({
      config: {chainConfig},
    });

    const openloginAdapter = new OpenloginAdapter({
      privateKeyProvider: privateKeyProvider,
      loginSettings: {
        mfaLevel: "mandatory",
      },
      adapterSettings: {
        whiteLabel: {
          appName: "Your app Name",
          logoLight: "https://web3auth.io/images/web3auth-logo.svg",
          logoDark: "https://web3auth.io/images/web3auth-logo---Dark.svg",
          defaultLanguage: "en",
          mode: "auto", // "light" or "dark" or "auto"
        },
        loginConfig: {
          google: {
            name: "google",
            verifier: "google_auth",
            typeOfLogin: "google",
            clientId:
              "myId"
          },
        },
        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);

    await web3authInstance.init();
    subscribeAuthEvents(web3authInstance);

    setWeb3Auth(web3authInstance);
    setProvider(web3authInstance.provider);
  } catch (error) {
    console.error(error);
  }
};

init();

```

and I connect it here

```auto
const handleLogin = async () => {
    if (!web3auth) {
      console.log("web3auth not initialized yet");
      return;
    }
try {
  setIsLoading(true);
  console.log(!!web3auth);
  console.log("before :", isLoading, isLoggedIn);

  const web3authProvider = await web3auth.connectTo(
    WALLET_ADAPTERS.OPENLOGIN,
    {
      loginProvider: "google",
    }
  );
  console.log("Logged in Successfully!");
  setIsLoading(false);
  setIsLoggedIn(true);
  setProvider(web3authProvider);
  const loggedInUser = await web3auth?.getUserInfo();
  setUser(loggedInUser);

  const accounts = await fetchUserAccounts(provider);
  setUserAccounts(accounts);

  console.log(isLoggedIn);
} catch (error) {
  console.log("error: ", error);
}

```

---

<div class="post-metadata">

**Author:** ![prinzuty](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@prinzuty](https://builder.metamask.io/u/prinzuty)\
**Post date:** [January 29, 2024, 8:52am UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631/4 "2024-01-29T08:52:31Z")

</div>

okay I believe I’ve figured out the login issue, but now when I try to get all of the user’s accounts with fetchUserAccounts(provider) I get undefined, but I have set the provider useState during initialization

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [January 29, 2024, 9:10am UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631/5 "2024-01-29T09:10:31Z")

</div>

Hey @prinzuty,  
I hope you are ensuring to use the keyword await while fetching the user accounts, since this is an asynchronous line of code.  
If you are, then please share the method fetchUserAccounts that accepts a provider to return user accounts.

---

<div class="post-metadata">

**Author:** ![prinzuty](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@prinzuty](https://builder.metamask.io/u/prinzuty)\
**Post date:** [January 29, 2024, 4:49pm UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631/6 "2024-01-29T16:49:42Z")

</div>

Hi @maharshi, yes I’m using the await,

```auto
const accounts = await fetchUserAccounts(web3auth.provider);
        setUserAccounts(accounts);

```

and this is the function

```auto
const fetchUserAccounts = async (provider: IProvider | null) => {
    try {
      const polygon = await getPolygonAddress(provider);
      const bnb = await getBnbAddress(provider);
      const solana = await getSolanaAddress(provider);
      const tezos = await getTezosAddress(provider);
      const starkEx = await getStarkExAddress(provider);
      const starkNet = await getStarkNetAddress(provider);
      const polkadot = await getPolkadotAddress(provider);
      const ethereum = await getEthereumAddress(provider);
  return {
    polygon,
    bnb,
    solana,
    tezos,
    starkEx,
    starkNet,
    polkadot,
    ethereum,
  };
} catch (error) {
  console.error("Error fetching user accounts:", error);
  return null;
}

```

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [January 30, 2024, 3:20am UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631/7 "2024-01-30T03:20:20Z")

</div>

Hey @prinzuty  
Thanks for the code snippet. I see no reason why you should get undefined. By any chance, have you pushed this code to some repo that you could share so that I can try it out on my local?

---

<div class="post-metadata">

**Author:** ![prinzuty](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@prinzuty](https://builder.metamask.io/u/prinzuty)\
**Post date:** [January 31, 2024, 8:37am UTC](https://builder.metamask.io/t/archive-error-walletloginerror-failed-to-connect-with-wallet-already-connected/1631/8 "2024-01-31T08:37:50Z")

</div>

Okay so I found the issue while looking at another post, apparently, web3auth still doesn’t work well with web3 version 4.0 and up. You have to downgrade to 1.8 or below.

> [@I can't understand why am getting: ProviderError:Provider does not have a request or send method to use](https://web3auth.io/community/t/i-cant-understand-why-am-getting-providererror-provider-does-not-have-a-request-or-send-method-to-use/4905/7):
>
> Yes, please downgrade it to 1.8 and it’ll work fine. @zkPlaty

Nonetheless, I ran into another issue, how come if you store clientIDs in a .env file, web3auth cannot read it? Thanks!