# Vanillajs plug& play does not work

**URL:** <https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [July 9, 2024, 3:02pm UTC](https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279 "2024-07-09T15:02:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![djelastic](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@djelastic](https://builder.metamask.io/u/djelastic)\
**Post date:** [July 9, 2024, 3:02pm UTC](https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279/1 "2024-07-09T15:02:46Z")

</div>

> **🏛 Content from Web3Auth Community**
> 
> This topic was originally posted by **djelastic** on 7/9/2024.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

I am trying Plug & play, Web Modal SDK with Vanilla JS

I tried following

 ![](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/4bea15d5fdfd372b2e7fae21263c61fab3da9379.png)

```
  <a href="https://web3auth.io/docs/quick-start?product=PNP&amp;sdk=PNP_MODAL&amp;framework=HTML&amp;stepIndex=1" target="_blank" rel="noopener">Web3Auth</a>

```

### [Integration Builder](https://web3auth.io/docs/quick-start?product=PNP&sdk=PNP_MODAL&framework=HTML&stepIndex=1)

Web3Auth Integration Builder for easy quick start. Web3Auth is simple, non-custodial auth infrastructure that enables Web3 wallets and applications to provide seamless user logins for both mainstream and native Web3 users.

Also tried checking

 ![](https://github.githubassets.com/favicons/favicon.svg)

```
  <a href="https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vanillajs-modal-quick-start" target="_blank" rel="noopener nofollow ugc">github.com</a>

```

### [web3auth-pnp-examples/web-modal-sdk/quick-starts/vanillajs-modal-quick-start at...](https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vanillajs-modal-quick-start)

Contribute to Web3Auth/web3auth-pnp-examples development by creating an account on GitHub.

1. If I run it on my pc (withot npm) I get problem with ClientID

- In flutter or in React my ClientID works perfectly

1. Running example also does not work. THere is some crash in generating some sha256 key (saw in console)

I want to integrate this Plug & play in Wix but I see it is not working. React example works but haven’t yet had time to try that using Wix

What to do?

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [July 16, 2024, 6:08am UTC](https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279/2 "2024-07-16T06:08:26Z")

</div>

Hey @djelastic  
Welcome aboard. Can you please share the exact error that you’re getting on the console?  
Can you please share the Web3Auth initialisation snippet?

---

<div class="post-metadata">

**Author:** ![djelastic](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@djelastic](https://builder.metamask.io/u/djelastic)\
**Post date:** [July 17, 2024, 3:43pm UTC](https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279/3 "2024-07-17T15:43:59Z")

</div>

Hey @maharshi

So it says that

> #### Something went wrong
> 
> ###### There seems to be some bug in the code. Please contact support to fix this.
> 
> ###### could not validate redirect, please whitelist your domain: for provided clientId {myId} at [https://dashboard.web3auth.io](https://dashboard.web3auth.io). Also, this project is on sapphire\_devnet network. Please ensure the the used Client ID belongs to this network.

I have done this multiple times. I have correct Client ID and everything  
I did same on react, flutter and it worked normally.

Only vanilla Js shows this problem  
Went over tutorials

1. When I tried example on your github it also breaks. As said it shows some generating sha256 key function error

You can try it yourself. Does not work neither of those and only vanilla has problems

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [July 18, 2024, 3:16am UTC](https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279/4 "2024-07-18T03:16:06Z")

</div>

@djelastic,

I’ll check the examples and fix those, can you please share the link of the example you tried? Thanks for reporting this. In the meantime, could you please share the initialization code snippet with me here?

---

<div class="post-metadata">

**Author:** ![djelastic](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@djelastic](https://builder.metamask.io/u/djelastic)\
**Post date:** [July 18, 2024, 3:15pm UTC](https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279/5 "2024-07-18T15:15:38Z")

</div>

@maharshi great!

So first I tried this

 ![](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/4bea15d5fdfd372b2e7fae21263c61fab3da9379.png)

```
  <a href="https://web3auth.io/docs/quick-start?product=PNP&amp;sdk=PNP_MODAL&amp;framework=HTML&amp;stepIndex=0" target="_blank" rel="noopener">Web3Auth</a>

```

### [Integration Builder](https://web3auth.io/docs/quick-start?product=PNP&sdk=PNP_MODAL&framework=HTML&stepIndex=0)

Web3Auth Integration Builder for easy quick start. Web3Auth is simple, non-custodial auth infrastructure that enables Web3 wallets and applications to provide seamless user logins for both mainstream and native Web3 users.

And here I get this ClientId problem

Then I tried this github example

 ![](https://github.githubassets.com/favicons/favicon.svg)

```
  <a href="https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vanillajs-modal-quick-start" target="_blank" rel="noopener nofollow ugc">github.com</a>

```

### [web3auth-pnp-examples/web-modal-sdk/quick-starts/vanillajs-modal-quick-start at...](https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vanillajs-modal-quick-start)

Contribute to Web3Auth/web3auth-pnp-examples development by creating an account on GitHub.

But here another error gets presented, in some library from your side

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [July 19, 2024, 4:51am UTC](https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279/6 "2024-07-19T04:51:28Z")

</div>

@djelastic,

Could you please share a screenshot of the ClientId problem and any other error you are encountering from our library?  
Did you try out the preview in the quick start, do you face the similar ClientId problem?  
 ![Screen Recording 2024-07-19 at 10.23.04.mov [video-to-gif output image]](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/1671e08682141d9e178f9b45fd260534e3bb05ca.gif)

---

<div class="post-metadata">

**Author:** ![djelastic](https://avatars.discourse-cdn.com/v4/letter/d/ee7513/32.png) [@djelastic](https://builder.metamask.io/u/djelastic)\
**Post date:** [July 20, 2024, 7:11am UTC](https://builder.metamask.io/t/vanillajs-plug-play-does-not-work/1279/7 "2024-07-20T07:11:54Z")

</div>

@maharshi  
If I try this example it works yes  
But when I copy and download this on my pc, change to sapphire\_devnet and change clientid it does not work

Here I posted a video

And as I said, Flutter and React work perfectly. Same ClientId can be used and same all callback URLs without any problem