CODEWITHSUNDEEP
node.jsreactjssslmqttmqtt.js
developer_frontend
developer_frontend

Reputation: 1

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

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.

Upvotes: 0

Views: 496

Answers (1)

hardillb
hardillb

Reputation: 59618

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.

Upvotes: 1

Related Questions