DEV Community: Kevin Chandra

Here's How to Integrate Cotter's Magic Link to Your Webflow Site in Less Than 15 minutes!

Kevin Chandra — Mon, 13 Jul 2020 23:01:12 +0000

In this tutorial we're going to guide you on how to authenticate your users using magic links on Webflow.

Webflow + Cotter's Magic Link Tutorial

Part 1: Cotter Setup

Go to https://dev.cotter.app to create an account. Once you have created an account make sure to create a new project and grab the API Key ID. We will be using your API Key ID later in part 3.

Part 2: Webflow Setup

For this tutorial we have created 2 pages: Login Page and Protected Page. The login page will display the embedded Cotter login form for your users to type in their email while the protected page will display protected content that only a logged in user can view.

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

On the login page we need to include a section element to load Cotter's login form; moreover, we need to set that section id "cotter-form-container". This enables Cotter's JS SDK to load the login form to the section element that we just added.

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

Get Cotter JS SDK

Add the code below to the head of the Login Page.

<!--Get Cotter JS SDK-->
<script src="https://js.cotter.app/lib/cotter.js" 
type="text/javascript"></script>

Initialize Cotter

Add the code below to the body of Login Page.

<!-- 2. Initialize Cotter -->
<script>
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
  cotter
    // Choose what method of login do you want
    // Sign In with Magic Link
    .signInWithLink()
    // Send Magic Link via email
    .showEmailForm()

    .then(payload => {
      // save OAuth token
      localStorage.setItem("user_session", JSON.stringify(payload));

      // redirect to the protected page
      window.location.href = "/protected";
    })
    .catch(err => {
      // handle error
    });
</script>

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)

Now let’s move on to the protected page, we need to include a header (h2) element and set that header id “welcome-text-heading” in order to load the user’s email address and a button element with button id “signout-button” to enable sign out functionality for the user.

Moreover, we’ll be adding custom code to both the header and the body. We’ll be adding custom code to the header to check if a user is logged in and to fetch the user’s OAuth token. The custom code in the body will be used to parse the user data and display his/her email on the page.

Add the code below to the header of the Protected Page

<script>
// 1. We check if a user has already logged in
var cotterOAuthToken = localStorage.getItem("user_session");

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

// 3. If user is logged in then we fetch the user data
let url = "https://cotterapp.herokuapp.com/login"
fetch(url, {
    method: 'POST',
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json'
    },
    body: cotterOAuthToken
  })
  .then(resp => resp.json())
  .then(data => {
    if(!data.success) { window.location.href = "/" }
  });
</script>

Add the code below to the body of the Protected Page

<script>
// 1. Fetch the user data
let token = JSON.parse(cotterOAuthToken);
// 2. Display user email
document.getElementById("welcome-text-heading").innerHTML = `Welcome ${token.email},`;
// 3. Display sign out button
document.getElementById("signout-button").addEventListener("click", () => {
    window.localStorage.removeItem("user_session"); // Log user out
    window.location.href. "/"; // Redirect to login
});
</script>

Part 3: Publish and Test

We've arrived at the last part of this tutorial and all that you need to do is to click publish and test Cotter's magic link authentication for your Webflow website!

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 team@cotter.app.

Stop spending days to code your login page! Add Cotter's magic link to your Gatsby app under 5 minutes

Kevin Chandra — Thu, 02 Jul 2020 01:27:27 +0000

Supercharge your Gatsby app's authentication system with Cotter's magic link. Like how Slack does it, but simpler.

In this guide, we'll show you how to integrate Cotter's magic link authentication to Gatsby.

Let's get started

a. Install Gatsby

# If you don't have Gatsby installed, run
npm install -g gatsby-cli
# Check if Gatsby exist
gatsby -v

Our current version: Gatsby CLI version: 2.12.15

b. Create New Gatsby Project

Let's start with an empty Gatsby project and name it gatsby-cotter.

gatsby new gatsby-cotter
cd gatsby-cotter && gatsby develop

This will create a new gatsby project with the name gatsby-cotter

Head to src/pages/index.js and modify the default Gatsby homepage HTML template by copy pasting the code below:

import React, { useState, useEffect } from "react"; // 👈 Add useEffect here!
// 2️⃣ TODO: Import Cotter

import "./styles.css";

const IndexPage = () => {
  const [responsePayload, setResponsePayload] = useState(null);
  const [loggedIn, setLoggedIn] = useState(false);

  // 3️⃣ TODO: Initialize Cotter and show the form

  return (
    <div className="container">
      <h1 className="title">Passwordless App.</h1>

      {/* 1️⃣ TODO: Setup a div to contain the form */}

      <div id="user-info">
        { loggedIn ? `Welcome, ${responsePayload.email}` : "You are not yet authenticated" }
      </div>

      {
        loggedIn 
        ? <div id="user-response">
          <div className="success">Verification Success</div>
          <div className="title-response">User info from Cotter:</div>
          <pre>{JSON.stringify(responsePayload, null, 4)}</pre>
        </div>
        : null
      }
    </div>
  );
}

export default IndexPage

your src/pages/index.js should be exactly like above

ERROR: It's Ok.

You will see an error indicating that you have not specified styles.css. Create a styles.css page under src/pages/styles.css and copy the code below:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

#user-info {
  padding: 10px;
  max-width: 350px;
  border-radius: 4px;
  background-color: #f5f5f5;
  margin-bottom: 10px;
}

#user-response {
  max-width: 500px;
  max-height: 400px;
}

.success {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  text-align: center;
  color: hsl(171, 100%, 41%);
  margin-bottom: 10px;
}

pre {
  word-wrap: break-word;
  background-color: #2e2e2e;
  padding: 10px;
  border-radius: 4px;
  color: white;
  overflow: scroll;
}

.title-response {
  font-size: 13px;
  color: black;
}

src/pages/styles.css

Integrating Cotter's Magic Link

a. Install Cotter

npm install cotter

You may need to re run gatsby develop if you find any errors saying that you missed a few files inside node_modules. You can continue when if you don't see any errors.

b. Build the login form

Copy the code below

{/* 1️⃣ TODO: Setup a div to contain the form */}
<div
  id="cotter-form-container"
  style={{ width: 300, height: 300 }}
></div>

src/pages/index.js

Then we import Cotter.

// 2️⃣ TODO: Import Cotter
import Cotter from "cotter"; // 👈 Add Cotter here!

on the beginning of src/pages/index.js

Here we initialize Cotter, then show the form.

// 3️⃣ TODO: Initialize Cotter and show the form
useEffect(() => {
    var cotter = new Cotter("<YOUR_API_KEY_ID>");
},[]);

src/pages/index.js

Replace <YOUR_API_KEY_ID> above with your API Key ID. Copy the code below to display the form.

// 3️⃣ TODO: Initialize Cotter and show the form
useEffect(() => {
    var cotter = new Cotter("<YOUR_API_KEY_ID>");
+ cotter.signInWithLink().showEmailForm().then(payload => {
+ setResponsePayload(payload);
+ setLoggedIn(true);
+ });
}, []);

src/pages/index.js

To authenticate your users using a magic link via email, we will be using the signInWithLink function and showEmailForm as written above.

You can send the magic link through SMS/WhatsApp as well by using showPhoneForm

Once a user is successfully authenticated, the payload will return information such as oauth_token , user's identifier (email or phone number), and Cotter's token.

You can see that showEmailForm returns a Promise, that means you can simply handle any error by chaining a catch keyword after then.

The Finish Line

Gatsby Email Link Authentication using Cotter

Done! You can now authenticate your users using a magic link without backend servers to store your users' credentials.

Find the complete code here.

What's next?

You may have a backend service that serves your users personalized content. If so, then you will need to validate the payload on your backend server. Then, you can send your own authentication token to the client side, or simply use our oauth_token to validate your users from now on.

Learn more about OAuth tokens returned from Cotter here to know more!

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 team@cotter.app.