Sign In with WebAuthn

Sign in with WebAuthn allows you to authenticate users using TouchID or Windows Hello from their browser. This means, you can use biometric authentication from your website.

Concepts: Learn about how Sign in with WebAuthn works.
WebAuthn with Cotter's JS SDK
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
To use our Javascript SDK, include the script below in your HTML page or use the npm package.
<script>
npm
yarn
1
<script
2
    src="https://unpkg.com/[email protected]/dist/cotter.min.js"
3
    type="text/javascript"
4
></script>
Copied!
Make sure you check for the latest version at https://www.npmjs.com/package/cotter​
1
npm install cotter --save
Copied!
1
yarn add cotter
Copied!
Step 2: Set up a div element to contain cotter's form
HTML
React
1
<!-- 2️⃣ Setup a div to contain the form -->
2
<div id="cotter-form-container" style="width: 300px; height: 300px;"></div>
Copied!
1
{/* 2️⃣ Setup a div to contain the form */}
2
<div id="cotter-form-container" style={{ width: 300, height: 300 }}></div>
Copied!
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, then replace <YOUR_API_KEY_ID> with your API_KEY_ID.
HTML
React
1
<!-- 3️⃣ Show the form -->
2
<script>
3
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
4
​
5
  cotter
6
    .withFormID("form_default") // Use customization for form "form_default"
7
    .signInWithWebAuthnOrLink() // or signInWithWebAuthnOrOTP()
8
    .showEmailForm()            // or showPhoneForm()
9
    .then(payload => console.log(payload))
10
    .catch(err => console.log(err));
11
</script>
Copied!
1
import Cotter from "cotter";
2
//...
3
​
4
useEffect(() => {
5
    // 3️⃣  Show the form
6
    var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
7
​
8
    cotter
9
      .withFormID("form_default") // Use customization for form "form_default"
10
      .signInWithWebAuthnOrLink() // or signInWithWebAuthnOrOTP()
11
      .showEmailForm() // or showPhoneForm()
12
      .then((payload) => console.log(payload))
13
      .catch((err) => console.log(err));
14
  }, []);
Copied!
There are several options for the fallback method:
Method: 
Magic Link: use signInWithWebAuthnOrLink() 
OTP: use signInWithWebAuthnOrOTP()
Channel: 
Email: use showEmailForm() 
Phone: use showPhoneForm() (you can send code/link via SMS or WhatsApp by setting it up in Dashboard > Branding)
🎉 You're done!
​

Google Instructions

Last modified 9mo ago

Copy link

Contents

Overview

Steps

Step 1: Import Cotter

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

Step 3: Initialize Cotter and show the form

🎉 You're done!