No-Code Dashboard: Add private pages to your Webflow pages

Protect your page to logged in users only.

ALBERT PUTRA PURNAMA

31 JAN 2021 • 2 MIN READ

In this tutorial, we are going to guide you on how to protect your Webflow page to only be accessible by logged in users.

You can do so by adding a simple code on the head section of your Webflow custom code. This can be applied to any other website builders with custom code functionality.

Here's what you'll need:

Cotter login form
Private pages: pages you require users to login to access

Step 1: Add Cotter to your pages

When you have your private pages ready, you can simply copy and paste the following code block to the <head> section of your custom code:

<script src="https://unpkg.com/cotter@0.3.31/dist/cotter.loader.js" 
        type="text/javascript" 
        data-cotter-api-key-id="<your-api-key-id>"></script>

You should have something like this on Webflow:

Please note that you will have a different value in data-cotter-api-key-id.

Step 2: Configure your site on Cotter's dashboard

Head to Cotter's developer dashboard then go to Projects > Protected Pages. Then set it to however you'd like. You might have different slugs. Here's an example configuration:

A brief explanation on the configuration above:

This configuration sets everything that starts with /blog and /profile (such as cotterapp.webflow.io/blog and cotterapp.webflow.io/protected) to be protected. It means visitors that are not logged in will be redirected to /login-page .
Please note that this protection does not mean that your data in /blog or /private path will be protected, so it is not recommended to store sensitive content within these paths.

That's it 🎉

You have successfully added a layer of protection on your content! You can save your changes and see that your /blog and /profile pages are protected by Cotter.