{ "componentChunkName": "component---src-pages-blog-markdown-remark-fields-slug-js", "path": "/blog/passkey-examples", "result": {"data":{"markdownRemark":{"html":"

Passkeys deliver frictionless, phishing-resistant login experiences across platforms, with more than 1 billion people worldwide having activated at least one passkey as of January 2025. This guide provides an end-to-end tour of passkeys in action — examining how major platforms like Apple, Google, and Coinbase implement passwordless login; exploring practical code examples across different programming languages; and demonstrating how to properly name, register, and authenticate with passkeys in your own applications.

\n

Whether you’re a developer evaluating passkey implementation for your application or a technology decision-maker assessing passwordless authentication strategies, this comprehensive resource covers real-world examples, technical implementation details, and best practices that make passkey deployment successful.

\n

What Is a Passkey?

\n

\n \n \n \n \n

\n

A passkey is a cryptographic credential stored securely on a user’s device that enables passwordless login to websites and applications. Unlike traditional passwords composed of letters, numbers, and symbols,\npasskeys use public-key cryptography to create unique authentication credentials that cannot be guessed, phished, or stolen through data breaches.

\n

How passkeys work relies on asymmetric cryptography, where a private key remains securely stored on the user’s device while the corresponding public key resides on the server. During authentication, the device uses the private key to sign a challenge from the server, proving possession without ever transmitting the private key itself. This architecture fundamentally eliminates password-related vulnerabilities, including phishing attacks, credential stuffing, and database breaches exposing user credentials.

\n

The passkey authentication flow occurs nearly instantaneously, typically requiring only biometric verification like Face ID, Touch ID, or fingerprint recognition — the same gesture users already perform to\nunlock their devices. This seamless experience combines enhanced security with superior usability compared to traditional password-based authentication.

\n

What Are Common Passkey Examples?

\n

\n \n \n \n \n

\n

Apple Passkey Example

\n

Apple has integrated passkey support comprehensively across iOS, iPadOS, and macOS, enabling users to authenticate by using Face ID or Touch ID without passwords. A typical scenario involves accessing a banking application on an iPhone where, instead of entering a password, Face ID verifies the user’s identity, and the passkey authenticates automatically with the server.

\n

Apple promotes passkeys through Safari and iCloud Keychain,with iOS 18 introducing new APIs that allow developers to create passkeys automatically for users. This native platform support means passkeys sync securely across all Apple devices through iCloud Keychain, enabling seamless authentication whether using an iPhone, iPad, or Mac laptop.

\n

Google Passkey Example

\n

Google has made passkeys available and even the default for Google accounts, calling passkey adoption “the beginning of the end” for passwords. Chrome’s built-in credential management enables users to sign into Gmail and other Google services by using passkeys stored in Google Password Manager.

\n

The integration extends across Android devices, where users can authenticate by using fingerprint sensors or face unlock, with passkeys synchronizing through Google Password Manager for cross-device compatibility. This ecosystem-wide support demonstrates Google’s commitment to passwordless authentication as the future standard.

\n

Coinbase Passkey Example

\n

Cryptocurrency exchanges like Coinbase rank highly in passkey adoption due to the critical importance of security for platforms managing digital assets worth billions. Coinbase supports biometric login through\npasskeys in both mobile applications and web browsers, allowing users to access their accounts by using Face ID, fingerprint authentication, or device PINs.

\n

The Coinbase Smart Wallet implementation demonstrates advanced passkey usage where the passkey itself protects access to blockchain wallets. Users create passkeys that verify ownership without managing complex seed phrases, combining enterprise-grade security with a simplified user\nexperience. Coinbase’s passkey implementation includes support for multiple devices and browsers, catering to technically sophisticated users while maintaining accessibility.

\n

Passkey Login Example on Websites

\n

Modern websites implement passkey authentication through the WebAuthn API, creating flows where users click login buttons and immediately receive biometric prompts. A typical implementation in React or plain HTML triggers navigator.credentials.get(), which prompts the browser’s native passkey interface.

\n

The user experience feels identical to unlocking a smartphone — tap the login button, authenticate with biometrics, and gain immediate access. No password typing, no remembering complex credentials, and no vulnerability to phishing attacks that might capture traditional login\ncredentials.

\n

Passkey Example iPhone

\n

Safari on iPhone displays prompts like “Use Passkey for example.com” when users visit sites offering passkey authentication. The seamless integration means iOS handles passkey storage through iCloud Keychain, automatically syncing across devices and prompting for Face ID or Touch\nID when authentication is required.

\n

This native implementation requires no additional apps or configuration — users simply authenticate as they normally would to unlock their device, with the passkey authentication occurring transparently in the background.

\n

How to Choose a Passkey Name and Nickname

\n

Passkey Name Example

\n

Clear, descriptive passkey names help users manage multiple credentials across different devices. A passkey name like “My MacBook Pro” immediately identifies which device the credential resides on, preventing confusion when selecting from multiple available passkeys.

\n

For example, Coinbase Smart Wallet automatically generates passkey names by using creation dates like “Smart Wallet 6/16/2024,” providing temporal context that helps users track when credentials were established. This naming convention becomes particularly valuable when users need to identify and remove outdated passkeys.

\n

Passkey Nickname Example

\n

User-assigned nicknames provide additional context beyond device identification. Examples like “Work iPhone” versus “Home iPad” distinguish devices used in different contexts, while nicknames like “Main Laptop” or “Backup Device” indicate primary versus secondary credentials.

\n

Effective nickname strategies combine device type, location, and usage context: “Office Desktop - Engineering,” “Personal iPhone 15,” or “Travel Tablet.” This specificity reduces authentication friction when\nselecting the appropriate passkey from multiple available options.

\n

Best Practices

\n\n

How to Implement a Passkey Login Flow

\n

Register a Passkey (WebAuthn Create)

\n

Registration begins by calling navigator.credentials.create() with options containing a server-generated challenge, relying party information, and user details:

\n c.charCodeAt(0)),\n rp: {\n name: "Your Application",\n id: "yourdomain.com"\n },\n user: {\n id: Uint8Array.from(options.user.id, c => c.charCodeAt(0)),\n name: options.user.email,\n displayName: options.user.displayName\n },\n pubKeyCredParams: [\n { alg: -7, type: "public-key" },\n { alg: -257, type: "public-key" }\n ],\n authenticatorSelection: {\n authenticatorAttachment: "platform",\n userVerification: "required"\n },\n timeout: 60000\n }\n});`, `67630167260553040000`)\"\n >\n \n \n \n \n
const registrationOptions = await fetch('/passkey/register/options', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ userId: currentUser.id })\n});\nconst options = await registrationOptions.json();\n\n// Create passkey credential\nconst credential = await navigator.credentials.create({\n    publicKey: {\n        challenge: Uint8Array.from(options.challenge, c => c.charCodeAt(0)),\n        rp: {\n            name: \"Your Application\",\n            id: \"yourdomain.com\"\n        },\n        user: {\n            id: Uint8Array.from(options.user.id, c => c.charCodeAt(0)),\n            name: options.user.email,\n            displayName: options.user.displayName\n        },\n        pubKeyCredParams: [\n            { alg: -7, type: \"public-key\" },\n            { alg: -257, type: \"public-key\" }\n        ],\n        authenticatorSelection: {\n            authenticatorAttachment: \"platform\",\n            userVerification: \"required\"\n        },\n        timeout: 60000\n    }\n});
\n

Store Public Key on Server

\n

After credential creation, extract and transmit the public key and credential ID to your server for storage:

\n\n \n \n \n \n
// Send credential to server for storage\nconst response = await fetch('/passkey/register/verify', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n        id: credential.id,\n        rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))),\n        response: {\n            clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(credential.response.clientDataJSON))),\n            attestationObject: btoa(String.fromCharCode(...new Uint8Array(credential.response.attestationObject)))\n        },\n        type: credential.type\n    })\n});\nconst result = await response.json();\nif (result.verified) {\n    console.log('Passkey registered successfully');\n}
\n

Server-side storage associates the public key with the user’s account, enabling future authentication verification.

\n

Authenticate with a Passkey (WebAuthn Get)

\n

Authentication requests credentials through navigator.credentials.get() by using a server-provided challenge and a list of acceptable credential IDs:

\n c.charCodeAt(0)),\n allowCredentials: options.allowCredentials.map(cred => ({\n id: Uint8Array.from(atob(cred.id), c => c.charCodeAt(0)),\n type: 'public-key'\n })),\n userVerification: "required",\n timeout: 60000\n }\n});`, `89842317275719580000`)\"\n >\n \n \n \n \n
// Request authentication options from server\nconst authOptions = await fetch('/passkey/login/options', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ username: userEmail })\n});\nconst options = await authOptions.json();\n\n// Get passkey credential\nconst assertion = await navigator.credentials.get({\n    publicKey: {\n        challenge: Uint8Array.from(options.challenge, c => c.charCodeAt(0)),\n        allowCredentials: options.allowCredentials.map(cred => ({\n            id: Uint8Array.from(atob(cred.id), c => c.charCodeAt(0)),\n            type: 'public-key'\n        })),\n        userVerification: \"required\",\n        timeout: 60000\n    }\n});
\n

Verify Assertion on Server

\n

Server-side verification validates the signed assertion by using the stored public key:

\n\n \n \n \n \n
// Send assertion to server for verification\nconst verifyResponse = await fetch('/passkey/login/verify', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n        id: assertion.id,\n        rawId: btoa(String.fromCharCode(...new Uint8Array(assertion.rawId))),\n        response: {\n            authenticatorData: btoa(String.fromCharCode(...new Uint8Array(assertion.response.authenticatorData))),\n            clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(assertion.response.clientDataJSON))),\n            signature: btoa(String.fromCharCode(...new Uint8Array(assertion.response.signature))),\n            userHandle: assertion.response.userHandle\n                ? btoa(String.fromCharCode(...new Uint8Array(assertion.response.userHandle)))\n                : null\n        },\n        type: assertion.type\n    })\n});\nconst verifyResult = await verifyResponse.json();\nif (verifyResult.verified) {\n    window.location.href = '/dashboard';}
\n

Successful verification confirms the user possesses the private key corresponding to the stored public key, thus completing passwordless authentication.

\n

Passkey Implementation Examples in Code

\n

PHP Passkey Example

\n

PHP developers can implement WebAuthn by using the web-auth/webauthn-lib library:

\ngeneratePublicKeyCredentialCreationOptions(\n \\$userEntity,\n PublicKeyCredentialCreationOptions::ATTESTATION_CONVEYANCE_PREFERENCE_NONE,\n [],\n null\n);\n\n// Store options in session for verification\n\\$_SESSION['registration_challenge'] = \\$publicKeyCredentialCreationOptions;\n\n// Return options to client\necho json_encode(\\$publicKeyCredentialCreationOptions);`, `1042077635830640500`)\"\n >\n \n \n \n \n
<?php\nuse Webauthn\\Server;\nuse Webauthn\\PublicKeyCredentialRpEntity;\nuse Webauthn\\PublicKeyCredentialUserEntity;\n\n// Initialize WebAuthn server\n$rpEntity = new PublicKeyCredentialRpEntity('Your Application','yourdomain.com');\n$server = new Server($rpEntity,$credentialRepository,null);\n\n// Registration\n$userEntity = new PublicKeyCredentialUserEntity('user@example.com',$userId,'John Doe');\n$publicKeyCredentialCreationOptions = $server->generatePublicKeyCredentialCreationOptions(\n    $userEntity,\n    PublicKeyCredentialCreationOptions::ATTESTATION_CONVEYANCE_PREFERENCE_NONE,\n    [],\n    null\n);\n\n// Store options in session for verification\n$_SESSION['registration_challenge'] = $publicKeyCredentialCreationOptions;\n\n// Return options to client\necho json_encode($publicKeyCredentialCreationOptions);
\n

JavaScript (Node.js) Example

\n

Node.js implementations benefit from @simplewebauthn/server for backend logic and @simplewebauthn/browser for client-side integration:

\n {\n const user = await getUserById(req.body.userId);\n const options = await generateRegistrationOptions({\n rpName: 'Your Application',\n rpID: 'yourdomain.com',\n userID: user.id,\n userName: user.email,\n userDisplayName: user.displayName,\n attestationType: 'none',\n authenticatorSelection: {\n authenticatorAttachment: 'platform',\n userVerification: 'required'\n }\n });\n\n // Store challenge in session\n req.session.currentChallenge = options.challenge;\n\n res.json(options);\n});\n\napp.post('/passkey/register/verify', async (req, res) => {\n const verification = await verifyRegistrationResponse({\n response: req.body,\n expectedChallenge: req.session.currentChallenge,\n expectedOrigin: 'https://yourdomain.com',\n expectedRPID: 'yourdomain.com'\n });\n\n if (verification.verified) {\n await storeCredential(verification.registrationInfo);\n res.json({ verified: true });\n } else {\n res.status(400).json({ verified: false });\n }\n});`, `35710506897967950000`)\"\n >\n \n \n \n \n
// Server-side (Node.js with Express)\nconst { generateRegistrationOptions, verifyRegistrationResponse } = require('@simplewebauthn/server');\napp.post('/passkey/register/options', async (req, res) => {\n    const user = await getUserById(req.body.userId);\n    const options = await generateRegistrationOptions({\n        rpName: 'Your Application',\n        rpID: 'yourdomain.com',\n        userID: user.id,\n        userName: user.email,\n        userDisplayName: user.displayName,\n        attestationType: 'none',\n        authenticatorSelection: {\n            authenticatorAttachment: 'platform',\n            userVerification: 'required'\n        }\n    });\n\n    // Store challenge in session\n    req.session.currentChallenge = options.challenge;\n\n    res.json(options);\n});\n\napp.post('/passkey/register/verify', async (req, res) => {\n    const verification = await verifyRegistrationResponse({\n        response: req.body,\n        expectedChallenge: req.session.currentChallenge,\n        expectedOrigin: 'https://yourdomain.com',\n        expectedRPID: 'yourdomain.com'\n    });\n\n    if (verification.verified) {\n        await storeCredential(verification.registrationInfo);\n        res.json({ verified: true });\n    } else {\n        res.status(400).json({ verified: false });\n    }\n});
\n

Generic Pseudocode

\n

Simplified pseudocode illustrates the core flow:

\n\n \n \n \n \n
// Registration Flow\nconst options = await fetch('/generate-registration-options');\nconst credential = await navigator.credentials.create(options);\nawait fetch('/verify-registration', {\n    method: 'POST',\n    body: JSON.stringify(credential)\n});\n\n// Authentication Flow\nconst authOptions = await fetch('/generate-authentication-options');\nconst assertion = await navigator.credentials.get(authOptions);\nawait fetch('/verify-authentication', {\n    method: 'POST',\n    body: JSON.stringify(assertion)\n});
\n

How SuperTokens Supports Passkey-Based Authentication

\n

\n \n \n \n \n

\n

Passkeys provide a modern, phishing-resistant alternative to passwords, allowing users to authenticate by using simple device-based gestures instead of memorizing credentials. SuperTokens streamlines this approach by offering fully managed components that handle the complexity of WebAuthn and passkey infrastructure for developers.

\n
    \n
  • Built-in WebAuthn flows automate challenge generation, credential verification, and session management without requiring developers to implement complex cryptographic operations. SuperTokens handles the entire passkey lifecycle from registration through authentication and credential revocation.
    • \n
  • Secure credential storage manages public keys, signature counters, and device metadata in a hardened data store with encryption at rest. The platform tracks credential usage patterns and signature counters to detect potential security anomalies like credential cloning attempts.
    • \n
  • Device management UI enables users to name, list, and revoke their passkeys through pre-built interfaces that integrate seamlessly with existing authentication flows. Users can manage multiple passkeys across different devices, removing credentials for lost or replaced hardware.
    • \n
  • CSRF and session integration ensure passkey authentication coordinates properly with existing session management, providing seamless cookie handling alongside passwordless login. This integration maintains security across the complete authentication lifecycle without requiring developers to synchronize multiple authentication mechanisms manually.
    • \n
\n

What Are the Best Practices for Passkey Implementation?

\n

Passkey deployments benefit most when supported by strong operational and security practices that ensure reliability across different devices and environments. The following guidelines help maintain a secure, user-friendly passwordless experience while reducing failure points and support overhead.

\n
    \n
  • Use HTTPS everywhere as WebAuthn APIs are mandatory requirements that will not function over insecure HTTP connections. All authentication flows, from registration through authentication, must occur over properly configured HTTPS with valid TLS certificates.
    • \n
  • Offer fallback authentication methods, including traditional multi-factor authentication or recovery codes, for scenarios where passkey authentication fails. Users might encounter situations where biometric authentication is unavailable or devices are lost, requiring alternative authentication paths.
    • \n
  • Limit registered devices by prompting users to review and remove old passkeys periodically. Accumulated credentials from replaced devices create security risks and user confusion, particularly when multiple outdated passkeys appear during authentication.
    • \n
  • Monitor signature counters to detect credential cloning or misuse. WebAuthn includes signature counters that increment with each use — unexpected counter values indicate potential security issues requiring investigation and possible credential revocation.
    • \n
  • Educate users through clear prompts explaining passkey functionality, security benefits, and naming guidance. User education reduces support burden while increasing adoption rates by building confidence in passwordless authentication.
    • \n
\n

Conclusion and Next Steps

\n

Passkeys mark a clean break from the old username-plus-password ritual, giving users a login experience that feels intuitive on day one and resilient by design. Consumer awareness has jumped from 39% to 57% in just two years, demonstrating rapid mainstream acceptance of passwordless authentication technology.

\n

Major platforms, including Apple, Google, Microsoft, PayPal, Coinbase, and hundreds of others, have implemented passkey support, creating an ecosystem where users increasingly expect passwordless authentication as the standard experience. This momentum signals that passkeys represent not merely an incremental improvement but a fundamental shift in authentication architecture.

\n

SuperTokens provides turnkey WebAuthn support that eliminates implementation complexity while delivering production-grade security. The platform handles cryptographic operations, credential storage, device management, and session integration, enabling developers to\ndeploy passkey authentication in hours rather than weeks of custom development.

\n

Start implementing passkey authentication today to provide users with the security and convenience they increasingly expect from modern applications.

","frontmatter":{"date":"December 09, 2025","title":"Passkey Examples: Real-World Use Cases and Implementation","cover":"passkey-examples.png","author":"Mostafa Ibrahim","description":"Discover real-world passkey examples across Apple, Google, Coinbase, iPhone, PHP, and more, plus step-by-step implementation guidance."},"fields":{"slug":"/passkey-examples/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"bab9edf4-e0ac-5fc3-927c-9e3b1cf5fbf4","fields__slug":"/passkey-examples/","__params":{"fields__slug":"passkey-examples"}}}, "staticQueryHashes": []}