Member-specific Pages and Login Redirects

Article author
Duncan Hamra

Welcome to the guide on how to create member-specific pages and set up login redirects using Memberstack. This feature was previously known as member-specific pages. 

Method 1: Personalizing Template Pages

The first method involves using data attributes to personalize a template page for each member. This allows you to use Memberstack as the CMS for text data and links. To learn more about this method, check out our article on personalizing template pages with data attributes

Method 2: Creating Specific Pages

The second method is to manually or automatically create specific pages for each member. You can automate this process using webhooks, Zapier, or Make. To learn how to create specific pages for your members, follow the steps below. 

login_redirect.gif

Add a Member Specific Login Redirect in Memberstack

  1. Go to the Members page and select the member for whom you want to create a specific page.
  2. Scroll down and open the "Login Redirect" dropdown.
  3. Enter a page slug starting with "/" for the specific page. For example, you can use
    /welcome/frank
  4. Click Save, and you're done! The next time the member logs in, they will be redirected to their specific page. 

Securing Member-Specific Pages

To prevent unauthorized access to member-specific pages, follow these steps:

  1. Make the URL unguessable to avoid other members stumbling upon it accidentally. For example, use a URL like /welcome/frank-n2938n239un109828n.
  2. Add the following code before the closing </body> tag in your CMS collection or static page. 
     <script>
      const accessDeniedPath = "/access-denied";
      
      window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
        if (member && member.loginRedirect) {
          let redirectPath = member.loginRedirect;
          let currentPath = window.location.pathname;
          
          if (currentPath !== redirectPath) {
            window.location.href = redirectPath;
          }
        } else {
          window.location.href = accessDeniedPath;
        }
      });
    </script>
  3. Remove or modify your sitemap to prevent search engines and savvy browsers from accessing the member-specific pages. This is a best practice when using Memberstack.
  4. Remove any public links that point to the member-specific page.

By following these four steps, you can ensure that your member-specific pages are as secure as Google Photos!

Create a Dynamic Dashboard Button

You can use the data attribute data-ms-action="login-redirect" to create a button that dynamically redirects the user based on their login redirect. This button will only be visible when a member is logged in. 

Using Make or Zapier

If you have automations in place to create a CMS page for each member you can use Make.com or Zapier to dynamically update a Member's login redirect on the fly. This video will explain how in under 1 minute. 

 

Keywords: Member-specific pages, user-specific page, user-specific, member-specific 

Was this article helpful?

Comments

27 comments

  • Comment author
    BMH Admin

    How do you link back to a member's specific login page if you have multiple pages under gated content? 

    0
  • Comment author
    Duncan Hamra

    BMH Admin You'll need to link your gated content pages together or create a "hub" page that links out to all of the pages.

    0
  • Comment author
    Nicholas Platt

    Is there any way to use this Login Redirect feature for user-specific links? I want to be able to redirect a user to where I want based on custom information store in their profile. 

    1
  • Comment author
    Nicholas Platt
    • Edited

    I'm looking for some code similar to this, but I can't get it to work:  

    <script>
      memberstack.onReady.then(function(member) {
        var url = member.attributes["post-discovery-attributes-2a"];
        var els = document.querySelectorAll("[data-memberstack-attribute='post-discovery-attributes-2a']");
        for (var i = 0; i < els.length; i++) {
          els[i].href = url;
        }
      });
    </script>

    1
  • Comment author
    Duncan Hamra

    Let's see... something like this? https://docs.memberstack.com/hc/en-us/articles/10125200009627-Dynamic-Links-using-Custom-Fields

    1
  • Comment author
    KC Katalbas

    Is there a way to set member-specific sign up pages upon sign up?

    Say its set to ' /980s9s29we32223fe8v09-frank ' in login redirect on default but I want to be 
    ' /welcome/980s9s29we32223fe8v09-frank ' 

    Is there a way to automate that within memberstack?

    1
  • Comment author
    Nicholas Platt

    Hey KC Katalbas, you may just be trying to edit the login redirect section of Memberstack which is explained here: https://docs.memberstack.com/hc/en-us/articles/7384608370715-Setting-Redirects-for-Signup-Login-Logout

     

    This might be overkill but watch this tutorial which helped me figure out how to drive users to custom webpages after signup: https://www.youtube.com/watch?v=ukmzHvYfs-8&t=877s&ab_channel=SurvivingYour20%27s

    I don't follow his solution 100% because the Zapier Zaps take time to create the profile and get everything setup. Instead, I send the user a confirmation email with the signup link which gives Zapier time to process all of the steps I have setup.

    1
  • Comment author
    Duncan Hamra

    Hey KC Katalbas 👋

    It's possible to update a member's login redirect using Make or Zapier, but not automatically inside Memberstack.

    And can you show me where it says it's set to '/980s9s29we32223fe8v09-frank' by default? I'm not 100% sure what you mean. 

    The good news is you're able to enter whatever page slug and path structure you want 🎉 So starting with /welcome/ shouldn't cause any issues. 

    0
  • Comment author
    Duncan Hamra

    And thank you Nicholas Platt for sharing those solutions 🙏 

    0
  • Comment author
    KC Katalbas

    Thanks Duncan Hamra! I ended up using Zapier. I was a silly goose and had already set up a zap for it, but thought it was going through on default. Thanks Nicholas Platt as well! 

    1
  • Comment author
    William Sayer

    Thanks for the article Duncan, however...
    I have copied and pasted your code exactly but keep getting this error: 
    Uncaught TypeError: Cannot read properties of undefined (reading 'getCurrentMember')

    1
  • Comment author
    Duncan Hamra

    William Sayer you're welcome!

    Sorry to hear it's not working for you 🤔 Let's see if we can get that fixed for you.

    Where did you paste the code on your site? it's important that it lives in the "Body" code section (so that the Memberstack header script has time to run first).


    0
  • Comment author
    William Sayer

    Thanks for the reply Duncan Hamra,
    I did put in the "body" code area - in fact I've explained the problem in more detail in the following thread:
    https://docs.memberstack.com/hc/en-us/community/posts/11684122425499/comments/13089052469403

    Thanks for the help!

    0
  • Comment author
    Yash Kothari

    Hi there, I just wanted to flag that this seems meaningfully less secure than the 1.0 implementation (where member-specific pages were gated only to people who were logged in, not based on unique link). My understanding with this implementation is that anyone with the member-specific URL will be able to access that person's data, even if they are not logged in. Is that right? If so, is there a way to work around this?

    1
  • Comment author
    Duncan Hamra

    Hey, Yash 👋 Thank you for posting and helping to clarify this. 

    If a non-member attempts to access a member-specific page they will get the "Access denied" redirect. If a logged-in member tries to access another member's page they will get redirected by the code under the "Prevent Others from Accessing the Page" section.

    To say a bit more: this feature is equally as secure as member-specific pages in Memberstack 1.0.

    However, in this version, we tried to make the code to "Prevent Others from Accessing the Page" more transparent. In version 1, this code was included automatically. In 2.0 we are asking you to add the code so you can see exactly how it works. 

    I hope that all makes sense. Thanks again for commenting 👍

    0
  • Comment author
    Ilyas Boulmane

    I have built a member-specific dashboard for my logo design agency where clients can see all their orders and details using Memberstack and Webflow CMS Orders Collection. The problem is, when a client clicks on an order in the dashboard it takes him to the order page and the order page is accessible to everyone.

    1
  • Comment author
    Duncan Hamra

    Hey Ilyas Boulmane 👋

    How many clients do you have? One idea is to create a unique plan for each of your clients. From there, you can use our gated content feature to do some additional content gating. 

    You can use the "starts with" selector and gate any content that starts with "/orders/client-A-" or "/orders/client-b-" etc. 

    0
  • Comment author
    Ilyas Boulmane
    • Edited

    Hey Duncan Hamra, I'm going to receive many clients and multiple orders. I can't manage to do this manually, I have to handle the projects, and my staff.

    0
  • Comment author
    Duncan Hamra

    Understood 👍 In that case, I recommend following the steps in the article above. So long as the URL is unguessable, you remove public links, and you remove your sitemap, then the only way someone could get to an order page is by clicking on a link in their specific dashboard or by sharing the link with someone else. 

    0
  • Comment author
    Sebastian Brühl

    Hey Duncan Hamra

    I have a client requesting a certain functionality and I was wondering if thats possible with Memberstack. He created custom marketing landing pages as pitches with the customers name, logo, tailored suggestions & (sensible) information towards them. Therefore, a cms is set up with different customers. Right now, these pages are accessible to everyone with the link and the url looks something like this: nameofclientscompany.com/pitch/customername 

    Since he doesn't want other people to find the marketing pages for a variety of customers, he wants to protect these cms inner pages links with a custom password for each cms collection page, that the customer can set once he logs in. 

    To demonstrate: 

    nameofclientscompany.com/pitch/customername1 should have the password 12345678 that the customer set for this domain

    nameofclientscompany.com/pitch/customername2 should have the password hello123 that the customer set for this domain

    and so on.. 

    Also, the client wants the customers to only be able to visit that one marketing landing page cms url thats tailored towards him and not the others of course.

     

    I hope this all makes sense. Thanks in advance for your answer. 

     

    Cheers

     

     

    1
  • Comment author
    Duncan Hamra

    Hey Sebastian Brühl 👋 Apologies for the slow reply, I missed your message. 

    What you want to do should be possible by following the instructions at the top of the page. You can manually create an account for each customer in Memberstack, enter their email and create a password for them, and then share the password via email. 

    You can prevent customers from accessing other customers' pages with the code at the bottom of the article. Let me know if you have any questions! duncan@memberstack.com

    0
  • Comment author
    Goosetlk null

    Hello Duncan, How can I automate member-specific pages using zapier?

    0
  • Comment author
    Duncan Hamra

    Goosetlk null Great question! I just updated the article https://docs.memberstack.com/hc/en-us/articles/7385311945499#automation

    1
  • Comment author
    Goosetlk null

    Thanks Duncan! Duncan Hamra

     

    0
  • Comment author
    Joao Filipe

     <script> const redirectTo = "/access-denied"; window.$memberstackDom.getCurrentMember().then(({ data: member }) => { if (member && member.loginRedirect) { let redirect = member.loginRedirect; let currentPath = window.location.pathname; if (currentPath !== redirect) { window.location.href = redirectTo; } } else { window.location.href = redirectTo; } }); </script>

    Is this code correct?

    Shouldn't it redirect to "redirect" instead of "redirectTo" if everything is ok? Please make the variables a bit more distinct if possible

    0
  • Comment author
    Josh Lopez

    Hey Joao Filipe 👋

    The code you provided is almost correct. However, there seems to be a small mistake in the logic. Instead of redirecting to the "redirect" variable, it should redirect to the "redirectTo" variable. Here's the corrected code with more distinct variable names:

    <script>
      const accessDeniedPath = "/access-denied";
      
      window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
        if (member && member.loginRedirect) {
          let redirectPath = member.loginRedirect;
          let currentPath = window.location.pathname;
          
          if (currentPath !== redirectPath) {
            window.location.href = redirectPath;
          }
        } else {
          window.location.href = accessDeniedPath;
        }
      });
    </script>

    In this code, I've renamed the redirectTo variable to accessDeniedPath to make it more distinct and reflect its purpose. Now, if the member is logged in and has a specific login redirect set, it will redirect to that path. Otherwise, it will redirect to the accessDeniedPath (previously "redirect") if the current path is different from the redirect path.

    Let us know if you have any further questions!



    0
  • Comment author
    Joao Filipe

    Thank you - so could you check the code from the main article above? It looks that is pointing to the same variable

    0

Please sign in to leave a comment.