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

  • 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:

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

Hey @teh.wolf73

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

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:

Hello @teh.wolf73,

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

May I ask why you are using this version instead of the latest one that is currently being used in the example?
Screenshot 2023-06-06 at 8.08.31 PM

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

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

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

Yes, I have already changed it

What about this error: Unable to detect window.ethereum

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.

Thank you so much for following up

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,

1 Like

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

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.

1 Like

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?

1 Like

Awesome!

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.