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!

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
      .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 (
    <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 .

Import Cotter
Call signInWithLink to use Magic Link or signInWithOTP to use OTP, followed by showEmailForm or showPhoneForm, and get the response as a promise.
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!

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:

PreviousHTML – Sign in with Email/Phone NextReact – WebAuthn

Last updated 3 years ago

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 .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 ( <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;

👉 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:

Backend: Handling Response