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:
You should have something like this on Webflow:
Please note that you will have a different value in
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
cotterapp.webflow.io/protected) to be protected. It means visitors that are not logged in will be redirected to
- Please note that this protection does not mean that your data in
/privatepath 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
/profile pages are protected by Cotter.