[Archive] React chrome extension error: could not validate redirect, please whitelist your domain

[teh.wolf73]

Archived Content from Web3Auth Community

This topic was originally posted by teh.wolf73 on 6/5/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

---

• SDK Version: ^5.0.0-alpha.0
• Platform: Chrome extension

Note: I use react chrome extension project from this URL:
https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-no-modal-sdk/browser-extensions/chrome-extension-no-modal-example

The original project from Github has not Metamask login option, so I added the Metamask adapter and its configuration to this project to log in with the Metamask extension wallet.

When I use this react project as a web application on localhost:3000, it’s working very well, but as I tried to use it in my Chrome extension application, when the popup opened, I get this error as shown in the following screenshot:

web3auth - extension - react1440×900 91.6 KB

I wonder how can I solve this issue.
Any help would be appreciated.
Thanks

[shahbaz]

Hey @teh.wolf73

Please add chrome-extension://{extension-id} in the whitelist section of your project on the Web3auth dashboard.

Plug n Play Project - Whitelist1840×1191 219 KB

[teh.wolf73]

Thank you very much for your response.
I have already added my Chrome extension URL to the whitelist as you mentioned in the attached picture.

By the way, I want to mention an error that seems related to this issue. After I load the unpacked extension on the Chrome extensions page, there is no error for this extension, but as I open the extension popup, then an error appears. Please see the extension error screenshot:

react - extension- error1410×709 30.7 KB

[shahbaz]

Hello @teh.wolf73,

Could you kindly share the steps you are following while loading the extension? Thank you.

[shahbaz]

@teh.wolf73

SDK Version: ^5.0.0-alpha.0

May I ask why you are using this version instead of the latest one that is currently being used in the example?

[teh.wolf73]

1- Build the React app by command
2- Open chrome://extensions/ in the Chrome browser
3- CLick on the “load unpacked” button
4- Select the React project build folder
5- Now, the extension is ready to use

[teh.wolf73]

I tried the latest version and I saw the current error in that version too. So I guessed that maybe another version will solve the issue

[shahbaz]

And have you changed the clientId of the app to yours?

  <a href="https://github.com/Web3Auth/web3auth-pnp-examples/blob/main/web-no-modal-sdk/chrome-extension-no-modal-example/src/App.tsx#L12-L13" target="_blank" rel="noopener">github.com</a>

Web3Auth/web3auth-pnp-examples/blob/main/web-no-modal-sdk/chrome-extension-no-modal-example/src/App.tsx#L12-L13

<pre class="onebox"><code class="lang-tsx">
  <ol class="start lines" start="12" style="counter-reset: li-counter 11 ;">
      <li></li>
      <li>const clientId =</li>
  </ol>
</code></pre>

[teh.wolf73]

Yes, I have already changed it

[teh.wolf73]

What about this error: Unable to detect window.ethereum

[shahbaz]

This shouldn’t be the case. I will look into this with my team tomorrow and provide you with an update as soon as possible.

[teh.wolf73]

Thank you so much for following up

[shahbaz]

Hi there,

I have tested the app and noticed that it was missing zlib. I have included it and kindly request that you take a pull. Additionally, I have created a video walkthrough to assist you.

Best regards,

[teh.wolf73]

I tried the latest version of this project but it didn’t work. Please watch the walkthrough video and please let me know how can I solve the issue. Thank you very much.

Walkthrough video link: https://www.veed.io/view/f81d2bc4-6f04-439c-96dc-088fd7076204?panel=share

[shahbaz]

Hey @teh.wolf73,

Thank you for creating this informative video. It has been extremely helpful in understanding the issue at hand.

I would like to inquire whether your project is currently on testnet or Cyan. If it is currently on testnet, kindly consider changing the network to testnet.

  <a href="https://github.com/Web3Auth/web3auth-pnp-examples/blob/main/web-no-modal-sdk/chrome-extension-no-modal-example/src/App.tsx#L39" target="_blank" rel="noopener">github.com</a>

Web3Auth/web3auth-pnp-examples/blob/main/web-no-modal-sdk/chrome-extension-no-modal-example/src/App.tsx#L39

<pre class="onebox"><code class="lang-tsx">
  <ol class="start lines" start="29" style="counter-reset: li-counter 28 ;">
      <li>  chainId: "0x1",</li>
      <li>  rpcTarget: "https://rpc.ankr.com/eth",</li>
      <li>  displayName: "Ethereum Mainnet",</li>
      <li>  blockExplorer: "https://goerli.etherscan.io",</li>
      <li>  ticker: "ETH",</li>
      <li>  tickerName: "Ethereum",</li>
      <li>};</li>
      <li>const web3auth = new Web3AuthNoModal({</li>
      <li>  clientId,</li>
      <li>  chainConfig,</li>
      <li class="selected">  web3AuthNetwork: "cyan",</li>
      <li>});</li>
      <li></li>
      <li>setWeb3auth(web3auth);</li>
      <li></li>
      <li>const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });</li>
      <li></li>
      <li>const openloginAdapter = new OpenloginAdapter({</li>
      <li>  privateKeyProvider,</li>
      <li>});</li>
      <li>web3auth.configureAdapter(openloginAdapter);</li>
  </ol>
</code></pre>

[teh.wolf73]

WOW!!!
As you mentioned in the last message, the network was the problem. My project network in the dashboard is “testnet” but it was “cyan” in the code. I changed it and now it’s working. Thank you very much for your patience and professional support.
If I have further questions in future about current project and codes, should I ask them here or in a new topic?

[shahbaz]

Awesome!

@teh.wolf73

If I have further questions in future about current project and codes, should I ask them here or in a new topic?

It’s advisable to start a new thread for each topic to make it easier for anyone with similar questions to find and refer to them.