Prerequisites

Before we begin, make sure you have done the following:

How it works

We'll have 3 pages in this tutorial: A Waitlist Page (/waitlist), a Login Page (/), and a Protected Page (/protected).

Users can sign up to the waitlist by entering their email on the Waitlist Page. You can manage people on the waitlist in your Google Sheets. Only people who are marked as Allowed: TRUE on the waitlist can login to your website using the Login Page and access the Protected Page.

In this tutorial, we'll make the Waitlist Page, and then update the Login and Protected Page that you have made in the prerequisite tutorial.

Inserting Waitlist Emails to Google Sheets

Make a Waitlist Page

Step 1: Set up Google Sheets

Go to https://cotteremaillist.herokuapp.com to connect your Google Sheets that contains a list of emails and follow the instructions there. See an example Google Sheet here. (You can make this sheet private - you just need to connect your Google Account in the website above).

Step 2: Make elements to show the waitlist email form and a success message

  • Include a section element to load Cotter's login form. We need to set that section id "cotter-form-container". Make the section width and height to 300px for best results.
  • Include a text element with id "waitlist-message". We will show if the email is successfully added to the waitlist here.

Step 3: Add Cotter JS SDK

After finishing the page setup we can start with adding custom code to the Waitlist Page. Copy paste the code below to the custom code tab on the Waitlist Page settings.

Waitlist Page Settings
Scroll Down to "Custom Code" section

Add the code below to the head of Waitlist page:

<!--Get Cotter JS SDK-->
<script
  src="https://unpkg.com/[email protected]/dist/cotter.min.js"
  type="text/javascript"
></script>

Step 4: Add a function to insert email to your Google Sheets

Make sure you have already done Step 1 by going to https://cotteremaillist.herokuapp.com and connecting your Google Sheets that contains the waitlist (this can be empty, but make sure you follow the format specified).

Add the code below to the body of Waitlist page:

<script>
  const insertEmail = async (payload) => {
    try {
      const body = {
        spreadsheetId: "<YOUR SPREADSHEET ID>", //👈 Add your Spreadsheet ID
        apiKeyID: "<YOUR API KEY ID>", //👈 Add your API KEY ID
        email: payload.email,
        allowed: false // By default, new emails are not allowed to login
      };
      let resp = await fetch(
        "https://cotteremaillist.herokuapp.com/api/insertemail",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(body)
        }
      );
      let respBody = await resp.json();
      if (respBody.success) {
        document.getElementById("waitlist-message").innerHTML =
          "Added to waitlist";
      } else {
        document.getElementById("waitlist-message").innerHTML =
          "Something went wrong";
      }
    } catch (e) {
      document.getElementById("waitlist-message").innerHTML =
        "Something went wrong";
    }
  };
</script>

Make sure that you have pasted your Spreadsheet ID and your API Key ID on the code block above.

You can grab a Cotter API Key ID by visiting https://dev.cotter.app and creating an account. Once you have created an account, make sure to create a new project and grab the API Key ID.

Step 5: Add the code below to show the email form ("Join Waitlist" form)

Below the code on step 4, add this code:

<script>
    var cotter = new Cotter({
      ApiKeyID: "<YOUR_API_KEY_ID>",  // 👈 Specify your API KEY ID here
      ButtonText: "Join Waitlist",
    });
    cotter
      .signInWithLink() // Verify email with Magic Link
      .showEmailForm() // Send Magic Link via email
      .then((payload) => {
        insertEmail(payload);
      })
      .catch((err) => {
      // handle error
      });
</script>

Make sure that you have pasted your API Key ID on the code block above.

Login Page and Protected Page

Login Page Setup (where the login form will show up)

You should already have a Login Page after following the prerequisite tutorial above. Only users who are allowed in your Google Sheets can login. We are going to modify and add some of the necessary code.

Step 1. Add the code below to the body of the Login Page

Add this code before you Initialize Cotter

<script>
  const checkEmail = async (payload) => {
    try {
      const body = {
        spreadsheetId: "<YOUR SPREADSHEET ID>", //👈 Add your Spreadsheet ID
        apiKeyID: "<YOUR API KEY ID>",  // 👈 Specify your API KEY ID here
        email: payload.identifier
      };
      let resp = await fetch(
        "https://cotteremaillist.herokuapp.com/api/checkemail",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(body)
        }
      );
      let respBody = await resp.json();
      if (!respBody.allowed) {
        return "You are not allowed to log in";
      } else {
        return null;
      }
    } catch (e) {
      console.log(e);
      return "You are not allowed to log in";
    }
  };
</script>

Make sure that you have pasted your Spreadsheet ID and your API Key ID on the code block above.

Step 2. Change the code in the body of the Login Page to the code below

<script>
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID
  cotter
    // Choose what method of login do you want
    // Sign In with Magic Link
-   .signInWithLink()
+   .signInWithLink(checkEmail)
    // Send Magic Link via email
    .showEmailForm()
    
    .then(payload => {
      // redirect to the protected page
      window.location.href = "/protected";
    })
    .catch(err => {
      // handle error
    });
 </script>

Make sure you deleted the line ".signInWithLink()" and added the line ".signInWithLink(checkEmail)".

Also, make sure that you have pasted your API Key ID on the code block above.

Protected Page Setup (and any other page you want to protect)

You should already have a Protected Page after following the prerequisite tutorial above. We are going to modify and add some of the necessary code.

Change the code on the header to the code below

<script
  src="https://unpkg.com/[email protected]/dist/cotter.min.js"
  type="text/javascript"
></script>

<script>
  async function checkLoggedIn() {
    //Initialize Cotter
    var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID
    
    // 1. We check if a user has already logged in
    const accessTokenObject = await cotter.tokenHandler.getAccessToken();
    const accessToken = accessTokenObject ? accessTokenObject.token : null;

    // 2. If user is not logged in then we redirect to the login page
    if (!accessToken) window.location.href = "/";

    // 3. Construct the body for access token verification
    let body = {
      oauth_token: {
        access_token: accessToken
-     } 
+     },
+     spreadsheetId: "<YOUR SPREADSHEET ID>",  //👈 Add your Spreadsheet ID
+     apiKeyID: "<YOUR API KEY ID>" // 👈 Specify your API KEY ID here
    };

    // 4. If user is logged in then we fetch the user data
+   //    and check if the email is allowed based on our Google sheets
-   let url = "https://worker.cotter.app/verify";
+   let url = "https://cotteremaillist.herokuapp.com/api/login"
    fetch(url, {
      method: "POST",
      cache: "no-cache",
      headers: {
        "Content-Type": "application/json",
-        API_KEY_ID: "<YOUR_API_KEY_ID>"   // 👈 Specify your API KEY ID here
      },
-     mode: "cors",
      body: JSON.stringify(body)
    })
      .then((resp) => resp.json())
      .then((data) => {
        if (!data.success) { window.location.href = "/" }
      });
  }
  
  //Call the CheckLoggedIn function
  checkLoggedIn();
  
</script>

Make sure you delete all lines with the "-" symbol and added all lines with the "+" symbol. (Do not include the + sign itself).

Also, make sure that you have pasted your Spreadsheet ID and your API Key ID on the code block above.


Questions & Feedback

Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter's Slack Channel.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.

If you need help, ping us on our Slack channel or email us at [email protected]