Protect access to a Netlify site via GitHub Actions
Tags: github, netlify, ci, cd
Published: 2020-08-17 06:51:00

Recently I’ve published an article on [how to set up CI/CD with GitHub Actions and Netlify](https://abdessalam.dev/blog/ci-cd-github-actions-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.

![Netlify access control](https://dev-to-uploads.s3.amazonaws.com/i/wcb4kes2kzv9p6urru2y.png)

> 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`

![GitHub secrets](https://dev-to-uploads.s3.amazonaws.com/i/bwjo471ba4wvkc3fxjzo.png)

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**

![GitHub Actions deploy preview](https://dev-to-uploads.s3.amazonaws.com/i/4tmsmdcth4pxh8l4bjc3.png)

**Live password protected site**

![Live password protection site](https://dev-to-uploads.s3.amazonaws.com/i/v4k0ov8ng8hsq1g0rj3l.png)

## Useful links

- [Netlify password protection
](https://docs.netlify.com/visitor-access/password-protection)

- [Netlify custom headers](https://docs.netlify.com/routing/headers/#syntax-for-the-headers-file)

- [Basic authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme)

- [GitHub Actions](https://docs.github.com/en/actions)

- [sed command](https://www.digitalocean.com/community/tutorials/the-basics-of-using-the-sed-stream-editor-to-manipulate-text-in-linux)

Before you leave…
Thanks for reading! 😊