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
cotter
.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 (
<div>
{/* 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>
</div>
);
}
​
export default App;

​Create a free account and go to the dashboard to get your API_KEY_ID .

  1. Import Cotter

  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. Setup a <div> with id="cotter-form-container" that will contain the form.

πŸŽ‰ You're done!

Here's a working example of the React app that we just made.

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