I am trying to add a paid WMS layer secured by username and password to my Leaflet project. Both, the Leaflet project and the WMS server are HTTPS encrypted. What would be a proper way to do IT? I've researched quite a bit but did not find a solution yet. The project is htaccess protected so I would be fine to have the credentials stored in the js.

  • 1
    You have to find solution to retrieve WMS layer without Leaflet, then you can use it with Leaflet. As such, question is not GIS related and so more suitable for StackOverflow site.
    – TomazicM
    Commented Jul 2 at 7:47
  • 1
    Do you mean without revealing the username and password? Also worth considering whether the terms of use of the paid for service allows you to share the service through a third party application
    – nmtoken
    Commented Jul 2 at 8:49
  • Can you elaborate why the WMS should be received without Leaflet? Is it just not possible? I have no problem revealing the username and password. The Leaflet project is just for internal purposes on a htaccess locked webserver. Commented Jul 2 at 10:13
  • 1
    You should test WMS authentication without Leaflet. Authentication has nothing to do with Leaflet. Once you know how to authenticate, it will be easy to implement it in Leaflet. Of course it's possible, it's just not GIS related question.
    – TomazicM
    Commented Jul 2 at 13:51
  • 2
    If it's internal use only, you could set up a proxy server using the paid for WMS as a data layer, and your application could access your proxy server with no authentication.
    – nmtoken
    Commented Jul 2 at 14:46

1 Answer 1


If it is plain Basic Authentication you can use the leaflet-wms-header plugin and set the Authorization header as base64 encoded string like UserName:Password using the btoa method.

Something like:

const userName = "Foo";
const password = "Bar";
const base64UserNameAndPassword = btoa(`${userName}:${password}`);

const wmsLayer = L.TileLayer.wmsHeader(
        layers: 'ne:ne',
        format: 'image/png',
        transparent: true,
        { header: 'Authorization', value: `Basic ${base64UserNameAndPassword}`}

Not the answer you're looking for? Browse other questions tagged or ask your own question.