` 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.