in v9.x I used to use @web3auth-nomodal
Then I used to do this
import { Web3AuthNoModal as Web3Auth } from "@web3auth/no-modal";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { web3AuthChainConfig, web3AuthCliedId } from "./constants";
import { ADAPTER_EVENTS, WEB3AUTH_NETWORK } from "@web3auth/base";
import { AuthAdapter } from "@web3auth/auth-adapter";
import { KEPLR_CONNECTED, KEPLR_CONNECTING, KEPLR_DISCONNECTED, KEPLR_ERRORED } from "./events.keplr";
export const initWeb3Auth = async ({
handleKeplrConnected = ()=> { },
handleKeplrConnecting = ()=> { },
handleKeplrDisconnected = ()=> { },
handleKeplrErrorred = ()=> { },
handleWeb3AuthConnected = ()=> { },
handleWeb3AuthConnecting = ()=> { },
handleWeb3AuthDisconnected = ()=> { },
handleWeb3AuthErrored = ()=> { },
}) => {
try {
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig: web3AuthChainConfig },
});
window.web3auth = new Web3Auth({
clientId: web3AuthCliedId,
privateKeyProvider,
uiConfig: {
appName: "Sentinel AI",
logoDark: `${window.location.origin}/logo512.svg`,
logoLight: `${window.location.origin}/logo512.svg`,
mode: "auto",
useLogoLoader: true,
},
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
});
const authAdapter = new AuthAdapter({
adapterSettings: {},
loginSettings: { mfaLevel: "optional" },
});
window.web3auth.configureAdapter(authAdapter);
await window.web3auth.init();
window.web3auth.on(ADAPTER_EVENTS.CONNECTING, handleWeb3AuthConnecting);
window.web3auth.on(ADAPTER_EVENTS.CONNECTED, handleWeb3AuthConnected);
window.web3auth.on(ADAPTER_EVENTS.DISCONNECTED, handleWeb3AuthDisconnected);
window.web3auth.on(ADAPTER_EVENTS.ERRORED, handleWeb3AuthErrored);
window.addEventListener(KEPLR_CONNECTED, handleKeplrConnected);
window.addEventListener(KEPLR_DISCONNECTED, handleKeplrDisconnected);
window.addEventListener(KEPLR_CONNECTING, handleKeplrConnecting);
window.addEventListener(KEPLR_ERRORED, handleKeplrErrorred);
return true;
} catch (e) {
console.log("::ERROR::", e);
return false;
}
};
import { WALLET_ADAPTERS } from "@web3auth/base";
import { KEPLER_WEBSITE_LINK, chainID } from "./constants";
import { keplrConnectedEvent, keplrConnectingEvent, keplrDisconnectedEvent, keplrErroredEvent } from "./events.keplr";
import accountServices from "@services/account.services";
export const loginWithKeplr = async () => {
try {
if (!window.keplr) {
window.open(KEPLER_WEBSITE_LINK);
return;
}
await logout();
window.dispatchEvent(keplrConnectingEvent());
const { nonce = "" } = await accountServices.fetchNonce();
const details = await window.keplr.getKey(chainID);
const { bech32Address: address = "" } = details;
window.dispatchEvent(keplrConnectedEvent({ address, chainID, nonce }));
} catch (error) {
window.dispatchEvent(keplrErroredEvent({ error }));
}
};
export const loginWithEmail = async (email) => {
try {
if (!window.web3auth) {
return;
}
await logout();
await window.web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
extraLoginOptions: { login_hint: email },
loginProvider: "email_passwordless",
});
} catch (e) {
console.log("ERROR_loginWithGoogle", e);
}
};
export const loginWithGoogle = async () => {
try {
if (!window.web3auth) {
return;
}
await logout();
await window.web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
loginProvider: "google",
});
} catch (e) {
console.log("ERROR_loginWithGoogle", e);
}
};
export const logout = async () => {
console.log("LOGOUT CALLED", window.web3auth.connected);
try {
if (window.keplr) {
await window.keplr.disable();
window.dispatchEvent(keplrDisconnectedEvent());
}
if (window.web3auth && window.web3auth.connected) {
await window.web3auth.logout();
}
} catch (e) {
console.log(e);
}
};
If you see, I handled keplr with window.keplr based on user extension availablity. fetched nonce from backend and verified there.
But, after updating to v10.x-> I am unable to connect the AuthAdapter as configureAdapter is not there in Web3AuthNoModal.
When I add Cosmos Chain to my Chains & Networks, Keplr is showing, but my Chain is not showing in Connect of Keplr, some other chains are showing, which I didn’t select anywhere
Also, I want not to show MetaMask anywhere in my app
I would be using this UI for login
