Frontend

TIP

Ongoing discussion about the frontend can be found hereopen in new window

Zigbee2MQTT has a built-in webbased frontend.

Frontend

To enable the frontend add the following to your configuration.yaml:

frontend:
  # Optional, default 8080
  port: 8080
  # Optional, default 0.0.0.0
  host: 0.0.0.0
  # Optional, enables authentication, disabled by default
  auth_token: your-secret-token
  # Optional, url on which the frontend can be reached, currently only used for the Home Assistant device configuration page
  url: 'https://zigbee2mqtt.myhouse.org'
1
2
3
4
5
6
7
8
9

To specify the auth_token in a different file set e.g. auth_token: '!secret auth_token', create a file called secret.yaml next to configuration.yaml with content auth_token: super-secret-token.

Nginx proxy configuration

In case you want to run the frontend behind a proxy you can use the following config as an example.

Due to WebKit Bug 80362open in new window, which prevents basic authentication from being used with WebSockets, the frontend will not work in WebKit-based browsers when this type of authentication is configured. This includes desktop Safari on Mac and all browsers and web views on iOS. To work around the issue, configure the frontend's auth_token to configure application-level auth and remove auth_basic from the web server config.

server {
    listen       80;
    server_name  zigbee2mqtt.mydomain.com;
    return 301   https://zigbee2mqtt.mydomain.com$request_uri;
}

server {
    listen      443 ssl http2;
    listen      [::]:443 ssl http2;

    # In case you want to use basic authentication:
    auth_basic "Login";
    auth_basic_user_file /zigbee2mqtt_htpasswd;

    ssl_certificate     /config/etc/letsencrypt/live/mydomain.com/fullchain.pem;
    ssl_certificate_key /config/etc/letsencrypt/live/mydomain.com/privkey.pem;

    server_name zigbee2mqtt.mydomain.com;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /api {
        proxy_pass         http://localhost:8080/api;
        proxy_set_header Host $host;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35