Secure File Downloads with Webflow and MemberStack

Webflow is amazing. MemberStack is fantastic.

But there is no native solution from either service to secure your file downloads, yet still allow the flexability of only your logged in members to download those files 😡

"I'm creating PDF files for my users. It's sensitive information. I need to securely protect those files, yet still allow my users to download them."

But…what if you could?

What if you could continue using the tools that already work well for you, yet extend them by providing this missing feature - Secure File Downloads.

Well, now you can 😎

I’m combining Integromat and Amazon Web Services (the industries gold standard) to allow your logged in members to download files 👍

To do this, I’m using…

• ◦ Webflow
• ◦ MemberStack
• ◦ Integromat (free account)
• ◦ Amazon Web Services - AWS (free account)

For this walk through we are going to verify, directly with MemberStack, that every time someone clicks to download a file, they are a logged in user on your site.

If they bypass your “hidden” content and try to download your files, they can’t 😎

Add some muscle 💪 to your Webflow site by setting up Secure File Downloads right now.

Part 1: Here’s what you’re building…

Let’s build a simple e-learning course site with PDF downloads for each lesson.

Combine this with my Simple Course Site walk through and you’re starting to build a powerhouse ontop of Webflow 💪

Here is the Custom Code from the video on my Github account.

Next…

Let’s dig into the “Authenticate” Integromat module. This does the heavy lifting to confirm a logged in member directly with MemberStack.

Part 2: Authenticate

You are taking the JWT token shown in part 1 and sending it up to AWS.

There, with my copy & pasted code, you’ll authenticate the JTW token with MemberStack to confirm that this is indeed a currenly logged in member.

Here’s what you’re doing:

• ◦ Setup your free AWS account.
• ◦ Setup your AWS Lambda function.
• ◦ Copy/paste my custom code into Lambda.
• ◦ Create an API Gateway to call the custom code.
• ◦ Hook up Integromat to run the code authenticating the member.

Here is the Custom JWT Code from the video.

Next…

With the JWT token authenticated, we need to verify this member. That’s what you’ll see in part 3 below.

Part 3: Verify Member

The Authenticate module you just created (above) asks MemberStack if this JWT token is a logged in and authenticated member across their platform.

But…that doesn’t mean they are logged into YOUR MemberStack website.

You now need to confirm this by making a request to MemberStack for the member id listed in that JWT token.

If MemberStack returns a member, you’ve verified that this logged in member is part of your website.

Next…

If they are not authenticated or verified, what do you do?

You redirect them to a page of your choice and they can’t download the file. That’s covered in part 4 below.

Part 4: Failure Redirect

The user is not an authenicated and verfied member so…you will send a responce to the web broswer telling it to redirect the user to the url you passed in the form submission.

Next…

The user is an authenticated and verfied member, so let’s download the file! Checkout part 5 below.

Part 5: Download the File

All system are go!

The user can download the file. But…where is the file stored?

You’ll store the files in your free AWS account. Within their service called S3. It’s protected so not just anyone can download these files, only those that you allow.

Here’s what you’ll be doing…

• ◦ Setup AWS S3.
• ◦ Setup an API token.
• ◦ Upload the files to S3.
• ◦ Setup Integromat to download them.

Now, you won’t be downloading the files directly to the user. Instead, you’ll download the files into Integromat and Integormat will then send the downloaded file to the users browser.

This allows you to protect your files with a “token” (e.g. password) that you’ll store inside of Integromat.

Your users never have access to this token. So if they want to download files, they have to go through the authentication process above.

Nice! 😎

Next…

You’ll send the downloaded file back to the web browser and trigger the browser to automatically start downloading the file.

Part 6: Send File Back to the Web Browser

And…this completes the feature 🙂

The member clicked to download a file, and a moment later the file is downloaded.

Secure file downloads with Webflow & MemberStack.

So flippin good 😍

Here are the Custom Headers from the video.