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.

  • 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:

  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:

  • 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

  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?

Made in Typedream