# React – Sign in with Email/Phone

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](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-MBqCglfTTUEk9Q9YHED%2F-MBrfjtocuzcysGXyr38%2FSmallReactMagicLink.gif?alt=media\&token=a5321505-ffdc-448b-8a15-9b7d9124c241)

### Step 1: Import Cotter as a dependency

```
yarn add cotter
```

### Step 2: Initialize Cotter and Show the Form

```javascript
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](https://dev.cotter.app/) 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.

{% hint style="info" %}
To send code/link via SMS or WhatsApp, you'll need to add some balance to you project in the [Dashboard](https://dev.cotter.app/).
{% endhint %}

### 🎉 **You're done!**

Here's a [working example of the React app that we just made](https://codesandbox.io/s/react-magic-link-complete-90vig?file=/src/App.js).

## ✏️ **Ready to setup & customize your login?** <a href="#ready-to-setup-and-customize-cotters-js-sdk" id="ready-to-setup-and-customize-cotters-js-sdk"></a>

### **Customize the Form**

Easily customize the form from [Cotter's Dashboard](https://dev.cotter.app/) > Branding.

### **Full JS SDK Reference**

{% content-ref url="../sdk-reference/web/web-sdk-verify-email-phone" %}
[web-sdk-verify-email-phone](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone)
{% endcontent-ref %}

## 👉 What's Next?

### Customize the Form

You can customize the form from the [Dashboard](https://dev.cotter.app/) > Branding. You can also [add Custom CSS](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/styling#adding-your-own-css).

### Add Additional Fields

[**Add Additional Fields**](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/older-sdk/advanced-customization#additional-fields) like Name, Address, etc to the login form.&#x20;

### **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:

{% content-ref url="../sdk-reference/backend-handling-response" %}
[backend-handling-response](https://docs.cotter.app/sdk-reference/backend-handling-response)
{% endcontent-ref %}