# React – WebAuthn

Cotter's WebAuthn authenticates your user using either TouchID or Windows Hello **from their browser**. This means it works **from your website.** 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!

![WebAuthn with Cotter's JS SDK](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-MCkItEPBcDK6WsU8E5d%2F-MCkItqjAs5Z18uMfGn-%2Fimage.png?alt=media\&token=965254fa-69d4-4caf-9e90-6a16af50a1f7)

{% hint style="success" %}
[**Try it live**](https://cotter.herokuapp.com/) **on our Example Next.js Project.** Check out the complete code on [Github](https://github.com/cotter-code/guide-next-webauthn).
{% endhint %}

### Step 1: Import Cotter as a dependency

```
yarn add cotter
```

*(This feature is available on version >= 0.3.4)*

### 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"
      .signInWithWebAuthnOrLink()
      .showEmailForm()
      .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 `signInWithWebAuthnOrLink` to use WebAuthn with fallback Magic Link, 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.

### 🎉 **You're done!** <a href="#youre-done" id="youre-done"></a>

## ✏️ **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** <a href="#customize-the-form" id="customize-the-form"></a>

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

### **Full JS SDK Reference** <a href="#full-js-sdk-reference" id="full-js-sdk-reference"></a>

{% content-ref url="../sdk-reference/web/sign-in-with-webauthn" %}
[sign-in-with-webauthn](https://docs.cotter.app/sdk-reference/web/sign-in-with-webauthn)
{% 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 %}