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
yarn add cotter
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;
- 1.Import Cotter
- 2.Call
signInWithLinkto use Magic Link orsignInWithOTPto use OTP, followed byshowEmailFormorshowPhoneForm, and get the response as a promise. - 3.Setup a
<div>withid="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.
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: