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
Sign up for a Cloudflare account: https://dash.cloudflare.com/sign-up
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
- Login to Cotter
- Create a new project. Enter your website name and domain
- 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
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"
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
- 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.