React – WebAuthn
Sign in users faster using WebAuthn: sign in with TouchID or Windows Hello from a web browser.
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
yarn add cotter
(This feature is available on version >= 0.3.4)
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;
- 1.Import Cotter
- 2.Call
signInWithWebAuthnOrLinkto use WebAuthn with fallback Magic Link, followed byshowEmailFormorshowPhoneForm, and get the response as a promise. - 3.Setup a
<div>withid="cotter-form-container"that will contain the form.
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: