Cotter JS SDK

Cotter's JS SDK for Passwordless Authentication using Email/Phone Number. To read more about Cotter, get started with our 📚 integration guides and example projects.

• Documentation
• Quickstart
• SDK Reference
• Tutorial

Questions

Reach out on our Slack Channel to get the best response time.

Install

yarn add cotter

or

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

(Make sure you check the latest version. If you don't want to specify a specific version, check unpkg for a guide on how to specify versions).

Usage

You'll need an API_KEY_ID, which you can get by creating a free account at Cotter.

import React from "react";
import Cotter from "cotter";

export default function Home() {
  useEffect(() => {
    var cotter = new Cotter(API_KEY_ID); // 👈 You need to add your API KEY ID
    cotter
      .signInWithLink()
      .showEmailForm()
      .then((payload) => {
        // Use the user information to register or login your users
        loginInOrRegisterMyServer(payload); // 👈 You need to define this function
      })
      .catch((err) => {
        // handle error here
        alert(error);
        console.log("OnError", error.data);
      });
  }, []);

  return (
    // ❗❗ This div needs to have "cotter-form-container" as the ID. ❗❗
    <div id="cotter-form-container" style={{ width: 300, height: 200 }}></div>
  );
}

• ApiKeyID: Your API_KEY_ID from Cotter

Methods

Sending Magic Link:

cotter
  .signInWithLink() // use this
  .showEmailForm();

Sending OTP:

cotter
  .signInWithOTP() // use this
  .showEmailForm();

Channels

Sending to Email

cotter.signInWithLink().showEmailForm(); // use this

Sending to Phone Number

cotter.signInWithLink().showPhoneForm(); // use this

For more information about customization, check out our documentation.

---

WebAuthn

Integrating WebAuthn allows your website to authenticate users using TouchID or Windows Hello from their browser. You'll need an API_KEY_ID, which you can get by creating a free account at Cotter.

import React, { useEffect, useState } from "react";
import Cotter from "cotter"; //  1️⃣  Import Cotter

function App() {
  const [payload, setpayload] = useState(null);

  //  2️⃣ Initialize and show the form
  useEffect(() => {
    var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
    cotter
      .signInWithWebAuthnOrLink() // sign in with WebAuthn or fallback to MagicLink
      .showEmailForm()
      .then((response) => {
        setpayload(response); // show the response in our state
      })
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      {/*  3️⃣  Put a <div> that will contain the form with id "cotter-form-container" */}
      <div id="cotter-form-container" style={{ width: 300, height: 300 }} />

      <pre>{JSON.stringify(payload, null, 4)}</pre>
    </div>
  );
}

export default App;

Fallback to Magic Link:

cotter
  .signInWithWebAuthnOrLink() // use this
  .showEmailForm();

Fallback to OTP:

cotter
  .signInWithWebAuthnOrOTP() // use this
  .showEmailForm();

---

Social Login

Find the updated documentation here: Sign in with Social Login.