When asking for help in this category, please make sure to provide the following details:
- SDK Version(package.json): ^9.4.5
- Platform: Vue3
- Browser Console Screenshots:
I’m trying to use Wallet Services with web3auth’s no-modal, but I’m encountering this error. I’m not sure what’s causing the issue or how to fix it.
<script setup lang="ts">
import { onMounted } from 'vue';
import { Web3AuthNoModal as Web3Auth } from '@web3auth/no-modal';
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
import {
ADAPTER_EVENTS,
UX_MODE,
WALLET_ADAPTERS,
WEB3AUTH_NETWORK,
CHAIN_NAMESPACES,
} from '@web3auth/base';
import { AuthAdapter } from '@web3auth/auth-adapter';
import { WalletServicesPlugin } from '@web3auth/wallet-services-plugin';
import { logger } from '@/utils';
const { VITE_AUTH_WEB3AUTH_CLIENT_ID } = import.meta.env;
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0xaa36a7',
rpcTarget: 'https://sepolia.drpc.org',
// Avoid using public rpcTarget in production.
// Use services like Infura, Quicknode etc
displayName: 'Ethereum Sepolia Testnet',
blockExplorerUrl: 'https://sepolia.etherscan.io',
ticker: 'ETH',
tickerName: 'Ethereum',
logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
};
/**
* @description Web3Auth
*/
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
/**
* @description Web3Auth
*/
const web3auth = new Web3Auth({
clientId: VITE_AUTH_WEB3AUTH_CLIENT_ID,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
privateKeyProvider,
});
/**
* @description Wallet Services
*/
const walletServicesPlugin = new WalletServicesPlugin();
/**
* @description Web3Auth AuthAdapter
*/
function authAdapter(verifier: string) {
return new AuthAdapter({
adapterSettings: {
// POPUP은 버튼 클릭으로만 동작함.
// REDIRECT는 페이지 리다이렉션 후 동작함.
uxMode: UX_MODE.REDIRECT,
loginConfig: {
jwt: {
verifier,
typeOfLogin: 'jwt',
clientId: VITE_AUTH_WEB3AUTH_CLIENT_ID,
},
},
},
});
}
/**
* @description idToken 가져오기
*/
const getLocalIdToken = () => localStorage.getItem('idToken');
/**
* @description provider 가져오기
*/
const getLocalProvider = () => localStorage.getItem('provider');
/**
* @description Web3Auth 초기화
* @param {string} verifier
* - web3auth > Project > Custom Authentication > Verifier
* - omc-google, omc-facebook, omc-kakao
*/
async function init(verifier: string) {
logger.log('web3auth init');
if (web3auth.connected) {
logger.log('web3auth already initialized');
return web3auth.connected;
}
web3auth.configureAdapter(authAdapter(verifier));
web3auth.addPlugin(walletServicesPlugin);
web3auth.on(ADAPTER_EVENTS.CONNECTED, () => {
logger.log('web3auth connected');
});
await web3auth.init();
logger.log('web3auth init done', web3auth.connected);
return web3auth.connected;
}
/**
* @description Web3Auth 로그인
*/
async function login() {
logger.log('web3auth login');
if (web3auth === null) {
logger.log('web3auth not initialized yet');
return;
}
if (web3auth.connected) {
logger.log('web3auth already connected');
return web3auth.provider;
}
const idToken = getLocalIdToken();
const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
loginProvider: 'jwt',
extraLoginOptions: {
id_token: idToken,
verifierIdField: 'email',
domain: 'https://dev-auth.openmeta.city',
},
});
return web3authProvider;
}
onMounted(async () => {
const provider = getLocalProvider();
const loggedIn = await init(provider as string);
console.log('loggedIn:', loggedIn);
const loggedInProvider = await login();
console.log('loggedInProvider:', loggedInProvider);
});
</script>
<template>
<div>
<h1>Test</h1>
<button
type="button"
@click="() => walletServicesPlugin.showWalletUi({ show: true })"
>
Show Wallet UI
</button>
</div>
</template>
<style lang="scss" scoped></style>