Password protection in static sites

#1

Hi there!:wave:t4:

I’m wondering if it would be possible to protect some pages (for example work detail pages from the 11ty course website) with a password?

Have found this but it’s very easy to bypass the protection https://github.com/scottishstoater/protected-github-pages

I’m a designer and my knowledge in front-end development is really scarce but I’m trying to build my own portfolio website and would be awesome to have the ability to protect some work projects with a password. Any tips?

1 Like
#2

I’ve seen this one work well. https://github.com/matteobrusa/Password-protection-for-static-pages Have you tried that one?

#3

Nop! Will give it a try, thanks!

1 Like
#4

Hummn, unfortunately, couldn’t figure this out. Don’t know if the start-eleventy-from-scratch folder structure suits this approach, have tried directly in the dist folder and couldn’t make it work. Do you (or others) have any more tips? :thinking:

Any thought on this Andy? How would be possible to protect with a password some item works from https://issue33.com/work/.

#5

If your hosting your site on Netlify, they have a password protection system available on their Pro plan.

This would allow you to create public pages and private pages that you can set passwords for.

#6

I haven’t used this so I’m somewhat guessing but seems to me like the key thing is setting the permalink to the password hash. If you use javascript frontmatter you could do something along these lines:

---js
{
  title: "Work Title",
  permalink: function() {
    const sha1 = require('sha1')
    const password = 'YOUR_PASSWORD_HERE'
    return sha1(password)
  }
}
---
Rest of template body

You could then include the relevant HTML and CSS from that repo to create a log in page.

1 Like
#7

Hey @accudio,

That’s my repo you posted and you’re right, it’s not a secure method at all and more of a deterrent. It fit a use case for me years ago but I think it’s still valid as long as the dev knows it’s limits and how easy it is to bypass.

That being said, for the simplest secure password protection I think you’d be better off using some form of Basic Auth.

If you’re using Netlify their entry level paid tier offers this: https://docs.netlify.com/visitor-access/password-protection/.

I can’t recommend Netlify enough :slight_smile:

Best of luck!

1 Like
#8

Just popping in to say with netlify you can have a _headers file and only target certain urls with rules, so it’s very possible to do basic auth like that :+1:

3 Likes