Password protection for subdomains and specific pages

Support
, , ,
#1

I’m trying to find a way to set password protection for subdomains and specific pages for my Gatsby website. I used netlify.toml file to switch _headers files for production, branch-deploy and preview-deploy contexts, but it’s not working (headers are not being set). Did I miss anything?

My folder structure looks like this:

... other files
├── public
│   ├── _branchdeploy_headers
│   ├── _deploypreview_headers
│   └── _headers
├── static
│   ├── _branchdeploy_headers
│   ├── _deploypreview_headers
│   └── _headers
└── netlify.toml

Netlify.toml:

[context.branch-deploy]
  command = "yarn build && cp static/_branchdeploy_headers public/_headers"

[context.deploy-preview]
  command = "yarn build && cp static/_deploypreview_headers public/_headers"

_headers:

/style-guide
  Basic-Auth: admin:password

_branchdeploy_headers & _deploypreview_headers:

/*
  Basic-Auth: admin:password

Gatsby info:

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
    Yarn: 1.19.2 - ~/.nvm/versions/node/v11.14.0/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v11.14.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.2
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.17 => 2.19.17
    gatsby-background-image: ^0.9.12 => 0.9.17
    gatsby-cli: ^2.5.12 => 2.8.29
    gatsby-image: ^2.0.29 => 2.2.41
    gatsby-plugin-google-tagmanager: ^2.1.25 => 2.1.25
    gatsby-plugin-manifest: ^2.2.41 => 2.2.41
    gatsby-plugin-netlify: ^2.1.32 => 2.1.32
    gatsby-plugin-netlify-headers: ^1.0.1 => 1.0.1
    gatsby-plugin-offline: ^3.0.34 => 3.0.34
    gatsby-plugin-react-helmet: ^3.0.6 => 3.1.22
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0
    gatsby-plugin-sass: ^2.0.11 => 2.1.28
    gatsby-plugin-sharp: ^2.0.20 => 2.4.5
    gatsby-plugin-sitemap: ^2.2.27 => 2.2.27
    gatsby-remark-responsive-iframe: ^2.0.9 => 2.2.32
    gatsby-source-filesystem: ^2.0.20 => 2.1.48
    gatsby-transformer-sharp: ^2.1.13 => 2.3.14
  npmGlobalPackages:
    gatsby-cli: 2.8.29
    gatsby: 2.5.7
#2

Looks good at first glance. Mind linking us to a deploy that you think should have the headers, so we can look at it in place and see if we can figure out why they didn’t get applied?

#3

@fool it’s actually working right now on my preview branch!

  1. Is there any way to test this feature locally before merging it into production? I have already tried running netlify dev, but I don’t see any effect.

UPDATE:

  1. I merged it into production, dev, staging and qa.
  • production is not password protected (expected) and doesn’t prompt for the password on the /style-guide.
  • dev is password protected (expected).
  • staging is not password protected.
  • qa is not password protected.
#4

@fool working URL is https://dev.bvaccel.netlify.com/ and not working URL is https://staging.bvaccel.netlify.com/

#5

Can confirm that your latest staging deploy (ID 5e4b6678f61242adff8e749f) does not have any headers at all that mention Basic-Auth (instead it has several dozen other headers, unlike dev which has ONLY the Basic-Auth rule) - so sounds like your script to inject them is not being called or performing correctly.

Perhaps you have a [context.staging] section that is used instead of [context.branch-deploy] covering it as expected?

#6

@fool thanks for looking into it! I’m not using [context.staging] at all. My netlify.toml includes only:

[context.branch-deploy]
  command = "yarn build && cp static/_branchdeploy_headers public/_headers"

[context.deploy-preview]
  command = "yarn build && cp static/_deploypreview_headers public/_headers"

I was expecting my staging and dev behave exactly the same way after configuring branch-deploy in netlify.toml.

If this will help I’m using gatsby-plugin-netlify https://www.gatsbyjs.org/packages/gatsby-plugin-netlify/

Headers Build fails on context.branch-deploy
#7

Yup, I’d think that should work as configured. I can see we didn’t execute that command back on 17 Feb when you did your staging build:

https://app.netlify.com/sites/bvaccel/deploys/5e4b6678f61242adff8e749f

shows

8:23:31 PM: Executing user command: yarn build

Perhaps you changed config since then?

#8

I have redeployed staging & qa and it’s working now. Though I’m still unclear why it wasn’t working before, because I haven’t changed the code since then and this code has already been merged on staging and qa.

@fool Thanks a lot for the help!

1 Like
#9

glad its working now, @Vladimir!

#10

@perry @fool Actually I found one more issue. /style-guide route is not password protected.

In my _headers file I have this line of code, but it has no effect:

/style-guide
  Basic-Auth: login:pass123

https://bvacommerce.com/style-guide/

Does netlify dev support headers locally?

#11

Hi, @Vladimir, the _headers file for the currently published deploy of that site does not contain that line. The only headers rule matching that is this one:

/style-guide/
  Link: </webpack-runtime-513442ae59688673dcb3.js>; rel=preload; as=script
  Link: </styles-7e6760e9304e961dff60.js>; rel=preload; as=script
  Link: </commons-0b764eec16643e9979e3.js>; rel=preload; as=script
  Link: </app-6f5640454fdbbcd9d279.js>; rel=preload; as=script
  Link: </styles-7e6760e9304e961dff60.js>; rel=preload; as=script
  Link: </commons-0b764eec16643e9979e3.js>; rel=preload; as=script
  Link: </component---src-pages-style-guide-js-e21711548019ace27cac.js>; rel=preload; as=script

This can be confirmed by downloading the deployment files using the button here shown in the screenshot below:

download-deploy-button-small

If there are other questions about this, please let us know.