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
​Try it live on our Example Next.js Project. Check out the complete code on Github.
Step 1: Import Cotter as a dependency
1
yarn add cotter
Copied!
(This feature is available on version >= 0.3.4)
Step 2: Initialize Cotter and Show the Form
1
import React, { useEffect, useState } from "react";
2
import Cotter from "cotter"; //  1️⃣  Import Cotter
3
​
4
function App() {
5
  const [payload, setpayload] = useState(null);
6
​
7
  //  2️⃣ Initialize and show the form
8
  useEffect(() => {
9
    var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
10
    cotter
11
      .withFormID("form_default") // Use customization for form "form_default"
12
      .signInWithWebAuthnOrLink()
13
      .showEmailForm()
14
      .then(response => {
15
        setpayload(response); // show the response in our state
16
      })
17
      .catch(err => console.log(err));
18
  }, []);
19
​
20
  return (
21
    <div>
22
      {/*  3️⃣  Put a <div> that will contain the form */}
23
      <div id="cotter-form-container" style={{ width: 300, height: 300 }} />
24
      
25
      <pre>{JSON.stringify(payload, null, 4)}</pre>
26
    </div>
27
  );
28
}
29
​
30
export default App;
Copied!
​Create a free account and go to the dashboard 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!
✏️ Ready to setup & customize your login?
Customize the Form
Easily customize the form from Cotter's Dashboard > Branding.
Full JS SDK Reference
Sign In with WebAuthn
👉 What's Next?
Customize the Form
You can customize the form from the Dashboard > Branding. You can also add Custom CSS.
Add Additional Fields
​Add Additional Fields like Name, Address, etc to the login form. 
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:
Backend: Handling Response

Quickstart Guides - Previous

React – Sign in with Email/Phone

Next - Quickstart Guides

React Native – Sign in with Device

Last modified 8mo ago

Copy link

Contents

Step 1: Import Cotter as a dependency

Step 2: Initialize Cotter and Show the Form

🎉 You're done!

✏️ Ready to setup & customize your login?

Customize the Form

Full JS SDK Reference

👉 What's Next?

Customize the Form

Add Additional Fields