WebSocket fails to connect when not on localhost

[timbaas]

I'm trying to integrate the AuthClient, which connects successfully when the app is opened on localhost. However, when I'm trying to connect when the app is opened from a domain it fails to initiate the websocket to relay.walletconnect.com.

It doesn't provide any errors. My project has the correct allowed domains specified.

I also tried the example app which gives the same results, it works from localhost but not from a specific domain.

The error in the browser console:

ws.ts:114 WebSocket connection to 'wss://relay.walletconnect.com/?auth=jwt&projectId=project-id&ua=wc-2%2Fjs-2.0.0%2Fwindows10-chrome-107.0.0%2Fbrowser%3Ap3041.office.pack.house' failed: 
(anonymous) @ ws.ts:114
register @ ws.ts:112
open @ ws.ts:59
open @ provider.ts:113
connect @ provider.ts:30
init @ index.ts:5
error.ts:66 Uncaught TypeError: Cannot read properties of undefined (reading 'message')
    at parseConnectionError (error.ts:66:12)
    at WsConnection.parseError (ws.ts:160:12)
    at socket.onerror (ws.ts:120:28)

[bkrem]

Hi @timbaas,

Sorry to hear you're having trouble with getting Auth set up.

We so far haven't seen issues with the client running on a deployment/domain (e.g. https://react-auth-dapp.walletconnect.com/), so this smells to me like some issue around the Allowed Domain configuration, especially since it's not an issue on localhost.

Could you share with us how you've specified Allowed Domains for your project and/or share your projectId so we can get a sense of what might be the issue?

cc @devceline @ganchoradkov

[timbaas]

Hi @bkrem

No worries, forgot to mention here that after posting I tried resetting the Project ID after which I was able to connect without a problem. :)

So I guess this issue can be closed.

Thanks for the reply though!

[bkrem]

Great to hear you were able to resolve it. Still seems like a bug if you had to reset the projectId for it to work with the Allowed Domains config so we'll look into it 👍

[sigra]

Hi @bkrem

Having the same problem as TS, but Project ID regeneration didn't help me 😞 . Checked the Allowed domains so many times — domain is certainly correct.

Does WalletConnect have some restrictions for the domain naming? I'm using ngrok for tunneling, can it be a reason of issue?

[bkrem]

Hi @sigra,

Thanks for making us aware, reopening since this is still being investigated and clearly still an issue.

I think first steps for us here are to try and remove variables on your side to find what's causing this:

• Does it work if you don't set Allowed Domains?
• Does it work if you use a fresh/regenerated projectId that definitely hasn't had Allowed Domains/Origins set yet?
• Does removing ngrok from the scenario change anything?

Would be great if you could share the email account you're using on cloud.walletconnect.com so we can look into your config on our side and try to reproduce separately 🙏 You can of course also just email me from that address at ben@walletconnect.com if you prefer to not post it here.

[bkrem]

FYI: Transferring this issue to the main monorepo since this seems to an infra/config issue, not AuthClient specific.

[sigra]

Hi @bkrem,

Thanks for your advice, I have tried few approaches and connection to WS server now is ok. I'm not sure what exactly helped me out.

Here is a steps what I did. Maybe this will give you a hint to find the root of issue.

1. Tried to clean "Allowed Domains" at the first step. Nothing changed. WS connection was failed.
2. My time zone is UTC+1 (Central Europe), I tried to switch to UTC-3 (Brazil) and 🥁🥁🥁... WS connection was established. Thanks to this: https://github.com/WalletConnect/walletconnect-monorepo/issues/1733#issuecomment-1344327474
3. Put my ngrok tunnel address back to the "Allowed Domains" — everything is OK
4. Rolled back to my local time zone UTC+1 — WS still works

UPD. It was broken again while I was typing this message. Repeated the steps above 1-4 with the one addition — utc-3 didn't have an effect, tried to switch to utc-4 and it helped.

UPD2. Well, it looks like it's just a coincidence and timezone isn't a root of issue in my case. Seems like "Allowed Domains" rule applies not immediately but within 1-5 minutes, i.e. while I'm swapping timezone in my system preferences. So, the issue in Allowed Domains, it works pretty good without this rule. Sorry for confusion.

UPD3. 20 minutes later. It broke again even with empty Allowed Domains. Tried to regenerate ProjectID — it helped. Keep watching 👀

[crypblizz8]

Hey @sigra wanted to check how it is going with the WS connection?

Have been reproducing / understanding this issue and came across NGROK erroring. I then added the ngrok to the allowList and it seemed to work for me.

I also tried a normal Vercel / Cloudflare deployment and it seemed to work fine on my end.

[bkrem]

Hi @sigra,

We've shipped some fixes around Allowlist and it should be less finicky to work with now. Specifying with or without protocol (e.g. https://) and using wildcards (https//:*.mydomain.com) should work as expected, with changes taking up to 15 mins to propagate, but likely faster.

Could you confirm if you're still experiencing issues with the connection on your side?

[AminElEL]

hi all, the issue with connecting to wss is still active, any progress on this issue? This is a screenshot from react demo app, I am getting the same behavior locally.

[arein]

In order for us to better reproduce. Can you please:

1. copythe WS connection a cURL (see screenshot).
2. repliace wss in the url with https
3. run the command

Expected behavior: it just hangs (as cURL can't do a WS upgrade) Maybe: you get a HTTP 401/403 something else that might help us understand what's going on.

Then

[finessevanes]

@arein once you have the new cURL copied, where do you run the command?

[arein]

In a terminal

[ktomascz]

Facing the same issue and have no idea why. Have you guys figured this out?

In my case it happens with the localhost as well. Error: WebSocket connection failed for URL: wss://relay.walletconnect.com? ... the connection fails and that's it.

[timbaas]

Facing the same issue and have no idea why. Have you guys figured this out?

In my case it happens with the localhost as well. Error: WebSocket connection failed for URL: wss://relay.walletconnect.com? ... the connection fails and that's it.

Resetting the project ID in the admin panel after adding the correct domain worked for me.

[ktomascz]

Thanks. My issue was not including the projectId param in the 'modalConnectors' function. Must have changed with new versions.

Also there's a problem with web3modal/react latest version, but the issue is already opened.

[GiuBlockchainDEV]

We have implemented a dapp that allows crosschain exchange of cryptocurrencies. We have implemented wallet connect v2, and in localhost we have experienced no issues; however, when we went into production and uploaded it to the server, with domain https://www.swappy.exchange/, we enabled the domain on the wallet connect control panel, we waited the 15 minutes, also tried to create a new project ID, but it still doesn't work. ould the problem be the .exchange domain? The wallet connect websocket call returns error 400

wss://relay.walletconnect.com/?auth=eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkaWQ6a2V5Ono2TWtraWtFUTd1VFhKYU5QNTZRRFp4Ym95RDdEZUJuOEtLYUg1YjRxWEVWaDQ5byIsInN1YiI6IjFkN2RlMjlkMGEzMzNiNDIwODJkZGVhZmUyNzczOTAwOWMwNDBlMWZhMjZkNDhjNzQxM2EyMDFmYmI4NGUxM2UiLCJhdWQiOiJ3c3M6Ly9yZWxheS53YWxsZXRjb25uZWN0LmNvbSIsImlhdCI6MTY3ODMwNDk5MCwiZXhwIjoxNjc4MzkxMzkwfQ.SgxTXONjdrqlpOZAo5By495Kf8Y9MW-mnDva3msGBekWD7f-PwJsrKwUQkuXIxNzEQ1pKdWnWJkHf_qNUMC-Cg&ua=wc-2%2Fjs-2.4.7%2Fmacos-chrome-111.0.0%2Fbrowser%3Awww.swappy.exchange' We are trying to understand if the issue is the .exchange or something else

How can we proceed?

No issues whatsoever on local…

[bkrem]

Hi @GiuNeroniDEV,

It looks like you're not actually passing the projectId value to the websocket connection (there's no projectId= query parameter in your websocket connection string). This means that the allowed domains configuration you're setting isn't being associated with your actual deployment, and explains why you're seeing 400 - bad request responses.

Since you're using web3modal, here's the relevant section of the docs re:configuration: https://docs.walletconnect.com/2.0/web3modal/react/installation#configure

See in particular:

  connectors: modalConnectors({
    projectId: "<YOUR_PROJECT_ID>",
  }),

We're currently in the process of shipping better contextual error messaging for the browser WebSocket, which is opaque by default. So this will hopefully become obvious in future versions of both sign-client and web3Modal

cc @arein @0xAsimetriq @ganchoradkov

[bkrem]

Hi everyone,

An understandable cause for confusion here has been the fact that the onerror messaging provided by browsers' WebSocket implementations is always opaque, regardless of what the relay actually responded. This seems to be due to security considerations around information leakage in a browser environment.

We've now shipped an improvement to this, which is available as of 2.4.10.

A connection that fails in an unexpected way now provides proper context for why the relay closed the connection, e.g.:

Error: WebSocket connection closed abnormally with code: 3000 (Authorization error: Project ID is missing)

Going forward this should make it a lot simpler to identify if the connection issue is configuration-based or an actual issue with the relay and/or client.

Closing this thread as there are no concrete further steps to be taken here. If you're still experiencing unclear connection issues with 2.4.10 or higher, please open a new issue specifically for that case 🙏

[lakshmipriya-maticz]

How do i Regenerate my "PROJECT ID" in already created project @sigra

[DucTinNguyen]

Hi everyone,

An understandable cause for confusion here has been the fact that the onerror messaging provided by browsers' WebSocket implementations is always opaque, regardless of what the relay actually responded. This seems to be due to security considerations around information leakage in a browser environment.

We've now shipped an improvement to this, which is available as of 2.4.10.

A connection that fails in an unexpected way now provides proper context for why the relay closed the connection, e.g.:

Error: WebSocket connection closed abnormally with code: 3000 (Authorization error: Project ID is missing)

Going forward this should make it a lot simpler to identify if the connection issue is configuration-based or an actual issue with the relay and/or client.

Closing this thread as there are no concrete further steps to be taken here. If you're still experiencing unclear connection issues with 2.4.10 or higher, please open a new issue specifically for that case 🙏 I'm using version 2.7.10. How I can fix this problem?

[ghost]

I'm still also getting this error after verifying my domain: Error: WebSocket connection closed abnormally with code: 3000 (Authorization error: Project ID is missing), how do you reset the projectId?

[GAEAlimited]

The error you're encountering suggests that there is an issue with the WebSocket connection to 'wss://relay.walletconnect.com' when your app is opened from a specific domain. It seems like you have already ensured that your project has the correct allowed domains specified, so the issue may be related to other factors.

Here are some steps you can take to troubleshoot and resolve this issue:

Check Network Connectivity: Ensure that the machine or server where your app is hosted from the specific domain has proper network connectivity. Firewalls, network configurations, or other security measures might block WebSocket connections.

CORS Configuration: Double-check your Cross-Origin Resource Sharing (CORS) configuration. Make sure that the WebSocket server ('wss://relay.walletconnect.com') is configured to accept connections from your specific domain. CORS headers should allow the WebSocket connection.

HTTPS: If your app is hosted on a domain, it should use HTTPS rather than HTTP. Some browsers restrict WebSocket connections from HTTP sites. Make sure your website is served over HTTPS.

Browser Developer Tools: Use your browser's developer tools (usually opened with F12 or right-click and "Inspect") to check the network tab for WebSocket requests. Look for any additional error messages or response headers that might provide more information about the issue.

Browser Extensions: Sometimes, browser extensions or add-ons can interfere with WebSocket connections. Try disabling any browser extensions that might affect network requests.

Library or Framework Version: Ensure that you are using the latest version of the library or framework that you are using for WebSocket connections. There might be compatibility issues with older versions.

Server Logs: Check the server logs of 'wss://relay.walletconnect.com' if possible. It's possible that the server is rejecting connections or providing additional error information that could help you diagnose the issue.

Firewall and Security Policies: If your server is hosted on a cloud platform or behind a firewall, check your security policies to ensure that outbound WebSocket connections are allowed.

[GAEAlimited]

Resetting a project ID typically involves generating a new unique identifier for your project. The exact steps to reset a project ID can vary depending on the service or platform you are using. Below, I'll provide some general steps that you can follow:

Access Your Project: Log in to the platform or service where your project ID is used. This is typically a developer dashboard or control panel associated with the service you are using.

Locate Project Settings: Look for a "Project Settings" or "Project Configuration" section within your developer dashboard. The exact location of this section can vary from service to service.

Generate a New Project ID:

In many cases, you'll find an option to generate or reset the project ID within the project settings. Click on the option to generate a new project ID or reset the existing one. Some platforms may allow you to simply edit the existing project ID to a new value. Save Changes: After generating or updating the project ID, make sure to save the changes within the project settings.

Update Your Application: If your project ID is used in your application's configuration files or code, you'll need to update your application to use the new project ID. Make the necessary changes to your code or configuration files to reflect the updated project ID.

Test Your Application: After updating the project ID in your application, thoroughly test your application to ensure that it functions correctly with the new project ID.

Deploy Changes: If your application is deployed on a web server or hosted on a platform, make sure to deploy the updated version of your application with the new project ID.

Monitor and Debug: Keep an eye on your application to ensure that it's working as expected with the new project ID. If you encounter any issues, use debugging and monitoring tools to identify and resolve them.

Documentation Updates: If your project ID is referenced in any documentation or user guides, be sure to update that documentation to reflect the new project ID so that users are aware of the change.

Communicate Changes: If your project ID is associated with a service that other developers or team members use, communicate the change to them so that they can update their configurations and code accordingly.

Remember that the specific steps and terminology can vary depending on the service or platform you are using. Be sure to consult the documentation or support resources provided by the service for more detailed instructions on resetting or updating project IDs in your specific context.

[ghost]

Hey @GAEAlimited, thanks for the detailed response. I just have the project id set up in https://cloud.walletconnect.com/app, and I'm trying to use it via wagmi's WalletConnectConnector. Is there a way to reset the project id from the walletconnect dashboard?