Protected content in both html and markdown content

Hi all,

Netlify is great and I just started learning about it. I have successfully followed the instructions here - https://www.netlify.com/blog/2020/04/22/automate-order-fulfillment-w/stripe-webhooks-netlify-functions/ and have deployed my site.

However, I now need to extend the functionality a little. I need to create multiple pages and each page needs to be tagged with some metadata that indicates if it is visible to free, pro, or premium members.

My question is this - how can I setup a folder that will contain markdown files to which a user can navigate to from the main page and the content will be shown if the subscription plan allows it and if not, a default page will be shown.

It looks like the eleventy template framework is being used in the example and my question relates more to that than netlify but really I am asking how to implement the loadSubscriptionContent() function for each markdown file.

Appreciate any help. Thanks much.

Jayaram

I might not have got the whole gist of the question however, could you have authentication via identity, then when a purchase or subscription is made you trigger a serverless function which assigns metadata to that user, you could assign a Role as “Subscriber” and add your own metadata such as the date of expiry if you have that info, in your code to load the content you can check user.app_metadata.roles includes Subscriber AND it is not expired?
You can use tags or markdown files, or use protected routes you can code yourself in javascript, following the react-router pattern or just use react-router if you’re using react. (there’s lots of examples online)

Sorry if this was not the question you were asking! :slight_smile:

Thank you for the answer. I am not using React and I don’t want to.

The sample code I have does have role, and a serverless function called
‘get-protected-content’. I include below the code which changes the content based on the role for 1 page, index.html.

 const loadSubscriptionContent = async (user) => {
 const token = user ? await netlifyIdentity.currentUser().jwt(true) : false;

  ['free', 'pro', 'premium'].forEach((type) => {
    fetch('/.netlify/functions/get-protected-content', {
      method: 'POST',
     headers: {
       Authorization: `Bearer ${token}`,
     },
     body: JSON.stringify({ type }),
   })
     .then((res) => res.json())
     .then((data) => {
       const template = document.querySelector('#content');
       const container = document.querySelector(`.${type}`);

       // remove any existing content from the content containers
       const oldContent = container.querySelector('.content-display');
       if (oldContent) {
         container.removeChild(oldContent);
       }

       const content = template.content.cloneNode(true);

       ...

       container.appendChild(content);
     });
 });
};

I am looking for help with how best to modify this so the role based filtering is done for every page (whether it is .html or .md).

hey @bjayaram!

Excited to see you using serverless - i think that digging into your code goes a bit beyond how we can assist (as Netlify specific support engineers) BUT I encourage other community members to keep working with you on this, and please do share a solution if you come across one! :smiley: