Sign In with Email/Phone Number

Our JavaScript SDK offers the easiest way to integrate Cotter 's email/phone verification. You can simply embed Cotter's Login Form and it will do the heavy lifting for you.

Concepts: Learn about how Sign in with Email/Phone Number works.
What you're building
Cotter's Embeddable Login Form using the JS SDK
Try it out
Quickly try out how it works in our Hello World Example! 🎉
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>
npm
yarn
1
<script
2
    src="https://unpkg.com/[email protected]/dist/cotter.min.js"
3
    type="text/javascript"
4
></script>
Copied!
Make sure you check for the latest version at https://www.npmjs.com/package/cotter​
1
npm install cotter --save
Copied!
1
yarn add cotter
Copied!
Initialize Cotter
Initialize Cotter in your Login page. If using HTML, put this script at the bottom of your <body> . If you're using React, put this in useEffect or componentDidMount . We want this script to run right after the page is loaded.
HTML
React
1
<script>
2
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
3
​
4
   cotter
5
    .withFormID("form_default") // Use customization for form "form_default"
6
    .signInWithLink()  // to send a verification code, use .signInWithOTP()
7
    .showEmailForm()  // to send via phone number use .showPhoneForm()
8
    .then(payload => {
9
      // payload is Cotter's token containing user information
10
      console.log("Cotter User Information", payload);
11
      // ==================================
12
      // TODO: Login to backend
13
      // ==================================
14
  })
15
  .catch(err => console.log(err));
16
</script>
Copied!
1
import Cotter from "cotter"; //  1️⃣  Import Cotter
2
​
3
//...
4
​
5
useEffect(() => {
6
  var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
7
  
8
  cotter
9
    .withFormID("form_default") // Use customization for form "form_default"
10
    .signInWithLink()  // to send a verification code, use .signInWithOTP()
11
    .showEmailForm()  // to send via phone number use .showPhoneForm()
12
    .then(payload => {
13
      // payload is Cotter's token containing user information
14
      console.log("Cotter User Information", payload);
15
      // ==================================
16
      // TODO: Login to backend
17
      // ==================================
18
  })
19
  .catch(err => console.log(err));
20
}, []);
Copied!
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.
To send code/link via SMS or WhatsApp, you'll need to add some balance to you project in the Dashboard.
Step 2: Show Cotter Form
Add the <div> container with id "cotter-form-container"
HTML
React
1
<div
2
  id="cotter-form-container"
3
  style="width: 300px; height: 300px;"
4
></div>
Copied!
1
{/*  3️⃣  Put a <div> that will contain the form */}
2
<div id="cotter-form-container" style={{ width: 300, height: 300 }} />
Copied!
What we have so far
HTML
React
1
<script
2
    src="https://unpkg.com/[email protected]/dist/cotter.min.js"
3
    type="text/javascript"
4
></script>
5
​
6
<div
7
  id="cotter-form-container"
8
  style="width: 300px; height: 300px;"
9
></div>
10
​
11
<script>
12
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
13
​
14
  cotter
15
    .withFormID("form_default") // Use customization for form "form_default"
16
    .signInWithLink()
17
    .showEmailForm()  // to send via phone number use .showPhoneForm()
18
    .then(payload => {
19
      console.log("Cotter User Information", payload);
20
      // TODO: Login to server
21
    })
22
    .catch(err => console.log(err));
23
</script>
Copied!
1
import React, { useEffect } from "react";
2
import Cotter from "cotter"; //  1️⃣  Import Cotter
3
​
4
function App() {
5
​
6
  //  2️⃣ Initialize and show the form
7
  useEffect(() => {
8
    var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
9
    
10
    cotter
11
      .withFormID("form_default") // Use customization for form "form_default"
12
      .signInWithLink() 
13
      .showEmailForm()
14
      .then(payload => {
15
        console.log("Cotter User Information", payload);
16
        // TODO: Login to server
17
    })
18
    .catch(err => console.log(err));
19
  }, []);
20
​
21
  return (
22
    <div>
23
      {/*  3️⃣  Put a <div> that will contain the form */}
24
      <div id="cotter-form-container" style={{ width: 300, height: 300 }} />
25
    </div>
26
  );
27
}
28
​
29
export default App;
Copied!
Step 3: Sending the Payload to your Backend Server
You can get the authentication response in the then callback function and send it to your server. For example:
1
var cotter = new Cotter("<YOUR_API_KEY_ID>");
2
​
3
cotter
4
  .withFormID("form_default") // Use customization for form "form_default"
5
  .signInWithLink()
6
  .showEmailForm() 
7
  .then(payload => {
8
    console.log("Cotter User Information", payload);
9
    
10
    // TODO: Login to Server
11
    axios
12
      .post("http://localhost:3005/login", payload)
13
      .then((resp) => console.log("Response From Server", resp))
14
      .catch((err) => console.log(err));
15
  })
16
  .catch(err => console.log(err));
17
​
Copied!
The payload that you receive from the promise is a JSON Object with the following format:
1
{
2
    "email": "[email protected]", // User's email (or phone number)
3
    "oauth_token": {
4
        "access_token": "eyJhbGciOiJFUzI1NiIsImt...", // Access Token to validate
5
        "id_token": "eyJhbGciOiJFUzI1Ni...",
6
        "refresh_token": "27805:CNf76faa8trMhjXM...",
7
        "expires_in": 3600,
8
        "token_type": "Bearer",
9
        "auth_method": "OTP"
10
    },
11
    "user": {
12
        "ID": "abcdefgh-abcd-abcd-abcd-af6f81fb5432", // [Deprecated] Cotter User ID
13
        "created_at": "2020-07-21T05:50:14.182738Z",
14
        "updated_at": "2020-07-21T06:00:47.115096Z",
15
        "deleted_at": "0001-01-01T00:00:00Z",
16
        "issuer": "<YOUR_API_KEY_ID>",
17
        "identifier": "[email protected]"
18
    }
19
}
Copied!
Please use the identifier (email/phone number) as your main way to identify users, user.ID is deprecated.
You should verify the access token to ensure this is valid and it comes from Cotter's server.
Handling the response in your backend
Backend: Handling Response
🎉 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.

SDK Reference - Previous

Web

Customize the Form

Last modified 6mo ago

Copy link

Contents

Step 2: Show Cotter Form

What we have so far

Step 3: Sending the Payload to your Backend Server

Handling the response in your backend

🎉 You're done!

Securing your Project

What's Next