useWeb3Auth

Composable to access the Embedded Wallets/Web3Auth context in Vue.

Import

import { useWeb3Auth } from '@web3auth/modal/vue'

Usage

<script setup lang="ts">
  import { watchEffect } from 'vue'
  import { useWeb3Auth } from '@web3auth/modal/vue'

  const { web3Auth, isConnected, isInitializing, connection, status, initError } = useWeb3Auth()

  watchEffect(() => {
    if (isConnected.value) {
      console.log('Connected via:', connection.value?.connectorName)
    }
    if (isInitializing.value) {
      console.log('Web3Auth is initializing')
    }
    if (connection.value?.ethereumProvider) {
      console.log('Ethereum provider available')
    }
    if (status.value) {
      console.log('Web3Auth status:', status.value)
    }
    if (initError.value) {
      console.log('Web3Auth initialization error:', initError.value)
    }
  })
</script>

info

For EVM wallet operations, use Wagmi composables after setting up WagmiProvider. Use connection.ethereumProvider only for JSON-RPC methods Wagmi does not cover. See the Web SDK v11 migration guide.

Return type

import type { IWeb3AuthInnerContext } from '@web3auth/modal/vue'

connection

Ref<Connection | null>

Active wallet connection after sign-in. Connection has ethereumProvider, solanaWallet, connectorName, and connectorNamespace.

chainId

Ref<string | null>

Chain ID of the currently connected chain.

chainNamespace

Ref<ChainNamespaceType | null>

Namespace of the currently connected chain (for example, eip155 or solana).

initError

Ref<Error | null>

Error that occurred during Web3Auth initialization.

isAuthorized

Ref<boolean>

Whether the connector has reached the authorized status.

isConnected

Ref<boolean>

Whether the user is connected to Web3Auth.

isInitialized

Ref<boolean>

Whether Web3Auth has completed initialization.

isInitializing

Ref<boolean>

Whether Web3Auth is currently initializing.

isMFAEnabled

Ref<boolean>

Whether MFA is enabled for the connected user.

status

Ref<CONNECTOR_STATUS_TYPE | null>

Current status of the Web3Auth connection.

web3Auth

ShallowRef<Web3Auth | null>

The Web3Auth instance.

getPlugin

(pluginName: string) => IPlugin | null

Helper function to get a plugin by name.

setIsMFAEnabled

(isMfaEnabled: boolean) => void

Sets the isMFAEnabled state.