HTML & Node.js

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.

Sign in with Email/Phone Number

In this guide we'll allow users to Sign In with their Email/Phone Number using Cotter's SDK.

What You're Building

Cotter's Embeddable Verification Form for Web

Simple Authentication with a One-Time-Password:

  1. Embed Cotter's login form in your website.

  2. User enter their email/phone number

  3. User receive a verification code in their email/phone number and enter it in the login form

  4. Receive user's data.

🎉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.

Steps

  1. ​Get Cotter's SDK​

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.

Registering the new user to Cotter

After verifying the user's email or phone number, you should register the user to Cotter to use the other authentication methods. Check the User API to create a new user. You should do this while registering the user in your backend server.

✏️ 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