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

1
yarn add cotter
Copied!

Step 2: Initialize Cotter and Show the Form

1
import React, { useEffect, useState } from "react";
2
import Cotter from "cotter"; // 1️⃣ Import Cotter
3
​
4
function App() {
5
const [payload, setpayload] = useState(null);
6
​
7
// 2️⃣ Initialize and show the form
8
useEffect(() => {
9
var cotter = new Cotter(API_KEY_ID); // πŸ‘ˆ Specify your API KEY ID here
10
cotter
11
.withFormID("form_default") // Use customization for form "form_default"
12
.signInWithLink() // use .signInWithOTP() to send an OTP
13
.showEmailForm() // use .showPhoneForm() to send magic link to a phone number
14
.then(response => {
15
setpayload(response); // show the response in our state
16
})
17
.catch(err => console.log(err));
18
}, []);
19
​
20
return (
21
<div>
22
{/* 3️⃣ Put a <div> that will contain the form */}
23
<div id="cotter-form-container" style={{ width: 300, height: 300 }} />
24
25
<pre>{JSON.stringify(payload, null, 4)}</pre>
26
</div>
27
);
28
}
29
​
30
export default App;
Copied!
​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:
Last modified 8mo ago