Table of Contents
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
Attestation
Assertion
Potential Drawbacks
The Future of Passkeys
Further Resources
Home Web Front-end CSS Tutorial Passkeys: What the Heck and Why?

Passkeys: What the Heck and Why?

Mar 09, 2025 am 10:44 AM

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) ...
Copy after login

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) ...
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

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.

Building an Ethereum app using Redwood.js and Fauna Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

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

Can you get valid CSS property values from the browser? Can you get valid CSS property values from the browser? Apr 02, 2025 pm 06:17 PM

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.

Stacked Cards with Sticky Positioning and a Dash of Sass Stacked Cards with Sticky Positioning and a Dash of Sass Apr 03, 2025 am 10:30 AM

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.

A bit on ci/cd A bit on ci/cd Apr 02, 2025 pm 06:21 PM

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

Comparing Browsers for Responsive Design Comparing Browsers for Responsive Design Apr 02, 2025 pm 06:25 PM

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

Using Markdown and Localization in the WordPress Block Editor Using Markdown and Localization in the WordPress Block Editor Apr 02, 2025 am 04:27 AM

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

Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'? Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'? Apr 05, 2025 pm 05:51 PM

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...

See all articles