password protect pages

At a glance

The post is about a community member needing password protection on their pages to hide certain locations from public viewing, as requested by their client. The comments discuss various approaches to this, including hiding the pages from search results, using a password-protected URL path, and creating a pseudo-login dialog. The community members agree that this is not a secure solution, but rather a way to obfuscate the content. One community member provides a detailed implementation of the pseudo-login dialog approach, but notes that it is still not a secure solution and is just a way to protect against those who don't know the password.

88BitRazer

Really need to have password protection on pages please. My client has locations that need to be hidden from public viewing as requested by venue provider. Currently using WebFlow so their solution is perfect example for usecase.

18 comments

OOleg Isonen

Does your use case require actual safe login? if yes it would be better to have a proper membership login.

Otherwise if its not about truly being secure, but just hidden you could consider:

hiding the page from search results (checkbox in page settings)
naming the page with something people won't guess aka password

OOleg Isonen

password protected page where everyone uses the same password is not a real protection.

88BitRazer

Yeah I don't need real protection

88BitRazer

Just enough that if people did find it or if I wanted to stop people I could change the password.

88BitRazer

Just exactly like webflow's solution is perfect for my use case.

OOleg Isonen

in this case just using an unindexed page with a password as a path should work for you

OOleg Isonen

only inconvenience is that you can't link to that page

88BitRazer

something like www.url.com/venue/location-00010/password

88BitRazer

is that the suggestion rather than showing a login page before?

OOleg Isonen

yes, but once again its just obfuscation, not a protection, for protection or convenience better to use a proper personal login

AAzureDusk10

I took Oleg's approach one step further and made a pseudo-login dialog.

As Oleg said, it's obfuscation. So I plan to change the password portion of the URL 7 days after I give it to someone, and I've excluded the pages from search engines.

How it works:

User types in password and submits the form
The script does an HTTP request to see if the following page exists: case-studies/[password]/[current-page-slug]
If the request is successful, the password was correct and the user is redirected to that URL
If not, the user is shown an error message to say their password was incorrect

How to implement it:

Create a form with the 'class name' property set to login-form.
Set the form action to #
Add a text input with the 'class name' property set to login-password to the form.
Add a submit button to the form.
Directly after the form, add an HTML embed element. Switch on the "Client Only" property toggle.
Add this code snippet, changing the URL stored in targetPage to match the format of your password-protected pages

Plain Text

<script>
let loginForm = document.getElementById('login-form');
let passwordInput = loginForm.querySelector('#login-password');
const pageSlug = location.pathname.split('/').filter(Boolean).at(-1)

async function tryPassword(password, url) {
  const response = await fetch(url);
  if (!response.ok){
throw new Error("Invalid password");
}
window.location = url

}

loginForm.addEventListener('submit', (event) => {
event.preventDefault()

const inputtedPassword = passwordInput.value

const targetPage = "/case-studies/" + inputtedPassword + "/" +  pageSlug

tryPassword(inputtedPassword, targetPage);

})
 
</script>

This method allows you to have multiple login forms on the same page.

You'll want to code a nicer way of showing the error - I haven't quite gotten round to that yet.

AAzureDusk10

Here's a screen recording of it in action

OOleg Isonen

clever 🙂

OOleg Isonen

just for anyone reading - its still not secure at all, just a way to protect against whoever doesn't know the password

MMrShrek

@Oleg Isonen It's been a while since this thread was closed. But wanted to bring this up for a similar but different use case.

The use case is I have a design portfolio which would be shared with several people (and can be discovered through social and search). Anyone can access the portfolio. But when being accessed by recruiters, I'd like them to have the option to enter a password and access the case studies (which wouldn't be accessible by anyone who doesn't know the password). It's to ensure only select set of people can access the case studies.

At present it is being done through Webflow - https://shreyansh.design

MMrShrek

Would like to avoid a URL that can be easily shared

OOleg Isonen

Got it, sounds like a very similar story to the once we heard before, I agree its needed!

MMrShrek

Hopefully it is a near-future roadmap item 🤞

One of the roadblocks when migrating from Webflow to Webstudio

Add a reply

Join the Webstudio community

password protect pages