Concepts: Learn about how Sign in with Email/Phone Number works.

What you're building

Try it out

Overview

Verifying email and phone number in your website using our JavaScript SDK consists of the following steps:

1. Embed Cotter in your website

2. Receive a Callback with user's data and a token from Cotter

3. Send the token to your backend server

Steps

1. ​Setup Cotter with your API_KEY_ID and some config

2. ​Show Cotter form​

3. ​Send the Payload containing the user's information to your backend server

Step 1: Setup Cotter

Include Javascript SDK

To use our Javascript SDK, include the script below in your HTML page or use the npm package.

<script
    src="https://unpkg.com/cotter@0.3.17/dist/cotter.min.js"
    type="text/javascript"
></script>

npm install cotter --save

yarn add cotter

Initialize Cotter

Initialize Cotter in your HTML page, below the script you imported above. For React apps, initialize this in index.html. You can use it later in any of your pages.

<script>
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
​
   cotter
    .signInWithLink()  // to send a verification code, use .signInWithOTP()
    .showEmailForm()  // to send via phone number use .showPhoneForm()
    .then(payload => {
      // payload is Cotter's token containing user information
      console.log("Cotter User Information", payload);
      // ==================================
      // TODO: Login to backend
      // ==================================
  })
  .catch(err => console.log(err));
</script>

import Cotter from "cotter"; //  1️⃣  Import Cotter
//...
​
var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
 cotter
.signInWithLink()  // to send a verification code, use .signInWithOTP()
.showEmailForm()  // to send via phone number use .showPhoneForm()
.then(payload => {
  // payload is Cotter's token containing user information
  console.log("Cotter User Information", payload);
  // ==================================
  // TODO: Login to backend
  // ==================================
})
.catch(err => console.log(err));
}, []);

Adding more fields

You can also add more fields, customize the styles, and intercept the authentication request before it's sent. Check out how to Customize the Form.

Send Code via WhatsApp

Instead of using SMS, you can also send the code via WhatsApp. Go to the Dashboard > Branding and chose "Phone" on top of the preview.

Step 2: Show Cotter Form

Add the <div> container with id "cotter-form-container"

<div
  id="cotter-form-container"
  style="width: 300px; height: 300px;"
></div>

What we have so far

<script
  src="https://js.cotter.app/lib/cotter.js"
  type="text/javascript"
></script>
​
<div
  id="cotter-form-container"
  style="width: 300px; height: 300px;"
></div>
​
<script>
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
​
  cotter
    .signInWithLink()
    .showEmailForm()  // to send via phone number use .showPhoneForm()
    .then(payload => {
      console.log("Cotter User Information", payload);
      // TODO: Login to server
    })
    .catch(err => console.log(err));
</script>

import React, { useEffect } from "react";
import Cotter from "cotter"; //  1️⃣  Import Cotter
​
function App() {
​
  //  2️⃣ Initialize and show the form
  useEffect(() => {
    var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
     cotter
    .signInWithLink() 
    .showEmailForm()
    .then(payload => {
      console.log("Cotter User Information", payload);
      // TODO: Login to server
    })
    .catch(err => console.log(err));
  }, []);
​
  return (
    <div>
      {/*  3️⃣  Put a <div> that will contain the form */}
      <div id="cotter-form-container" style={{ width: 300, height: 300 }} />
    </div>
  );
}
​
export default App;

Step 3: Sending the Payload to your Backend Server

You MUST set a function called OnSuccess to receive Cotter's a JSON object containing the user's information. For example:

var cotter = new Cotter("<YOUR_API_KEY_ID>");
​
cotter
  .signInWithLink()
  .showEmailForm() 
  .then(payload => {
    console.log("Cotter User Information", payload);
    
  // TODO: Login to Server
  axios
    .post("http://localhost:3005/login", payload)
    .then((resp) => console.log("Response From Server", resp))
    .catch((err) => console.log(err));
  })
  .catch(err => console.log(err));
​

The payload that you receive from the promise is a JSON Object with the following format:

{
    "email": "myemail@gmail.com", // User's email (or phone number)
    "oauth_token": {
        "access_token": "eyJhbGciOiJFUzI1NiIsImt...", // Access Token to validate
        "id_token": "eyJhbGciOiJFUzI1Ni...",
        "refresh_token": "27805:CNf76faa8trMhjXM...",
        "expires_in": 3600,
        "token_type": "Bearer",
        "auth_method": "OTP"
    },
    "user": {
        "ID": "abcdefgh-abcd-abcd-abcd-af6f81fb5432", // Cotter User ID
        "created_at": "2020-07-21T05:50:14.182738Z",
        "updated_at": "2020-07-21T06:00:47.115096Z",
        "deleted_at": "0001-01-01T00:00:00Z",
        "issuer": "<YOUR_API_KEY_ID>",
        "identifier": "putrikarunian@gmail.com"
    }
}

Handling the response in your backend

🎉 You're done!

Securing your Project

Since you'll be using your API Key from a front-end website or mobile app, your API_KEY_ID is exposed to anyone inspecting your code. Here are some ways to prevent abuse:

• ​Only allow your website/app to use your API Key​

• ​Rate Limit the number of authentication requests​

• ​Enable reCAPTCHA to prevent automated abuse​

What's Next

• ​Styling the Form: You can add Styling from the dashboard or add custom CSS

• ​Add Additional Fields: Add fields like Name, Address, etc to the login form

• ​Check the email/phone before logging in: Useful for employees-only portals, RSVP, waitlists, checking if the user is registered, etc.