[Archive] WalletLoginError: Failed to connect with wallet. Failed to login with openlogin

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by githubdiscussions on 2/16/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

Hello, I'm developing a little project with web3auth using jwt with firebase and I have problems with the login, please I need your help.
I got error WalletLoginError: Failed to connect with wallet. Failed to login with openlogin.
I thought that it could happened by the jwt configuration in the dashboard but it is ok.

`
export function Web3Auth({ children, web3Network, chain }: IWeb3AuthProps) {
const [web3Auth, setWeb3Auth] = useState<Web3AuthCore | null>(null);
const [firebaseApp, setfirebaseApp] = useState<FirebaseApp | undefined>(undefined);
const [user, setUser] = useState<unknown | null>(null);
const [provider, setProvider] = useState<IWalletProvider | null>(null);
const [isLoading, setIsLoading] = useState(false);

const setWalletProvider = useCallback(
(web3authProvider: SafeEventEmitterProvider) => {
const walletProvider = getWalletProvider(chain, web3authProvider);
setProvider(walletProvider);
},
[chain]
);

useEffect(() => {

const subscribeAuthEvents = (web3auth: Web3AuthCore) => {
// Can subscribe to all ADAPTER_EVENTS and LOGIN_MODAL_EVENTS
web3auth.on(ADAPTER_EVENTS.CONNECTED, (data: unknown) => {
console.log(“Yeah!, you are successfully logged in”, data);
setUser(data);
setWalletProvider(web3auth.provider!);
});

web3auth.on(ADAPTER_EVENTS.CONNECTING, () => {
console.log(“connecting”);
});

web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {
console.log(“disconnected”);
setUser(null);
});

web3auth.on(ADAPTER_EVENTS.ERRORED, (error: unknown) => {
console.error(“some error or user has cancelled login request”, error);
});
};

const currentChainConfig = CHAIN_CONFIG[chain];

async function init() {
try {
setIsLoading(true);

const web3AuthInstance = new Web3AuthCore({
  clientId: process.env.WEB3AUTH_CLIENT_ID ?? '',
  web3AuthNetwork: web3Network,
  chainConfig: currentChainConfig,
});

subscribeAuthEvents(web3AuthInstance);


const openloginAdapter = new OpenloginAdapter({

adapterSettings: {

uxMode: “popup”,

loginConfig: {

jwt: {

name: “verifier”,

verifier: “login-verifier”,

typeOfLogin: “jwt”,

clientId: process.env.WEB3AUTH_CLIENT_ID,

},

},

},

});


const networkUi = new NetworkSwitch()


const wcAdapter = new WalletConnectV1Adapter({

//adapterSettings: { bridge: “https://bridge.walletconnect.org”, },

adapterSettings: { qrcodeModal: QRCodeModal, networkSwitchModal: networkUi },

chainConfig: currentChainConfig,

sessionTime: 86400,

})


const metamaskAdapter = new MetamaskAdapter({

sessionTime: 3600, // 1 hour in seconds

chainConfig: currentChainConfig,

});


//web3AuthInstance.configureAdapter(wcAdapter);

//web3AuthInstance.configureAdapter(metamaskAdapter);

web3AuthInstance.configureAdapter(openloginAdapter);


await web3AuthInstance.init();


setWeb3Auth(web3AuthInstance);


const app = initializeApp({

apiKey: process.env.FIREBASE_API_KEY,

authDomain: process.env.FIREBASE_AUTH_DOMAIN,

projectId: process.env.FIREBASE_PROJECT_ID,

storageBucket: process.env.FIREBASE_STORAGE_BUCKET,

messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,

appId: process.env.FIREBASE_APP_ID,

measurementId: process.env.FIREBASE_MEASUREMENT_ID,

});


setfirebaseApp(app);

} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}

}

init();

}, [chain, setWalletProvider, setWalletProvider]);

const signInWithGoogle = async (): Promise => {
try {
const auth = getAuth(firebaseApp);
const googleProvider = new GoogleAuthProvider();
const res = await signInWithPopup(auth, googleProvider);
return res;

} catch (err) {
  console.error(err);
  throw err;
}

}

const signInWithFacebook = async (): Promise => {
try {

const auth = getAuth(firebaseApp);
const facebookProvider = new FacebookAuthProvider();
const res = await signInWithPopup(auth, facebookProvider);
return res;

} catch (err) {
console.error(err);
throw err;
}

}

const signInWithTwitter = async (): Promise => {
try {

const auth = getAuth(firebaseApp);
const twitterProvider = new TwitterAuthProvider();
const res = await signInWithPopup(auth, twitterProvider);
return res;

} catch (err) {
console.error(err);
throw err;
}

}

async function login(TypeLogin: LOGIN_PROVIDER_TYPE, email?: string, password?: string) {
try {
setIsLoading(true);
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}

http://localhost:3000", //"https://YOUR-APPLICATION-DOMAIN" ||
response_type: "token",
}
});

setWalletProvider(localProvider!);

} catch (error) {
console.log("error login with google");
console.log("error", error);
} finally {
setIsLoading(false);
}">

  let loginRes = undefined;


switch (TypeLogin) {

case “google”:

loginRes = await signInWithGoogle();

break;

case “facebook”:

loginRes = await signInWithFacebook();

break;

case “twitter”:

loginRes = await signInWithTwitter();

break;

default:

console.log(Sorry, incorrect type of login.);

}


const idToken = await loginRes?.user.getIdToken(true); // this idToken will be passed to web3auth


const localProvider = await web3Auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {

loginProvider: “jwt”,

extraLoginOptions: {

id_token: idToken,

verifierIdField: “sub”, // same as your JWT Verifier ID

domain: “http://localhost:3000”,  //“https://YOUR-APPLICATION-DOMAIN” ||

response_type: “token”,

}

});


setWalletProvider(localProvider!);


} catch (error) {

console.log(“error login with google”);

console.log(“error”, error);

} finally {

setIsLoading(false);

}

}

const loginWithWalletConnect = async () => {
try {
setIsLoading(true);
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}
const localProvider = await web3Auth.connectTo(WALLET_ADAPTERS.WALLET_CONNECT_V1, {});
setWalletProvider(localProvider!);
} catch (error) {
console.log("error", error);
} finally {
setIsLoading(false)
}
};

const loginWithMetamask = async () => {
try {
setIsLoading(true);
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}
console.log("web3auth initialized");
const localProvider = await web3Auth.connectTo(WALLET_ADAPTERS.METAMASK, {});
setWalletProvider(localProvider!);
} catch (error) {
console.log("error", error);
} finally {
setIsLoading(false)
}
};

const logout = async () => {
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}
await web3Auth.logout();
setProvider(null);
};

const getUserInfo = async () => {
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}
const user = await web3Auth.getUserInfo();
console.log(user);
};

const getAccounts = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
provider.getAccounts();
};

const getBalance = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
provider.getBalance();
};

const signMessage = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
provider.signMessage();
};

//init();

const contextProvider = {
web3Auth,
provider,
user,
isLoading,
login,
loginWithWalletConnect,
loginWithMetamask,
logout,
getUserInfo,
getAccounts,
getBalance,
signMessage,
};

return (
<>

</>

)
}`



Originally posted by: bolisteward

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/1329