` container with id "cotter-form-container"**
{% tabs %}
{% tab title="HTML" %}
```markup
that will contain the form */}
```
{% endtab %}
{% endtabs %}
### What we have so far
{% tabs %}
{% tab title="HTML" %}
```markup
```
{% endtab %}
{% tab title="React" %}
```javascript
import React, { useEffect } from "react";
import Cotter from "cotter"; // 1️⃣ Import Cotter
function App() {
// 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()
.showEmailForm()
.then(payload => {
console.log("Cotter User Information", payload);
// TODO: Login to server
})
.catch(err => console.log(err));
}, []);
return (
{/* 3️⃣ Put a
that will contain the form */}
);
}
export default App;
```
{% endtab %}
{% endtabs %}
### Step 3: Sending the Payload to your Backend Server
You can get the authentication response in the `then` callback function and send it to your server. For example:
```javascript
var cotter = new Cotter("
");
cotter
.withFormID("form_default") // Use customization for form "form_default"
.signInWithLink()
.showEmailForm()
.then(payload => {
console.log("Cotter User Information", payload);
// TODO: Login to Server
axios
.post("http://localhost:3005/login", payload)
.then((resp) => console.log("Response From Server", resp))
.catch((err) => console.log(err));
})
.catch(err => console.log(err));
```
The `payload` that you receive from the promise is a JSON Object with the following format:
```javascript
{
"email": "myemail@gmail.com", // User's email (or phone number)
"oauth_token": {
"access_token": "eyJhbGciOiJFUzI1NiIsImt...", // Access Token to validate
"id_token": "eyJhbGciOiJFUzI1Ni...",
"refresh_token": "27805:CNf76faa8trMhjXM...",
"expires_in": 3600,
"token_type": "Bearer",
"auth_method": "OTP"
},
"user": {
"ID": "abcdefgh-abcd-abcd-abcd-af6f81fb5432", // [Deprecated] Cotter User ID
"created_at": "2020-07-21T05:50:14.182738Z",
"updated_at": "2020-07-21T06:00:47.115096Z",
"deleted_at": "0001-01-01T00:00:00Z",
"issuer": "",
"identifier": "myemail@gmail.com"
}
}
```
{% hint style="warning" %}
Please use the identifier (email/phone number) as your main way to identify users, **user.ID is deprecated.**
{% endhint %}
{% hint style="info" %}
You should [verify the access token ](/getting-access-token/verifying-jwt-tokens.md)to ensure this is valid and it comes from Cotter's server.
{% endhint %}
### Handling the response in your backend
{% content-ref url="/pages/-MDcFwnPyQzT3MiP1tHe" %}
[Backend: Handling Response](/sdk-reference/backend-handling-response.md)
{% endcontent-ref %}
## 🎉 You're done!
## Securing your Project
Since you'll be using your API Key from a front-end website or mobile app, your `API_KEY_ID` is exposed to anyone inspecting your code. Here are some ways to prevent abuse:
* [Only allow your website/app to use your API Key](/protecting-your-account/only-allow-your-website-app-to-use-your-api-key.md)
* [Rate Limit the number of authentication requests](/protecting-your-account/rate-limit.md)
* [Enable reCAPTCHA to prevent automated abuse](/protecting-your-account/enable-recaptcha-to-protect-against-automated-abuse.md)
## What's Next
* [**Styling the Form**](/sdk-reference/web/web-sdk-verify-email-phone/styling.md)**:** You can add Styling from the dashboard or add custom CSS
* [**Add Additional Fields**](/sdk-reference/web/web-sdk-verify-email-phone/older-sdk/advanced-customization.md#additional-fields)**:** Add fields like Name, Address, etc to the login form
* [**Check the email/phone before logging in**](/sdk-reference/web/web-sdk-verify-email-phone/checking-the-email-or-phone-before-sending-a-verification-code.md): Useful for employees-only portals, RSVP, waitlists, checking if the user is registered, etc.