Build your first WebAuthn app (Japanese | English subtitles)

Have you ever wondered how to enable biometric authentication on the web? This codelab walks you through how to use WebAuthn to implement reauthentication experience on your website using a biometric sensor. 

Before you begin

The Web Authentication API, also known as WebAuthn, lets you create and use origin-scoped, public-key credentials to authenticate users.

The API supports the use of BLE, NFC, and USB-roaming U2F or FIDO2 authenticators - also known as security keys - as well as a platform authenticator, which lets users authenticate with their fingerprints or screen locks.

In this codelab, you build a website with a simple reauthentication functionality that uses a fingerprint sensor. Reauthentication protects account data because it requires users who already signed in to a website to authenticate again when they try to enter important sections of the website or revisit the website after a certain amount of time.

Prerequisites

- Basic understanding of how WebAuthn works

- Basic programming skills with JavaScript

What you'll do

- Build a website with a simple reauthentication functionality that uses a fingerprint sensor

What you'll need

One of the following devices:

- An Android device, preferably with a biometric sensor

- An iPhone or iPad with Touch ID or Face ID on iOS 14 or higher

- A MacBook Pro or Air with Touch ID on macOS Big Sur or higher

- Windows 10 19H1 or higher with Windows Hello set up

One of the following browsers:

- Google Chrome 67 or higher

- Microsoft Edge 85 or higher

- Safari 14 or higher

Info here:

https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0

Start here:

https://glitch.com/edit/#!/webauthn-codelab-start?path=README.md%3A1%3A0