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:

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/[email protected]/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.