SDK Version: 5.1.1
<template>
<button class="btn" v-if="!loggedin" @click="login">sign in/up</button>
<button class="btn" v-if="loggedin" @click="logout">sign out</button>
</template>
<script>
import { onMounted, ref } from 'vue'
import { Web3Auth } from '@web3auth/modal'
import { OpenloginAdapter } from '@web3auth/openlogin-adapter'
import { MetamaskAdapter } from '@web3auth/metamask-adapter'
import { TorusWalletConnectorPlugin } from '@web3auth/torus-wallet-connector-plugin'
import { WalletConnectV2Adapter } from '@web3auth/wallet-connect-v2-adapter'
import { LOGIN_MODAL_EVENTS } from '@web3auth/ui'
import { WALLET_ADAPTERS, ADAPTER_EVENTS, CHAIN_NAMESPACES } from '@web3auth/base'
export default {
name: 'AuthBtn',
setup() {
const clientId = 'BCmhITuqGakZw6AwpGlbNTnrmamBmBeF_Ee0FZtagupe8V1b1gjB5fQ2ONgRYoPYzr4WgU6szZ7aK0NTIjJq8vc'
const loading = ref(false)
const loggedin = ref(false)
const loginButtonStatus = ref('')
const connecting = ref(false)
let provider = ref(false)
const subscribeAuthEvents = (web3auth) => {
// emitted when modal visibility changes.
web3auth.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, (isVisible) => {
console.log('is modal visible', isVisible)
})
web3auth.on(ADAPTER_EVENTS.CONNECTING, () => {
console.log('connecting')
})
web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {
console.log('disconnected')
})
web3auth.on(ADAPTER_EVENTS.ERRORED, (error) => {
console.log('error', error)
})
web3auth.on(ADAPTER_EVENTS.ERRORED, (error) => {
console.log('error', error)
})
}
const web3auth = new Web3Auth({
authMode: 'DAPP',
clientId,
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
},
uiConfig: {
appLogo: 'https://community/images.web3auth.io/web3auth-logo-w.svg',
theme: 'dark',
defaultLanguage: 'en',
loginMethodsOrder: ['google'],
},
web3AuthNetwork: 'testnet',
})
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
network: 'cyan',
uxMode: 'popup',
whiteLabel: {
name: 'Cryptolot',
logoLight: 'https://web3auth.io/community/images/w3a-L-Favicon-1.svg',
logoDark: 'https://web3auth.io/community/images/w3a-D-Favicon-1.svg',
defaultLanguage: 'en',
dark: true, // whether to enable dark mode. defaultValue: false
},
loginConfig: {
// Add login configs corresponding to the providers on modal
// Google login
google: {
verifier: 'YOUR_GOOGLE_VERIFIER_NAME', // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: 'google', // Pass on the login provider of the verifier you've created
clientId: 'GOOGLE_CLIENT_ID.apps.googleusercontent.com', // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID
},
},
},
loginSettings: {
mfaLevel: 'mandatory',
},
})
web3auth.configureAdapter(openloginAdapter)
const torusPlugin = new TorusWalletConnectorPlugin({
torusWalletOpts: {},
walletInitOptions: {
whiteLabel: {
theme: { isDark: true, colors: { primary: '#00a8ff' } },
logoDark: 'https://web3auth.io/community/images/w3a-L-Favicon-1.svg',
logoLight: 'https://web3auth.io/community/images/w3a-D-Favicon-1.svg',
},
useWalletConnect: true,
enableLogging: true,
},
})
const walletConnectV2Adapter = new WalletConnectV2Adapter({
adapterSettings: {
bridge: 'https://bridge.walletconnect.org',
},
clientId,
})
web3auth.configureAdapter(walletConnectV2Adapter)
const metamaskAdapter = new MetamaskAdapter({
clientId,
sessionTime: 3600, // 1 hour in seconds
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
},
})
metamaskAdapter.setAdapterSettings({
sessionTime: 86400, // 1 day in seconds
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0x89',
rpcTarget: 'https://rpc-mainnet.matic.network', // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
})
web3auth.configureAdapter(metamaskAdapter)
onMounted(async () => {
try {
loading.value = true
loggedin.value = false
subscribeAuthEvents(web3auth)
await web3auth.addPlugin(torusPlugin)
await web3auth.initModal()
if (web3auth.provider) {
// eslint-disable-next-line vue/no-ref-as-operand
provider = web3auth.provider
loggedin.value = true
}
} catch (error) {
console.log('error', error)
} finally {
loading.value = false
}
})
const login = async () => {
if (!web3auth) {
return
}
// eslint-disable-next-line vue/no-ref-as-operand
provider = await web3auth.connect()
loggedin.value = true
console.log('Logged in Successfully!')
}
const logout = async () => {
if (!web3auth) {
return
}
await web3auth.logout()
// eslint-disable-next-line vue/no-ref-as-operand
provider = null
loggedin.value = false
}
return {
loggedin,
loading,
loginButtonStatus,
connecting,
provider,
web3auth,
login,
logout,
}
},
}
</script>
<style lang="scss" scoped>
.btn {
margin-top: 0;
// margin-left: 0.5rem;
padding: 0.7rem 1rem;
}
</style>