React – Sign in with Email/Phone

Easily add email and phone number verification using Cotter's SDK. Send a magic link to your users via email, SMS or WhatsApp in just a few lines of code.
Cotter's Magic Link authenticates your user using a link. It allows seamless, fast, and secure way for your user to login to your Web App. Follow this simple guide to see how it works!
Add Magic Link Authentication in just a few minutes

Step 1: Import Cotter as a dependency

yarn add cotter

Step 2: Initialize Cotter and Show the Form

import React, { useEffect, useState } from "react";
import Cotter from "cotter"; // 1️⃣ Import Cotter
function App() {
const [payload, setpayload] = useState(null);
// 2️⃣ Initialize and show the form
useEffect(() => {
var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
.withFormID("form_default") // Use customization for form "form_default"
.signInWithLink() // use .signInWithOTP() to send an OTP
.showEmailForm() // use .showPhoneForm() to send magic link to a phone number
.then(response => {
setpayload(response); // show the response in our state
.catch(err => console.log(err));
}, []);
return (
{/* 3️⃣ Put a <div> that will contain the form */}
<div id="cotter-form-container" style={{ width: 300, height: 300 }} />
<pre>{JSON.stringify(payload, null, 4)}</pre>
export default App;
​Create a free account and go to the dashboard to get your API_KEY_ID .
  1. 1.
    Import Cotter
  2. 2.
    Call signInWithLink to use Magic Link or signInWithOTP to use OTP, followed by showEmailForm or showPhoneForm, and get the response as a promise.
  3. 3.
    Setup a <div> with id="cotter-form-container" that will contain the form.
To send code/link via SMS or WhatsApp, you'll need to add some balance to you project in the Dashboard.

🎉 You're done!

✏️ Ready to setup & customize your login?

Customize the Form

Easily customize the form from Cotter's Dashboard > Branding.

Full JS SDK Reference

👉 What's Next?

Customize the Form

You can customize the form from the Dashboard > Branding. You can also add Custom CSS.

Add Additional Fields

​Add Additional Fields like Name, Address, etc to the login form.

Register User to your Backend

When the user successfully authenticated, send Cotter's response to your backend to either create a new user or log the user in. Learn how to send Cotter's response and verify it in your backend: