TUTORIALS & GUIDES

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.


JASON TJAHJONO

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.

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

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 👇

Instructions:

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

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.


Need help?

Join our Slack 👋

Made in Typedream