DEV Community

loading...
Cover image for Protect access to a Netlify site through GitHub Actions

Protect access to a Netlify site through GitHub Actions

itsabdessalam profile image Abdessalam Benharira Originally published at abdessalam-benharira.me Updated on ・2 min read

Recently I’ve published an article on how to set up CI/CD with GitHub Actions and Netlify (in French). 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.

Netlify access control

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
Enter fullscreen mode Exit fullscreen mode

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

GitHub secrets

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
Enter fullscreen mode Exit fullscreen mode

Voilà 🎉

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

GitHub Actions deploy preview

GitHub Actions deploy preview

Live password protected site

Live password protection site

Useful links

Before you leave…
Thanks for reading! 😊

Discussion (1)

pic
Editor guide
Collapse
888ba8 profile image
888ba8

Hi @Abdesselam, will this work on the free versino of Netlify, and will this also protect access to my non-html files, such as .PNG and .PDF? Thanks.