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.
23 MAR 2021 • 3 MIN READ
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 Notion pages (Home and Protected) that will be published to your website.
After creating a Notion page, click "Share" in the top-right corner
Enable "Share to web"
The link below "Share to web" is your Notion Page Link
Do this for every page you want to publish in your website
Step 1: Set up Cloudflare
Choose "Cloudflare Workers"
Enter a subdomain for your website
Choose the Free plan
Now, you want to go to your email and verify your account
Log back in to Cloudflare. You should see something like this. Click "Workers"
Then click "Create a Worker"
Your screen should look like this. Now you're ready for step 2
Step 2: Set up Cotter
Click "Let's go!"
Here, you will obtain your API Key.
Step 3: Generating your Custom Script
In this step, you will need:
Your Notion Page Links (Step 0)
Your Domain (Step 1)
Cotter API Key (Step 2)
Enter this information in the form below 👇
Select Custom Routes Press Clear to add a new route
Custom Page - Notion Link: copy and paste the Notion page link of the page you would like to protect (only visible to logged in users). Type your page name after the page link (for example: /mission, /protected, /about, etc.)
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
Go to your Cloudflare Workers Dashboard, delete the existing code, and replace them with the code you copied
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:
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"
3. Set the "Access Denied Page" to /login
4. 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.