# Sign In with WebAuthn

> **Concepts:** Learn about how [**Sign in with WebAuthn**](https://docs.cotter.app/features/sign-in-with-webauthn) works.

![WebAuthn with Cotter's JS SDK](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-MCkI8IfsipR_rpREq-M%2F-MCkIqSr1NpqGEsST7of%2Fimage.png?alt=media\&token=443a6b26-0431-45b1-8b66-31e3dd13a92a)

### Overview

WebAuthn authentication works the following way:

1. A new user would be prompted to either enter a verification code or magic link sent to their email or phone.
2. Once the user verified their email/phone, the SDK will automatically prompt the user if they want to register this device for fast logins next time.
3. The user can press "Enable TouchID" and successfully register their laptop.
4. When the user login next time, the user will automatically be prompted to use TouchID to login. As a fallback method, the user can choose to send a link or code to their email/phone instead.

## Steps

### Step 1: Import Cotter

#### Include Javascript SDK <a href="#include-javascript-sdk" id="include-javascript-sdk"></a>

To use our Javascript SDK, include the script below in your HTML page or use the npm package.

{% tabs %}
{% tab title="<script>" %}

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

Make sure you check for the latest version at <https://www.npmjs.com/package/cotter>
{% endtab %}

{% tab title="npm" %}

```
npm install cotter --save
```

{% endtab %}

{% tab title="yarn" %}

```
yarn add cotter
```

{% endtab %}
{% endtabs %}

### Step 2: Set up a `div` element to contain cotter's form

{% tabs %}
{% tab title="HTML" %}

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

{% endtab %}

{% tab title="React" %}

```markup
{/* 2️⃣ Setup a div to contain the form */}
<div id="cotter-form-container" style={{ width: 300, height: 300 }}></div>
```

{% endtab %}
{% endtabs %}

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

### Step 3: Initialize Cotter and show the form

Grab your `API_KEY_ID` from [the dashboard](https://dev.cotter.app), then replace `<YOUR_API_KEY_ID>` with your `API_KEY_ID`.

{% tabs %}
{% tab title="HTML" %}

```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"
    .signInWithWebAuthnOrLink() // or signInWithWebAuthnOrOTP()
    .showEmailForm()            // or showPhoneForm()
    .then(payload => console.log(payload))
    .catch(err => console.log(err));
</script>
```

{% endtab %}

{% tab title="React" %}

```javascript
import Cotter from "cotter";
//...

useEffect(() => {
    // 3️⃣  Show the form
    var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here

    cotter
      .withFormID("form_default") // Use customization for form "form_default"
      .signInWithWebAuthnOrLink() // or signInWithWebAuthnOrOTP()
      .showEmailForm() // or showPhoneForm()
      .then((payload) => console.log(payload))
      .catch((err) => console.log(err));
  }, []);
```

{% endtab %}
{% endtabs %}

There are several options for the fallback method:

* Method:&#x20;
  * Magic Link: use `signInWithWebAuthnOrLink()`&#x20;
  * OTP: use `signInWithWebAuthnOrOTP()`
* Channel:&#x20;
  * Email: use `showEmailForm()`&#x20;
  * Phone: use `showPhoneForm()` (you can send code/link via SMS or WhatsApp by setting it up in Dashboard > Branding)

## 🎉 You're done!