Join the Webstudio community

Updated last year

Password-protecting pages in webstudio

At a glance

The community member is looking for a way to password-protect certain pages in Webstudio to restrict access to sensitive case studies in their UX portfolio. The comments suggest a few options:

- Using a simple JavaScript embed to password-protect pages (though the details are not provided).

- Creating "secret" pages that are not linked and hidden from indexing.

- Combining a login page with a query parameter-based password protection system, potentially using Cloudflare Workers and Routes.

The community member seems interested in the Cloudflare-based approach and plans to explore it further. Additionally, they express enthusiasm for Webstudio's features and have purchased a lifetime deal for it.

Useful resources
Morning! Is there any way to password protect certain pages in Webstudio?

I'd love to build my new UX portfolio in Webstudio but I need to be able to restrict access to sensitive case studies. It's the only thing stopping me from moving from Webflow
1
A
O
A
8 comments
Hey AD,

Not natively but this might be something that can be done with a simple JS embed. I'll try get back to you on this today when I get some more time. Otherwise a quick chatGPT request should give you the code needed πŸ™‚
If you want a real protection, there is nothing you can do at the moment
You can just avoid posting sensitive data there and use something else to display it after login using html embed.


Effectively you are talking about gated content and that's only possible with 3rd party tool.
Simpler alternative is just secret page that isn't linked and hiding it from indexing.
Hey Alex and Oleg, thanks very much for your responses.

Unlinked pages that are hidden from indexing sounds like it could work. I could rotate the password by periodically changing the URL of the pages. I'll try working in Webstudio today and see how it goes. Thanks!
Hey @AzureDusk10
I was curious about how to achieve this.
My domain is handled by Cloudflare and I managed to password-protect a page by using Workers with Routes set to a specific path of my website.

For example, if you try to access the page https://jptrinh.com/fr you will get denied. But adding the query parameter password with the right value, you can access it : https://jptrinh.com/fr?password=123

Not the most user-friendly, but I guess it gets the job done?
Thanks @jptrinh , that sounds like an interesting option! I could combine this approach with a login page before that, where the user enters the password into a form and then hits submit. Whatever password they entered gets pushed to the target page's query parameters. If they entered the right password, they view the protected page. If not, they get an "access denied" page. This might give more of an illusion of security, because the user has to physically type in a password (even if they could just open the link directly), and would allow linking to the login page publicly.

Will have to look into Cloudflare Workers and Routes as I've never used it before. Thanks for the suggestion!
Just wanted to say I've been using Webstudio all day and I love it.
  • The designer mode is incredibly fast and responsive. Like, incredibly so. Wow!
  • So many thoughtful touches for advanced dev, like the "Properties" panel
  • The accessible Radix components are great! Especially the dialog. So nice to have this baked in.
  • Design tokens and local styles are so much more efficient to work with than Webflow's class system. It's way more fun and way less tedious.
  • Can actually add an HTML button element without custom code, hooray for accessibility again
I purchased a lifetime deal and so did my partner. I can't wait to launch my portfolio. Will post it in this server when it's online.
Add a reply
Sign up and join the conversation on Discord