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.
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.
<script> var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here cotter .withFormID("form_default") // Use customization for form "form_default" .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 informationconsole.log("Cotter User Information", payload);// ==================================// TODO: Login to backend// ================================== }) .catch(err => console.log(err));</script>
import Cotter from"cotter"; // 1️⃣ Import Cotter//...useEffect(() => {var cotter =newCotter(API_KEY_ID); // 👈 Specify your API KEY ID here cotter.withFormID("form_default") // Use customization for form "form_default".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 informationconsole.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.
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"
{/* 3️⃣ Put a <div> that will contain the form */}
<div id="cotter-form-container" style={{ width: 300, height: 300 }} />
What we have so far
<script
src="https://unpkg.com/cotter@0.3.32/dist/cotter.min.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
.withFormID("form_default") // Use customization for form "form_default"
.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 CotterfunctionApp() {// 2️⃣ Initialize and show the formuseEffect(() => {var cotter =newCotter(API_KEY_ID); // 👈 Specify your API KEY ID here cotter.withFormID("form_default") // Use customization for form "form_default".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 */} <divid="cotter-form-container"style={{ width:300, height:300 }} /> </div> );}exportdefault App;
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:
var cotter =newCotter("<YOUR_API_KEY_ID>");cotter.withFormID("form_default") // Use customization for form "form_default".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",// [Deprecated] 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":"myemail@gmail.com" }}
Please use the identifier (email/phone number) as your main way to identify users, user.ID is deprecated.
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:
