Error when trying to connect custom mqtt broker with react and typescript

Question

I was using mqtt.js and was trying to get my custom MQTT broker with SSL certification connected in react but was failing with the following error in the console:

WebSocket connection to 'wss:xxx:1884/' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

used code:

TRUSTED_CA_LIST,key and cert are strings
const options = {
  username: "username",
  password: "password",
  clientId:"id",
  port: 1884,
  key: KEY,
  cert: CERT,
  rejectUnauthorized: false,
  // The CA list will be used to determine if server is authorized
  ca: TRUSTED_CA_LIST,
  protocol: 'mqtt'
}
  const client  = mqtt.connect("ssL://brokerurl:1884",options);

  "dependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "mqtt": "^4.3.7",
    "mqtt-react-hooks": "^3.0.0-alpha.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.9.3",
    "web-vitals": "^2.1.4"

used browser : miscrosoft edge

The above code, I found it in the mqtt.js under examples and modified it according to my need, the broker url originally starts with ssl:xx but in the console of the browser it failed with wss:xx which confused me. Any help is appreciated.

Answer 1

You can not override the web browsers list of trusted CA certificates.

The ca option will only work when using the MQTT.js library with nodejs.

If you want to use a self signed or private CA to verify a certificate then you will need to import it into the browsers trust store.

You can also only use WebSockets or Secure WebSockets from the browser, due to the JavaScript sandbox.