Passkeys: What the Heck and Why?
Passkeys are rapidly gaining traction as a revolutionary authentication method. Featured prominently at W3C TPAC 2022, they've integrated into Safari 16, macOS, iOS, and are poised to become the standard for password managers like 1Password. Already supported on Android, future releases will bring passkey functionality to Chrome OS and Windows.
While often overlooked in the front-end community, passkeys' impact on user experience, particularly concerning authentication and form processing, is undeniable. This article explores passkeys and the WebAuthn API, offering a comprehensive understanding of this emerging technology.
Table of Contents
- Key Terminology
- Understanding Passkeys
- Passkeys: A Password Replacement
- Cryptography Explained
- Accessing Passkeys
- Passkeys vs. WebAuthn
- The Authentication Process: A Summary
- A Detailed Look at Passkey Implementation
- Potential Drawbacks
- The Future of Passkeys
- Further Resources
Key Terminology
Navigating the world of passkeys requires familiarity with specific terminology. Let's clarify some key concepts:
- Relying Party (Server): The server handling authentication requests. We'll use "server" throughout this article.
- Client: The web browser or operating system.
- Authenticator: Software or hardware generating and storing public key pairs.
- FIDO: An open standards organization defining FIDO credentials.
- WebAuthn: The underlying protocol for passkeys (also known as FIDO2 credentials or single-device FIDO credentials).
- Passkeys: WebAuthn with cloud synchronization (multi-device FIDO credentials, discoverable credentials, or resident credentials).
- Public Key Cryptography: A system using private and public key pairs for signing/verification or encryption/decryption (asymmetric cryptography).
- RSA: A public key cryptography algorithm.
- Elliptic Curve Cryptography (ECC): A modern public key cryptography algorithm.
- ES256: An elliptic curve public key using the ECDSA signing algorithm with SHA256 hashing.
- RS256: Similar to ES256, but uses RSA with RSASSA-PKCS1-v1.5 and SHA256.
Understanding Passkeys
Before discussing passkeys, we must understand WebAuthn (FIDO2). Passkeys build upon WebAuthn, leveraging public key cryptography to replace passwords. A security device (hardware key or TPM) generates private and public keys.
The public key is openly accessible, while the private key remains securely stored on the generating device. A key limitation of WebAuthn was device dependency; losing the device meant losing access. Passkeys address this through cloud synchronization, enabling access across multiple devices. However, it's important to note that single-device credentials also exist.
Currently, iOS, macOS, and Android offer comprehensive support for cloud-synced passkeys, although browser compatibility remains a factor. Google Password Manager and Apple iCloud Keychain facilitate synchronization.
Passkeys: A Password Replacement
Public key cryptography employs signing. Data is processed using a private key via a signing algorithm, and then verified using the public key. Anyone can generate a key pair, but only the private key can create a signature verifiable with the corresponding public key. This signature replaces the password. The server stores the public key, and authentication involves verifying possession of the private key by signing a random challenge.
This approach eliminates the risks associated with password breaches. If a database is compromised, only public keys are exposed, rendering them useless to attackers. Forgotten passwords become a thing of the past, as browsers remember credentials, simplifying login processes. Biometrics or PINs can enhance security.
Cryptography Explained
Public key cryptography utilizes private and public key pairs. Encryption uses the recipient's public key, ensuring only the recipient's private key can decrypt. This provides confidentiality. Authenticity is ensured through signing and verification. The sender's private key signs a message hash, verifiable only with the sender's public key.
Accessing Passkeys
Access requires key generation and storage, often facilitated by an authenticator (hardware or software). Software authenticators might use a TPM or secure enclave, while hardware authenticators include devices like YubiKeys.
The Client to Authenticator Protocol (CTAP) provides an interface for accessing authenticators via various methods (NFC, USB, Bluetooth). A unique feature is using a phone (via Bluetooth) as an authenticator for devices lacking native passkey support.
Passkeys vs. WebAuthn
Passkeys (multi-device) differ from WebAuthn keys (single-device) in storage and login processes. WebAuthn requires a user handle and an allowCredentials list, while passkeys utilize the server's domain name to identify associated keys, streamlining the login process. Cryptographically, they are essentially identical.
The Authentication Process: A Summary
Both WebAuthn and passkey generation involve receiving a server challenge and using navigator.credentials.create
to generate a key pair. The public key is sent to the server. Login uses navigator.credentials.get
to sign a new challenge, which is then verified by the server.
A Detailed Look at Passkey Implementation
Passkey usage involves attestation (registration) and assertion (login) phases.
Attestation
navigator.credentials.create
is central to attestation. Options specify the desired key pair:
// ... (code snippet for PublicKeyCredentialCreationOptions) ...
The response includes the public key and clientDataJSON
(containing type
, challenge
, and origin
). The server validates this data and stores the public key, ID, and optionally the attestationObject
and COSE algorithm.
Assertion
navigator.credentials.get
handles assertion.
// ... (code snippet for PublicKeyCredentialRequestOptions) ...
The response includes the signature and authenticatorData
(containing the origin hash and signCount
). The server verifies the signature, clientDataJSON
, and signCount
for authentication.
Potential Drawbacks
Current limitations include limited operating system support (particularly Windows and Linux) and lack of interoperability between Google and Apple's passkey platforms.
The Future of Passkeys
Widespread operating system adoption will drive increased usage. Password managers will integrate passkey support, and native support on Android and iOS will further solidify their position. Passkeys promise a passwordless future, enhancing security and user experience.
Further Resources
- Live Demo
- Demo GitHub Repository
- YubiKey Documentation
- Passkeys.dev
- Passkeys.io
- Webauthn.io
The above is the detailed content of Passkeys: What the Heck and Why?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.

I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing

If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?

Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
