# HTML – 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!

{% embed url="<https://www.youtube.com/watch?v=WpfVzqiz0vw>" %}

### Step 0: Get the template code

To follow this guide, let's use our [Hello World Template](https://codesandbox.io/s/client-side-template-prf4d) in CodeSandbox!

### Step 1: Import Cotter as a dependency

Copy the following script to the head section of your HTML page

```markup
<!-- 1️⃣ Get Cotter SDK -->

<script
    src="https://unpkg.com/cotter@0.3.32/dist/cotter.min.js"
    type="text/javascript"
></script>
```

### Step 2: Setup a `div` with id `cotter-form-container` element to contain cotter's form

```markup
<!-- 2️⃣ Setup a div to contain the form -->
<div id="cotter-form-container" style="width: 300px; height: 300px;"></div>
```

Please note that id has to be `cotter-form-container` for the form to show up.

### Step 3: Initialize Cotter

> You need your API\_KEY\_ID for this step. Create a developer account and create a Project to get your API keys. The API Keys will only be shown once!

Grab your `API_KEY_ID` from the dashboard, then replace `<YOUR_API_KEY_ID>` with your `API_KEY_ID`.

```markup
<!-- 3️⃣ Show the form -->
<script>
  var cotter = new Cotter("<YOUR_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(payload => {
    // Read what Cotter Returns
    var respDiv = document.getElementById("user-response");
    respDiv.innerHTML = `<pre>${JSON.stringify(payload, null, 4)}</pre>`;
  });
</script>
```

> 🎉 You're done! Now that you know how it works on the client side, let's check out how to process Cotter's payload in your backend so you can start registering and logging in users in your backend server.

Here's a [fully working example](https://codesandbox.io/s/magic-link-working-example-c5j7f) of the guide we went over.

{% 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 %}

## 👉 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 %}