How to pass connection options like username and password

[gdegas]

How can I do this, all it's letting me to do is pass a string with the url of the broker to connect to but not configuration options

[lenlch]

@gdegas Did you resolver this problem? thanks, I have the same problem

[gdegas]

@lenlch No I defaulted to using mqtt.js

[hadifikri]

mqtt-react is a container for mqttjs/MQTT.js, it is possible to include the options based on the docs:

import { Connector } from 'mqtt-react';
import App from './components/App';

export default () => (
  <Connector mqttProps="ws://username:[email protected]">
    <App />
  </Connector>
);

URL.parse() function from here

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            href                                             │
├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │        host         │           path            │ hash  │
│          │  │                     ├──────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │   hostname   │ port │ pathname │     search     │       │
│          │  │                     │              │      │          ├─┬──────────────┤       │
│          │  │                     │              │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.host.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │   hostname   │ port │          │                │       │
│          │  │          │          ├──────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │        host         │          │                │       │
├──────────┴──┼──────────┴──────────┼─────────────────────┤          │                │       │
│   origin    │                     │       origin        │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤
│                                            href                                             │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
(all spaces in the "" line should be ignored — they are purely for formatting)

A simpler way:

<Connector mqttProps={
    {
        host: 'test.mosca.io',
        port:3000,
        username: 'username',
        password: 'password'
    }
}>

By default, mqtt.js would simply used ws protocol

Tested using mosca mqtt broker with authentication enabled

[Abenezer]

for other options (non url related) like clientId ... 'options' props should have been defined.. (just pass this prop as a second argument for MQTT.connect() )
any ways since Connector also support directly specifying mqtt object through 'mqtt' prop .. we cal also do it this way.

import MQTT from "mqtt"; const mqtt = MQTT.connect('url', options); <Connector mqtt={mqtt}>

[deegha]

I have not tested this library yet. But since mqtt-react is a container for mqttjs/MQTT.js, it should be possible to include the options based on the docs:

import { Connector } from 'mqtt-react';
import App from './components/App';

export default () => (
  <Connector mqttProps="ws://username:[email protected]">
    <App />
  </Connector>
);

URL.parse() function from here

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            href                                             │
├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │        host         │           path            │ hash  │
│          │  │                     ├──────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │   hostname   │ port │ pathname │     search     │       │
│          │  │                     │              │      │          ├─┬──────────────┤       │
│          │  │                     │              │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.host.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │   hostname   │ port │          │                │       │
│          │  │          │          ├──────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │        host         │          │                │       │
├──────────┴──┼──────────┴──────────┼─────────────────────┤          │                │       │
│   origin    │                     │       origin        │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤
│                                            href                                             │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
(all spaces in the "" line should be ignored — they are purely for formatting)

Simpler way:

<Connector mqttProps={
    host: 'ws://test.mosca.io',
    username: 'username',
    password: 'password'
  }
>

am pretty sure you meant this to be like this
<Connector mqttProps={
{
host: 'ws://test.mosca.io',
username: 'username',
password: 'password'
}
}>

i tried this but didn't work

[hadifikri]

I have not tested this library yet. But since mqtt-react is a container for mqttjs/MQTT.js, it should be possible to include the options based on the docs:

import { Connector } from 'mqtt-react';
import App from './components/App';

export default () => (
  <Connector mqttProps="ws://username:[email protected]">
    <App />
  </Connector>
);

URL.parse() function from here

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            href                                             │
├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │        host         │           path            │ hash  │
│          │  │                     ├──────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │   hostname   │ port │ pathname │     search     │       │
│          │  │                     │              │      │          ├─┬──────────────┤       │
│          │  │                     │              │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.host.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │   hostname   │ port │          │                │       │
│          │  │          │          ├──────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │        host         │          │                │       │
├──────────┴──┼──────────┴──────────┼─────────────────────┤          │                │       │
│   origin    │                     │       origin        │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤
│                                            href                                             │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
(all spaces in the "" line should be ignored — they are purely for formatting)

Simpler way:

<Connector mqttProps={
    host: 'ws://test.mosca.io',
    username: 'username',
    password: 'password'
  }
>

am pretty sure you meant this to be like this
<Connector mqttProps={
{
host: 'ws://test.mosca.io',
username: 'username',
password: 'password'
}
}>

i tried this but didn't work

<Connector mqttProps={
    {
        host: 'test.mosca.io',
        port:3000,
        username: 'username',
        password: 'password'
    }
}>

Remove the protocol on host leaving only the base URL, then specify the port separately. Tested on mosca mqtt broker with authentication enabled.

[AarjuRabadiya]

Hello @gdegas,
I am getting failed: Error during WebSocket handshake: net:: ERR_CONNECTION_RESET this error when I fixed mqttprops.

I tried using these props

mqttProps: {
      host: "157.245.85.49:8084/mqtt",
      username: "tolomoto",
      password: "S36EeqD956UwGCYC",
    },

or

 mqttProps: {
     protocol: "wss",
       host: "wss://157.245.85.49:8084/mqtt",
      port: "8084",
       username: "tolomoto",
       password: "S36EeqD956UwGCYC",
     },

or
mqttProps: "ws://157.245.85.49:8084/mqtt"

or

mqttProps: "ws://tolomoto:[email protected]:8084/mqtt

Please tell me how to solve it.

[hadifikri]

Hello @gdegas,
I am getting failed: Error during WebSocket handshake: net:: ERR_CONNECTION_RESET this error when I fixed mqttprops.

I tried using these props

mqttProps: {
      host: "157.245.85.49:8084/mqtt",
      username: "tolomoto",
      password: "S36EeqD956UwGCYC",
    },

or

 mqttProps: {
     protocol: "wss",
       host: "wss://157.245.85.49:8084/mqtt",
      port: "8084",
       username: "tolomoto",
       password: "S36EeqD956UwGCYC",
     },

or
mqttProps: "ws://157.245.85.49:8084/mqtt"

or

mqttProps: "ws://tolomoto:[email protected]:8084/mqtt

Please tell me how to solve it.

mqttProps: {{   
      host: "157.245.85.49:8084/mqtt",
      username: "tolomoto",
      password: "S36EeqD956UwGCYC",
}}  

mqttProps: {"ws://157.245.85.49:8084/mqtt"}

mqttProps: {"ws://tolomoto:[email protected]:8084/mqtt}

Make sure you have the curly braces...

mqttProps: {{
       protocol: "wss",
       host: "wss://157.245.85.49:8084/mqtt",
       port: "8084",
       username: "tolomoto",
       password: "S36EeqD956UwGCYC",
  }}

This would never work. The component do not looks for protocol. Specifying the protocol like this host:"wss://" is not working either. By the default protocol ws is used. If your are going to use wss, use URL based:

mqttProps: {"wss://tolomoto:[email protected]:8084/mqtt} works.

[AarjuRabadiya]

Hello @gdegas,
I am getting failed: Error during WebSocket handshake: net:: ERR_CONNECTION_RESET this error when I fixed mqttprops.
I tried using these props

mqttProps: {
      host: "157.245.85.49:8084/mqtt",
      username: "tolomoto",
      password: "S36EeqD956UwGCYC",
    },

or

 mqttProps: {
     protocol: "wss",
       host: "wss://157.245.85.49:8084/mqtt",
      port: "8084",
       username: "tolomoto",
       password: "S36EeqD956UwGCYC",
     },

or
mqttProps: "ws://157.245.85.49:8084/mqtt"
or
mqttProps: "ws://tolomoto:[email protected]:8084/mqtt
Please tell me how to solve it.

mqttProps: {{   
      host: "157.245.85.49:8084/mqtt",
      username: "tolomoto",
      password: "S36EeqD956UwGCYC",
}}  

mqttProps: {"ws://157.245.85.49:8084/mqtt"}

mqttProps: {"ws://tolomoto:[email protected]:8084/mqtt}

Make sure you have the curly braces...

mqttProps: {{
       protocol: "wss",
       host: "wss://157.245.85.49:8084/mqtt",
       port: "8084",
       username: "tolomoto",
       password: "S36EeqD956UwGCYC",
  }}

This would never work. The component do not looks for protocol. Specifying the protocol like this host:"wss://" is not working either. By the default protocol ws is used. If your are going to use wss, use URL based:

mqttProps: {"wss://tolomoto:[email protected]:8084/mqtt} works.

Hello @gdegas, @hadifikri,
mqttProps: "wss://tolomoto:[email protected]:8084/mqtt" -> This is also not working

[hadifikri]

Hello @gdegas, @hadifikri,
mqttProps: "wss://tolomoto:[email protected]:8084/mqtt" -> This is also not working

const mqtt_username = 'uname';
const mqtt_password = 'pass';

const mqtt_broker_ws = `ws://${mqtt_username}:${mqtt_password}@157.245.85.49:8084/mqtt`;
const mqtt_broker_wss = `wss://${mqtt_username}:${mqtt_password}@1157.245.85.49:8084/mqtt`;

<Connector mqttProps={mqtt_broker_ws}>

</Connector>

or 

<Connector mqttProps={mqtt_broker_wss}>

</Connector>

If it's not working still, please check on how you serve the service at 157.245.85.49:8084/mqtt. What kind of webserver do you use? The problem might be on the broker side. I notice you tried both ws and wss on the same port number. Do take note that a single port can only handle one protocol, not both.