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

Help - Plug n Play PnP Web SDKs
1
  • 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 - react
web3auth - extension - react1440×900 91.6 KB

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

2

Hey @teh.wolf73

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

Plug n Play Project - Whitelist
Plug n Play Project - Whitelist1840×1191 219 KB

3

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- error
react - extension- error1410×709 30.7 KB

4

Hello @teh.wolf73,

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

5

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

6

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

7

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

8

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

9

Yes, I have already changed it

10

What about this error: Unable to detect window.ethereum

11

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.

12

Thank you so much for following up

13

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
14

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

15

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
16

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
17

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.