Password-Protecting Collection Pages for Specific CMS Items

Webflow does not natively provide a way to password-protect specific CMS item pages, but there is a workaround to achieve this without the need for complex programming or 3rd party services.

Cloneable;

https://webflow.com/made-in-webflow/website/cms-page-login

Important Notes

• This solution is 100% Webflow native, with only a tiny bit of custom code
• It may not be suitable for highly complex Collection Page designs which make extensive use of collection lists
• It allows for a distinct password for each protected page, or one password for all of the protected pages
• It is effective, but it cannot provide full content security. See the video to understand why.

Other Approaches

Modal Overlay

For very simple, insecure solutions, you could build a large modal overlay that blocks your page from view. Entering the right password would then delete the overlay element using Javascript, and make your page visible.

This is very insecure, but may be useful for simple marketing solutions and portfolios.

Reverse Proxy

A reverse proxy can provide a much more secure solution for your content, and can be adapted to different requirements ( user login, v. password-only ).

Sygnal builds reverse proxy solutions for our clients which can password-protect and content-gate any specific page on your site. Contact us for details.

Notes

Discussion of CMS Item-Level Gating, Challenged, and Solutions

In Webflow, password protection is a page-level settings. In CMS pages, this means the password applies to all of the item pages in the collection, with no direct ability to password-protect specific items only.

To achieve item-level passwords you'd need to build a custom solution based on your needs.  There are two main factors;

• The level of security you need, i.e. is it just a simple marketing deterrent ( low security ), or do you need actual content protection ( medium security ), or content security with individual user-access grants that you can revoke ( higher security )?
• Whether you have one password that gives access to all of your secured pages, or whether there are individual passwords for each.

The low security approaches are basically to toss a password into a field in the CMS, and then when it exists, you display a full-screen dialog over top of your page content until the password is entered.  It's low security because your content is still there, and it can be thwarted with developer tools, and is dependent on JS being enabled in the browser.  

Medium security approaches are to actually gate content access so that only those with the password can access it.  This requires a reverse proxy, or else storing the content somewhere else and fetching it after server-side authorization.

The higher security approaches have the same design approach as the medium security systems, but adds individual user accounts and a registration process. This means a reverse proxy plus a membership framework like Netlify Identity or Webflow User accounts ( + some special engineering ).