Streaming live at 10am (PST)

How to Effectively Password-protect CMS collection pages


#1

Hey guys I’m looking for a workable design approach to effectively password-protect certain CMS collection items (“members only content”) but allow public access to other specific CMS collection items.

I’m planning to do this through some redirects through a password-protected site folder, but running into some issues.


Here is my public share link: LINK
(how to access public share link)


#2

Could you summarise the issue here instead of having to watch a 6 minute video?


#3

Hey Samliew, sure thing. The video hits all the angles though, and I kept it as concise as possible.

The main issues are;

  1. Difficulty forming the redirect link, e.g.
    /member/pub/?id=cms-slug

    a) The collection list doesn’t support binding data to custom link attributes, and in any case, I can’t customize onclick= or href=

    b) I could create this via jquery however I can’t place custom code inside of a link block. This can be conquered, but looking for an elegant way to do this.

  2. Even with a working link into a password-protected folder, the password page is stripping the querystring data, looking for a means to allow that through.

  3. Generally, I’m looking for any kind of Webflow script solution that can;

    a) detect whether the user is currently logged in at a specific path/page, e.g. “/member”, and perform logic accordingly, like redirection. Obviously security is limited here, since jscript could be disabled.

    b) provide some form of pseudo-security for CMS collection page items, since that’s not yet supported in webflow itself.


#4

Well this looks possible, but it would take quite a bit of custom code…

The workaround for this is to attach event handlers via custom code. E.g.:

$('.mylinks').click(function() {
  // do something
  alert( $(this).attr('href') );
});

Yeah, (a) can be placed in the page custom code and work for all links of the same class.

You’ll need custom code on this page to get the referring page, or if that’s not possible, then you’ll need to set cookies on the links page on link click so you can get it on the password page.


#5

Excellent, thanks a ton Samilew, that pointed me in the right direction.
I have a decent emulation of secure CMS collection pages now, which is a much smoother user experience.

Instead of my original plan to redirect through a password-protected page, I’ve found a way to determine site-wide whether the user is currently logged-in to my folder, and handle the jQuery click() appropriately that way. Logged in users get to see the CMS item page directly, non-logged-in users get the login & enrolment screen.

Incidentally I scrapped the cookie approach altogether, since webflow’s wf_auth_page cookie is marked HTML-only.


#6

@memetican - I’m new to Webflow, so if I understand correctly, with the current system (without knowing code) one is not able to password protect these CMS pages, correct? I find myself needing to have several portfolio work on my website but I need to have it be password protected. This forum post is about protecting each CMS page through custom coding, is that correct? If so… how does this work for you? Is it a good experience? Is it hard to achieve? I would love your input on this and possibly help out! :slight_smile:
Thank you for your response in advance.

Best,


#7

Hi Jonatan, yes, that’s correct.

I have a Wishlist item out on this if you’d like to add your vote;
https://wishlist.webflow.com/ideas/WEBFLOW-I-1301

The solution I have so far is pretty limited- it can detect whether you’re logged in to a specific page or folder, and based on that, it can handle navigation, So essentially, I’m “security” the CMS pages by controlling who gets to click the links to them.

The pages themselves are not actually secured, so if you have the URL, or Google picks them up, it currently can’t block those users.

If you’re adept at js/jQuery, you might be able to fix the page-load-timing issue I’m having that would fix that.