In this tutorial, we are going to guide you on how to authenticate your users using magic link with Cotter's new no-code dashboard and Webflow.

Here's what you'll need:

  • A basic Webflow plan
  • A Cotter account (click here to get one)

Step 1: Customize your Cotter login form

Head to Cotter's developer dashboard > Projects > Forms & Fields

This whole page is designed for the no-code community to easily customize their login forms and add them to their no-code website builders (Webflow, Bubble, etc.).

Fill in the page you want to redirect your users to after they successfully logged in

(See the bottom red square on the previous screenshot). For this example, the redirect page is set to /welcome.

Step 2: Webflow setup

Create 2 pages, you can design these 2 pages however you like

  1. A login page that contains a login button.
  2. A welcome page to welcome your newly registered users. The URL needs to match the URL you will take your users to after successful login (from previous example: /welcome).

Next, you have to add the following code to your custom code <head> section Β in projects settings page.

<script
    src="https://unpkg.com/[email protected]/dist/cotter.loader.js"
    type="text/javascript"
    data-cotter-api-key-id="<YOUR API KEY ID>"
        ></script>
Don't forget to change <YOUR API KEY ID> to your actual API Key ID from Cotter's dashboard

You should have something like the following:

Head to Cotter's developer dashboard > Projects > Forms & Fields

Then click on the purple Login Link button then click on the copy icon indicated by the red square.

Finally, insert the Login Link to the login button you created.

You're done πŸŽ‰

You can save the project and publish it. You should be able to log your users in.


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]