Websites

Our JavaScript SDK offers the easiest way to integrate Cotter into your website. You can simply embed Cotter's Login Form and it will do the heavy lifting for you.

What You're Building

Cotter's Embeddable Verification Form for Web

🎉To follow this guide, use our Hello World Template in CodeSandbox !

If you don't want to follow the guide, check out the fully working example.

Overview

We'll go over how to authenticate your users using the JavaScript SDK. User's will be prompted to enter their email/phone number, and then enter a one-time verification code to finish the authentication:

Simple Authentication with a One-Time-Password:

  1. Embed Cotter in your website

  2. Receive a token with user's data

If you also have a mobile app, you can prompt your user to approve the login from their mobile phone. A Trusted Device is a mobile device that they trust to approve logins to their account.

Steps

Step 0️⃣: Get The Template Code

To follow this guide, let's use our Hello World Template in CodeSandbox !

Step 1️⃣: Get Cotter SDK

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

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

Step 2️⃣: Setup a div to contain Cotter's Form

Take note of the id of the div. Here, the id is cotter-container-signup

<!-- 2️⃣ Setup a div to contain the form -->
<div
id="cotter-container-signup"
style="width: 300px; height: 200px;"
></div>

Step 3️⃣: Initialize Cotter with some Config

You need your API_KEY_ID for this step. Create a developer account and create a Project to get your API keys. The API Keys will only be shown once!

Grab your API_KEY_ID from the dashboard, and specify it under ApiKeyID . Also remember the div id above and put it under ContainerID.

<!-- 3️⃣ Initialize Cotter with some config -->
<script>
var config = {
ApiKeyID: "API_KEY_ID", // 👈 Specify your API KEY ID here
Type: "EMAIL",
IdentifierField: "email",
ContainerID: "cotter-container-signup",
OnSuccess: payload => {
// Read what Cotter Returns
var respDiv = document.getElementById("user-response");
respDiv.innerHTML = `
<div class="success">Verification Success</div> <br/>
<div class="title">User info from Cotter:</div>
<pre>${JSON.stringify(payload, null, 4)}</pre>
<div class="note">&#x270D Note: Notice that we use <code>SkipRedirectURL: true</code> here. This payload will be sent to your <code>RedirectURL</code> if you specify it.</div>
`;
localStorage.setItem("user_session", JSON.stringify(payload));
refresh();
}
};
var cotter = new Cotter(config);
// show the form
cotter.showForm();
</script>

🎉 You're done!

Now that you know how it works on the client side, let's check out how to process Cotter's payload in your backend so you can start registering and logging in users in your backend server.

Here's the fully working example of the guide we just went over.

✏️ Ready to setup & customize Cotter's JS SDK?

Get the full description of the Javascript SDK below.

Using React or Next.js?

👉 What's Next?

See how it works in the backend

Customize the Form

Send Verification Code via WhatsApp