Sign In with Email/Phone Number
Concepts: Learn about how Sign in with Email/Phone Number works.
Quickly try out how it works in our Hello World Example! 🎉
Verifying email and phone number in your website using our JavaScript SDK consists of the following steps:
Embed Cotter in your website
Receive a Callback with user's data and a
tokenfrom CotterSend the
tokento your backend server
Setup Cotter with your
API_KEY_IDand some configSend the Payload containing the user's information to your backend server
To use our Javascript SDK, include the script below in your HTML page or use the npm package.
<scriptsrc="https://unpkg.com/cotter@0.3.23/dist/cotter.min.js"type="text/javascript"></script>
Make sure you check for the latest version at https://www.npmjs.com/package/cotter
npm install cotter --save
yarn add 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.
<script>var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID herecotter.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 = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID herecotter.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.
Add the <div> container with id "cotter-form-container"
<divid="cotter-form-container"style="width: 300px; height: 300px;"></div>
{/* 3️⃣ Put a <div> that will contain the form */}<div id="cotter-form-container" style={{ width: 300, height: 300 }} />
<scriptsrc="https://js.cotter.app/lib/cotter.js"type="text/javascript"></script><divid="cotter-form-container"style="width: 300px; height: 300px;"></div><script>var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID herecotter.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 Cotterfunction App() {// 2️⃣ Initialize and show the formuseEffect(() => {var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID herecotter.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;
You can get the authentication response in the then callback function and send it to your server. For example:
var cotter = new Cotter("<YOUR_API_KEY_ID>");cotter.signInWithLink().showEmailForm().then(payload => {console.log("Cotter User Information", payload);// TODO: Login to Serveraxios.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": "myemail@gmail.com"}}
You should verify the access token to ensure this is valid and it comes from Cotter's server.
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:
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.
