Prerequisites

  1. Cotter account.
  2. Google Sheet that contains a list of emails allowed to login. Your Google Sheet format should look like this:

You can duplicate this sheet from this link.

Step 1: Setup your form

  • Go to Cotter dashboard and create a new form.
  • Go to the Rules tab and connect your Google Account. You will be redirected back to Cotter once you've completed the process.
  • Fill out the rest of the form.

Step 2: Create a landing page in Webflow with a call to action button

In this case, the call to action button is the Login button.

Then copy and paste the following code to your Project Settings Custom Code section.

 <script src="https://unpkg.com/[email protected]/dist/cotter.loader.js"
  		 type="text/javascript"
  	     data-cotter-api-key-id="<YOUR-API-KEY>"
  ></script>

Step 2: Connect Cotter to your button on Webflow

In this section, we will tell Cotter which button on our website starts the authentication flow.

First, go to Cotter's dashboard > Projects > Form & Fields, then press the copy icon in the Login Link popup.

Please note that you might have slightly different id than the one shown in this picture

This button simply copies a link (path parameter) to your clipboard. All you need to do is paste this into the button's link.

You're done 🎉

You can save the project and publish it. You should be able to restrict people from logging in using your form.

What's next?

We've seen from the tutorial above how to prevent people from logging into your site by restricting who can use your form. Next you should: Restrict some users from accessing some pages in your app.