Abdessalam Benharira

Posted on Aug 17, 2020 • Updated on Jul 29, 2022 • Originally published at abdessalam.dev

Protect access to a Netlify site via GitHub Actions

#github #netlify #ci #cd

Recently I’ve published an article on how to set up CI/CD with GitHub Actions and Netlify. When working on my last project I needed to password protect develop and staging sites. Netlify already has solutions for access control like OAuth or password/JWT secret restriction or even through _headers file with basic authentication. But what I wanted was to password protect my sites at the beginning with a single access and then add other accesses on need and maybe only for some routes, all managed through GitHub actions and deployed for each site.

Password protection only works with the paid Netlify plans

Selective protection with basic authentication met my needs very well. The only problem is that at the beginning I had to push _headers file on GitHub with credentials, which did not seem very clean to me. So I thought it would be better to use GitHub environment variables in _headers file. The idea is to push this file without any credentials but simply a string that will be replaced. Here are some steps

1- Push _headers file with Basic-Auth followed by a string that will be replaced.

/* 
 Basic-Auth: SITE_ACCESS_USER:SITE_ACCESS_PASSWORD 
    X-Frame-Options: DENY 
    X-XSS-Protection: 1; mode=block 
    Referrer-Policy: no-referrer 
    X-Content-Type-Options: nosniff

What will interest us is Basic-Auth: SITE_ACCESS_USER:SITE_ACCESS_PASSWORD. You can also notice that with /* we will password protect all website routes. We could also set it only for specific routes and this is the advantage of this solution.

2- In your Github secrets add SITE_ACCESS_USER and SITE_ACCESS_PASSWORD

3- In your workflow add a Setup Netlify access step in which we have to retrieve SITE_ACCESS_USER and SITE_ACCESS_PASSWORD variables through GitHub secrets. Then we try to find SITE_ACCESS_USER:SITE_ACCESS_PASSWORD matching pattern and replace it with our credentials with sed command.

- name: Setup Netlify access
  env:
    SITE_ACCESS_USER: ${{ secrets.SITE_ACCESS_USER }}
    SITE_ACCESS_PASSWORD: ${{ secrets.SITE_ACCESS_PASSWORD }}
  shell: bash
  run: sed -i.bak "s/SITE_ACCESS_USER:SITE_ACCESS_PASSWORD/$SITE_ACCESS_USER:$SITE_ACCESS_PASSWORD/g" $(pwd)/public/_headers && rm $(pwd)/public/_headers.bak

Voilà 🎉

Here is the full code for the GitHub workflow: https://gist.github.com/itsabdessalam/ee5dfe83d832bf5015b096016cc923f4

GitHub Actions deploy preview