-
Describe your issue or question:
- Which platform or framework are you using (e.g., React, Vue, Android, iOS, Unity, Node, etc.)
Nuxt3
- Which Web3Auth/ Embedded Wallet SDK (SDK Name and version) are you using?
"@web3auth/ethereum-provider": "^9.7.0",
"@web3auth/modal": "^10.5.4",
- What is not working as expected?
We’re implementing wallet integration using JWTs obtained from our own authentication. In V9, we could integrate using NO MODAL and UX_MODE with redirect settings, but I don’t know how to do it in V10. Please advise.
- Code snippets: Include the portion of your code that is causing problems.
import {
Web3AuthNoModal,
WALLET_CONNECTORS,
AUTH_CONNECTION,
LOGIN_MODE,
UX_MODE,
type IProvider,
WEB3AUTH_NETWORK,
type WEB3AUTH_NETWORK_TYPE,
} from ‘@web3auth/no-modal’
import {
createPublicClient,
createWalletClient,
custom,
} from ‘viem’
import { SiweMessage } from ‘siwe’
import type { RuntimeConfig } from ‘nuxt/schema’
import { useRuntimeConfig } from ‘#app’
import { EIP2612_PERMIT_TYPE, ERC20_ABI, ERC20_PERMIT_ABI, EXCHANGE_ABI, type PermitSignature } from ‘@/types/erc20’
// ブラウザの言語設定用の定数
const LANGUAGES = {
en: ‘en’,
ja: ‘ja’,
} as const
type LANGUAGE_TYPE = typeof LANGUAGES[keyof typeof LANGUAGES]
export class Web3AuthService {
private web3auth: Web3AuthNoModal | null = null
private provider: IProvider | null = null
private initialized: boolean = false
private config: RuntimeConfig = useRuntimeConfig()
// constructor() {
// // 空のコンストラクタ
// }
async init() {
try {
// すでに初期化済みの場合は現在の状態を返す
if (this.initialized && this.web3auth) {
const isConnected = this.web3auth.connected
// 接続状態をLocalStorageに保存
if (isConnected) {
setLocalStorage(‘web3auth_is_connected’, ‘true’)
}
return {
isLoggedIn: isConnected,
provider: this.provider,
}
}
// Web3Authの設定情報を環境変数から取得
const clientId = this.config.public.web3AuthClientId as string
if (!clientId) {
console.error('Web3Auth Client ID is missing')
return { isLoggedIn: false, provider: null }
}
// Web3Auth Network設定
const web3AuthNetwork = (this.config.public.web3AuthNetwork as string) || WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
// Chain ID設定
const chainIdStr = (this.config.public.chainId as string) || 'aa36a7'
this.web3auth = new Web3AuthNoModal({
clientId,
web3AuthNetwork: web3AuthNetwork as WEB3AUTH_NETWORK_TYPE,
sessionTime: 86400 * 30,
defaultChainId: chainIdStr,
enableLogging: true,
walletServicesConfig: {
language: this.getBrowserLanguage(),
} as WalletServicesConfig,
})
await this.web3auth.init()
this.provider = this.web3auth.provider
this.initialized = true
return {
isLoggedIn: this.web3auth.connected,
provider: this.provider,
}
} catch (error) {
console.error('Web3Auth initialization error:', error)
return {
isLoggedIn: false,
provider: null,
}
}
}
async loginWithAccessToken(accessToken: string) {
if (!this.web3auth) {
console.error(‘web3auth not initialized yet’)
return null
}
if (!accessToken) {
console.error('Access token is missing')
return null
}
try {
// 既存のセッションをクリア
if (this.web3auth.connected) {
await this.logout()
}
try {
const web3authProvider = await this.web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
authConnection: AUTH_CONNECTION.CUSTOM,
authConnectionId: this.config.public.web3AuthJwtVerifier as string,
extraLoginOptions: {
uxMode: UX_MODE.REDIRECT, // <- v9 is possible but v10 is not
domain: window.location.origin,
idToken: accessToken,
redirectUri: `${window.location.origin}/auth-callback`,
client_id: this.config.public.web3AuthClientId as string,
userIdField: 'sub',
isUserIdCaseSensitive: true,
loginMode: LOGIN_MODE.NO_MODAL,
},
}, LOGIN_MODE.NO_MODAL)
// プロバイダーを設定
this.provider = web3authProvider
return web3authProvider
} catch (connectError) {
console.error('Error connecting to Web3Auth:', connectError)
return null
}
} catch (error) {
console.error('Access token login error:', error)
return null
}
}
// ログアウト
async logout() {
try {
if (!this.web3auth) {
console.error(‘web3auth not initialized yet’)
return false
}
if (this.web3auth.connected) {
await this.web3auth.logout()
this.provider = null
// LocalStorageの接続状態をクリア
removeLocalStorage('web3auth_is_connected')
return true
} else {
return true
}
} catch (error) {
console.error('ログアウトエラー:', error)
return false
}
}
getWeb3Auth() {
return this.web3auth
}
getProvider() {
return this.provider
}
isConnected() {
return this.web3auth?.connected
}
// ブラウザの言語設定を取得し、サポートされている言語に変換するメソッド
private getBrowserLanguage(): LANGUAGE_TYPE {
const localeCookie = useCookie(‘i18n_redirected’)
if (!localeCookie.value) {
return LANGUAGES.en
}
return localeCookie.value as LANGUAGE_TYPE
}
}