How to conditionally show login & My Account buttons and restrict page access to specific Memberstack users in Webflow? Answered

Post author
Andrés Esquivel

Hi, I have a couple of questions that I hope y’all can help me answer:

  1. Is there a way to hide the Sign In button if a user is already signed in?
  2. I have a My Account button that has a Login-Redirect attribute, is there a way to hide that if a user is not signed in?
  3. I’m working with the Webflow Collections for users, meaning that each new collection is a new user. I’ve set the login-redirect as the slug of each Collection ID. Is there a way to make it so that the page can only be seen by the user that matches the Memberstack ID? Right now, technically anyone could access each other’s account info.

Comments

1 comment

  • Comment author
    Raquel Lopez

    Hi Andres

    1. Yes, there is an easy way using attributes. You can look up at this documentation
    2. Same answer as above 🙂
    3. You could add some restrictions using custom code in the frontend... But still it would be kind of vulnerable

    Let me give you an example so you have an idea on how to achieve it

    (async function() { // First let's get the memberId and Webflow's collection id const member = await memberstack.getCurrentMember(); const memberId = member.id const collectionId = window.location.pathname.split('/')[1] // assuming the user is in www.domain.com/collectionId/ if(collectionId === memberId) { // handle member and collection id are the same logic like displaying the content } else { // displaying a wall blocking the view of the components or maybe handling a redirect for the correct page } })()

    However I wouldn't recommend storing users data in Webflow as a CMS collection or a CMS item in the long run. As your user base grows it will be harder to maintain, and also harder to migrate. 🤔

    I'm not sure what's your architecture but Webflow has strict limits on CMS items and also the API request rates...

    0

Please sign in to leave a comment.