# \[Archive\] WalletServicesPlugin integration on a no-modal project

**URL:** <https://builder.metamask.io/t/archive-walletservicesplugin-integration-on-a-no-modal-project/1594>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [February 29, 2024, 11:37am UTC](https://builder.metamask.io/t/archive-walletservicesplugin-integration-on-a-no-modal-project/1594 "2024-02-29T11:37:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![german.blasco](https://avatars.discourse-cdn.com/v4/letter/g/e9a140/32.png) [@german.blasco](https://builder.metamask.io/u/german.blasco)\
**Post date:** [February 29, 2024, 11:37am UTC](https://builder.metamask.io/t/archive-walletservicesplugin-integration-on-a-no-modal-project/1594/1 "2024-02-29T11:37:20Z")

</div>

> **🏛 Archived Content from Web3Auth Community**
> 
> This topic was originally posted by **german.blasco** on 2/29/2024.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

Hello, I’m trying to add wallet services to the no-modal sdk and i’m facing some issues.

First of all, I’ve successfully integrated the web3auth custom authentication login.

Once I did that, I tried to add the WalletServicesPlugin, but I got this error:

[![Captura de pantalla 2024-02-29 a las 12.23.02](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/de42d94f46cb11a45b6fd1e7442d949c7b5667cc.png)
Captura de pantalla 2024-02-29 a las 12.23.02818×494 69.6 KB
](https://web3auth.io/community/uploads/default/original/2X/e/e39f5ce339f8716f7866558de6c20dd732da8720.png "Captura de pantalla 2024-02-29 a las 12.23.02")

```auto
logoDark and logoLight are required in whiteLabel config
    at WalletServicesPlugin.initWithWeb3Auth

```

After that, I’ve added the two logo versions as the documentation said:

```ts
    const uiConfig: WhiteLabelData = {
        appName: 'name',
        defaultLanguage: "en",
        logoLight: "https://web3auth.io/images/web3authlog.png",
        logoDark: "https://web3auth.io/images/web3authlogodark.png",
        mode: "light",
    }
const options: Web3AuthNoModalOptions = {
    clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    chainConfig,
    uiConfig
}

```

but now I get this error without any details:

```auto
TypeError: Failed to construct 'URL': Invalid URL
    at eIe (index-VbLeAWHL.js:100:4781)
    at e (Frame-vX2mi_79.js:1:2305)

```

[![Captura de pantalla 2024-02-29 a las 12.27.43](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/d4ac05c2a66c3a3653485eb615a8b1064c164812.png)
Captura de pantalla 2024-02-29 a las 12.27.43816×453 57.2 KB
](https://web3auth.io/community/uploads/default/original/2X/9/939b828884fc59657583a240c8e7efae85cd0921.png "Captura de pantalla 2024-02-29 a las 12.27.43")

this error makes reference to this code snippet:

```js
.authorizeSession()
  , eIe = async t=>{
    try {
        const e = new URL(`${uce[t.network]}/api/feature-access`);
        e.searchParams.append("client_id", t.clientId),
        e.searchParams.append("network", t.network),
        e.searchParams.append("is_wallet_service", "true"),
        e.searchParams.append("enable_gating", "true"),
        t.isWhitelabel && e.searchParams.append("is_whitelabel", String(t.isWhitelabel)),
        await vi(e.href)
    } catch (e) {
        if (e instanceof Response) {
            const r = await e.json();
            Ne.error("ERROR:", r.error)
        }
        throw e
    }
}

```

- SDK Version: 8.0.0
- Platform: Nuxt 3 (vite and vue 3)
- Browser Console Screenshots:

This is my current web3auth config:

```ts

    const {Web3AuthNoModal} = await import('@web3auth/no-modal')
const chainConfig = {
    chainId: "0x1",
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    rpcTarget: "https://rpc.ankr.com/multichain/xxxxxxxxxxxxxxxxxxxxxx",
}

const uiConfig: WhiteLabelData = {
    appName: 'name',
    defaultLanguage: "en",
    logoLight: "https://web3auth.io/images/web3authlog.png",
    logoDark: "https://web3auth.io/images/web3authlogodark.png",
    mode: "light",
}

const options: Web3AuthNoModalOptions = {
    clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    chainConfig,
    uiConfig
}

const web3auth = new Web3AuthNoModal(options);

const otherProvider = new CommonPrivateKeyProvider({config: {chainConfig}})

const openloginAdapter = new OpenloginAdapter({
    adapterSettings: {
        network: "sapphire_devnet",
        uxMode: "popup",
        loginConfig: {
            jwt: {
                verifier: "api-develop-xxxxxxxxx-web",
                typeOfLogin: "jwt",
                clientId: 'xxxxxxxxxxxxxxxxxxxxx'
            },
        },
    },
    privateKeyProvider: otherProvider,
});

web3auth.configureAdapter(openloginAdapter);

const walletServicesPlugin = new WalletServicesPlugin()
web3auth.addPlugin(walletServicesPlugin)

await web3auth.init();

```

And also here are my login and wallet logic:

```auto
async function login(idToken: string) {
  if (web3auth.connected) return
return await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: ‘jwt’,
extraLoginOptions: {
domain: ‘’,
id_token,
verifierIdField: “sub”, // same as your JWT Verifier ID
},
}).catch((e: WalletLoginError) => console.error(e))
}

```

---

<div class="post-metadata">

**Author:** ![TomTom](https://avatars.discourse-cdn.com/v4/letter/t/a9a28c/32.png) [@TomTom](https://builder.metamask.io/u/TomTom)\
**Post date:** [February 29, 2024, 7:36pm UTC](https://builder.metamask.io/t/archive-walletservicesplugin-integration-on-a-no-modal-project/1594/2 "2024-02-29T19:36:39Z")

</div>

hi @german.blasco ,

can you share with us the version of the libraries that you are using ?