Add a Login Form to Your Notion Website in Under 10 Minutes! (with Cotter Integration and Custom Routes)

Use Notion to create a website and add a login form without any code.

In this tutorial, we will be using Notion to create a website and add a login form without any code. Before starting, you’ll need to complete a few things in advance:

Step 0: Prerequisite

Before starting, you’ll need to create a Notion page (or pages) that will be published to your website.

1. After creating a Notion page, click “Share” in the top-right corner
2. Enable “Share to web”
3. The link below “Share to web” is your Notion Page Link

1. Do this for every page you want to publish in your website

Step 1: Set up Cloudflare

1. Sign up for a Cloudflare account: https://dash.cloudflare.com/sign-up

1. Choose “Cloudflare Workers”

1. Enter a subdomain for your website

1. Choose the Free plan

1. Now, you want to go to your email and verify your account
2. Log back in to Cloudflare. You should see something like this. Click “Workers”

1. Then click “Create a Worker”

1. Your screen should look like this. Now you’re ready for step 2

Step 2: Set up Cotter

1. Login to Cotter
2. Create a new project. Enter your website name and domain

1. Click “Let’s go!”
2. Here, you will obtain your API Key.

Step 3: Generating your Custom Script

In this step, you will need:

1. Your Notion Page Links (Step 0)
2. Your Domain (Step 1)
3. Cotter API Key (Step 2)

Enter this information in the form below 👇

https://cotter-notion-code-generator.vercel.app/

(For Custom Routes: Press Clear to add a new route)

After everything is done, click Copy. The code should be copied to your clipboard.

Example:
Here’s an example on how to fill in the form above. You can also add Custom Routes.

Step 4: Deploying

1. Go to your Cloudflare Workers Dashboard, delete the existing code, and replace them with the code you copied
2. Click “Save and Deploy”

You should now be able to go to your domain and open the page

Step 5: Protect your Custom Routes

You’ll need to add Custom Routes in the form on Step 3 above to protect some specific pages that are only accessible to logged-in users.

In this step, you can allow some pages to only be accessible after login. Here’s how:

1. In your Cloudflare Workers Dashboard, around line 7 of the code, you will see your routes and the corresponding notion page id under “COTTER INSTRUCTIONS”

2. Copy the routes and page ids you want to set as restricted, and paste them in the “Protected Page” section of the Cotter Dashboard

3. Set the “Access Denied Page” to /login

1. Click “Save”

You’re done 🎉

You should have a login form on your Notion site and you should be able to restrict access to protected pages.

Need help?

Join our Slack 👋