Summary
Highlights
This section introduces how to set up secure fingerprint-based authentication using browser-built tools, called 'passkeys'. It explains that passkeys work not only for fingerprints but also for Face ID, USB devices, and password managers, and delves into the 'Navigator.credentials' API, specifically 'create' for signup and 'get' for login.
The video clarifies what a passkey is, distinguishing it from passwords by its device-specific nature. It details how passkeys use public-key cryptography, where a public key is stored on the server and a private key on the device, ensuring authentication by comparing them. The section also covers essential parameters needed for creating a public key credential, such as 'challenge', 'RP' (relying party), 'user', and supported algorithms.
This part demonstrates the initial client-side implementation of the signup functionality. It explains how to use 'Navigator.credentials.create' with the previously discussed parameters and shows the data returned after a successful passkey creation, highlighting the 'raw ID' as crucial for future authentication.
The video then moves to implementing the login functionality on the client side using 'Navigator.credentials.get'. It emphasizes the need for a challenge from the server for verification and how 'allow credentials' are used to specify which passkeys to look for on the device, linking back to the 'raw ID' saved during signup.
This section introduces the 'SimpleWebAuthn' open-source library to handle complex cryptographic verification on the server side. It outlines a three-step process for registration: getting a challenge from the server, creating a passkey on the client, and saving/verifying the passkey on the server.
The client-side signup process is updated to integrate with the 'SimpleWebAuthn' library. It covers making fetch requests to the server for challenges and options, using 'startRegistration' to create the passkey, and sending the generated passkey information back to the server for verification and saving.
This segment focuses on the server-side implementation for initializing registration. It details how to create an API endpoint ('/init-register') that generates registration options, including a challenge, using 'generateRegistrationOptions' from 'SimpleWebAuthn'. It also explains how to store this challenge and user-related information in a secure HTTP-only cookie for later verification.
The video then covers the server-side API endpoint for verifying registration ('/verify-register'). It shows how to use 'verifyRegistrationResponse' from 'SimpleWebAuthn' to validate the information sent from the client, ensuring it hasn't been tampered with. This includes checking the challenge from the cookie and saving the new user's passkey credentials in a simulated database if verification is successful.
This part details the client-side login process using 'SimpleWebAuthn', noting its similarity to the signup flow. It involves fetching authentication options from the server, using 'startAuthentication' to get the passkey from the device, and sending this data to the server for verification.
The server-side implementation for initializing authentication is explained. A ('/init-auth') endpoint is created to generate authentication options, including a challenge, using 'generateAuthenticationOptions'. It also retrieves the user's previously stored passkey information to narrow down potential authentication methods and stores the challenge in a secure cookie.
The final server-side endpoint ('/verify-auth') for verifying authentication is covered. It describes how to use 'verifyAuthenticationResponse' to validate the client's login attempt, comparing the provided passkey information against the stored user data and the challenge from the cookie. Upon successful verification, the user's counter is updated, and an authentication session (e.g., using a session cookie or JWT) would typically be established.