{"id":377305,"date":"2023-04-12T10:41:53","date_gmt":"2023-04-12T17:41:53","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377305"},"modified":"2024-03-29T19:13:04","modified_gmt":"2024-03-30T02:13:04","slug":"passkeys-what-the-heck-and-why","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/passkeys-what-the-heck-and-why\/","title":{"rendered":"Passkeys: What the Heck and Why?"},"content":{"rendered":"\n<p>These things called&nbsp;<strong>passkeys<\/strong>&nbsp;sure are making the rounds these days. They were a main attraction at&nbsp;<a href=\"https:\/\/www.w3.org\/2022\/09\/TPAC\/demos\/passkeys.html\" rel=\"noopener\">W3C TPAC 2022<\/a>, gained support in&nbsp;<a href=\"https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-16_1-release-notes\/\" rel=\"noopener\">Safari 16<\/a>, are finding their way into&nbsp;<a href=\"https:\/\/developer.apple.com\/passkeys\/\" rel=\"noopener\">macOS and iOS<\/a>, and are slated to be&nbsp;<a href=\"https:\/\/www.future.1password.com\/passkeys\/\" rel=\"noopener\">the future for password managers like 1Password<\/a>. They are&nbsp;<a href=\"https:\/\/passkeys.dev\/device-support\/\" rel=\"noopener\">already supported<\/a>&nbsp;in Android, and will soon find their way into Chrome OS and Windows in future releases.<\/p>\n\n\n\n<p>Geeky OS security enhancements don\u2019t exactly make big headlines in the front-end community, but it stands to reason that passkeys are going to be a \u201cthing\u201d. And considering how passwords and password apps affect the user experience of things like authentication and form processing, we might want to at least wrap our minds around them, so we know what\u2019s coming.<\/p>\n\n\n\n<p>That\u2019s the point of this article. I\u2019ve been studying and experimenting with passkeys \u2014 and the WebAuthn API they are built on top of \u2014 for some time now. Let me share what I\u2019ve learned.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"simpletoc-hidden wp-block-heading\" id=\"table-of-contents\">Table of contents<\/h3>\n\n<ul class=\"simpletoc-list\"   >\n<\/li><li>\n<a  href=\"#terminology\">Terminology<\/a><\/li><li>\n<a  href=\"#what-are-passkeys\">What are passkeys?<\/a><\/li><li>\n<a  href=\"#how-do-passkeys-replace-passwords\">How do passkeys replace passwords?<\/a><\/li><li>\n<a  href=\"#more-about-cryptography\">More about cryptography<\/a><\/li><li>\n<a  href=\"#how-do-we-access-passkeys\">How do we access passkeys?<\/a><\/li><li>\n<a  href=\"#the-difference-between-passkeys-and-webauthn\">The difference between passkeys and WebAuthn<\/a><\/li><li>\n<a  href=\"#the-process-in-a-nutshell\">The process\u2026 in a nutshell<\/a><\/li><li>\n<a  href=\"#the-meat-and-potatoes\">The meat and potatoes<\/a><\/li><li>\n<a  href=\"#some-downsides\">Some downsides<\/a><\/li><li>\n<a  href=\"#where-are-things-going\">Where are things going?<\/a><\/li><li>\n<a  href=\"#resources\">Resources<\/a><\/li><\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"terminology\">Terminology<\/h3>\n\n\n<p>Here\u2019s the obligatory section of the terminology you\u2019re going to want to know as we dig in. Like most tech, passkeys are wrought with esoteric verbiage and acronyms that are often roadblocks to understanding. I\u2019ll try to de-mystify several for you here.<\/p>\n\n\n\n<ul>\n<li><strong>Relying Party:<\/strong>&nbsp;the server you will be authenticating against. We&#8217;ll use \u201cserver\u201d to imply the Relying Party in this article.<\/li>\n\n\n\n<li><strong>Client:<\/strong>&nbsp;in our case, the web browser or operating system.<\/li>\n\n\n\n<li><strong>Authenticator:<\/strong>&nbsp;Software and\/or hardware devices that allow generation and storage for public key pairs.<\/li>\n\n\n\n<li><strong>FIDO<\/strong>: An open standards body that also creates specifications around FIDO credentials.<\/li>\n\n\n\n<li><strong>WebAuthn<\/strong>: The underlying protocol for passkeys, Also known as a&nbsp;<a href=\"https:\/\/fidoalliance.org\/fido2\/\" rel=\"noopener\">FIDO2<\/a>&nbsp;credential or single-device FIDO credentials.<\/li>\n\n\n\n<li><strong>Passkeys<\/strong>: WebAuthn, but with cloud syncing (also called multi-device FIDO credentials, discoverable credentials, or resident credentials).<\/li>\n\n\n\n<li><strong>Public Key Cryptography:<\/strong>&nbsp;A generated key pair that includes a private and public key. Depending on the algorithm, it should either be used for signing and verification or encrypting and decrypting. This is also known as&nbsp;<em>asymmetric cryptography<\/em>.<\/li>\n\n\n\n<li><strong>RSA:<\/strong>&nbsp;An acronym of the creators\u2019 names, Rivest Shamir and Adel. RSA is an older, but still useful, family of public key cryptography based on factoring primes.<\/li>\n\n\n\n<li><strong>Elliptic Curve Cryptography (ECC):<\/strong>&nbsp;A newer family of cryptography&nbsp;<a href=\"https:\/\/csrc.nist.gov\/Projects\/Elliptic-Curve-Cryptography\" rel=\"noopener\">based on elliptic curves<\/a>.<\/li>\n\n\n\n<li><strong>ES256:<\/strong>&nbsp;An elliptic curve public key that uses an ECDSA signing algorithm (<a href=\"https:\/\/nvlpubs.nist.gov\/nistpubs\/FIPS\/NIST.FIPS.186-5.pdf\" rel=\"noopener\">PDF<\/a>) with&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/SHA-2\" rel=\"noopener\">SHA256<\/a>&nbsp;for hashing.<\/li>\n\n\n\n<li><strong>RS256:<\/strong>&nbsp;Like ES256, but it uses RSA with&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/SubtleCrypto\/sign#rsassa-pkcs1-v1_5_2\" rel=\"noopener\">RSASSA-PKCS1-v1.5<\/a>&nbsp;and SHA256.<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"what-are-passkeys\">What are passkeys?<\/h3>\n\n\n<p>Before we can talk specifically about passkeys, we need to talk about another protocol called&nbsp;<a href=\"https:\/\/webauthn.guide\/\" rel=\"noopener\">WebAuthn<\/a>&nbsp;(also known as FIDO2). Passkeys are a specification that is built on top of WebAuthn. WebAuthn allows for public key cryptography to replace passwords. We use some sort of security device, such as a hardware key or&nbsp;<a href=\"https:\/\/learn.microsoft.com\/en-us\/windows\/security\/information-protection\/tpm\/trusted-platform-module-top-node\" rel=\"noopener\">Trusted Platform Module<\/a>&nbsp;(TPM), to create private and public keys.<\/p>\n\n\n\n<p>The public key is for anyone to use. The private key, however, cannot be removed from the device that generated it. This was one of the issues with WebAuthn; if you lose the device, you lose access.<\/p>\n\n\n\n<p>Passkeys solves this by providing a cloud sync of your credentials. In other words, what you generate on your computer can now also be used on your phone (though confusingly, there are single-device credentials too).<\/p>\n\n\n\n<p>Currently, at the time of writing, only iOS, macOS, and Android provide full support for cloud-synced passkeys, and even then, they are limited by the browser being used. Google and Apple provide an interface for syncing via their&nbsp;<a href=\"https:\/\/passwords.google.com\/\" rel=\"noopener\">Google Password Manager<\/a> and&nbsp;<a href=\"https:\/\/support.apple.com\/en-us\/HT204085\" rel=\"noopener\">Apple iCloud Keychain<\/a>&nbsp;services, respectively.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"how-do-passkeys-replace-passwords\">How do passkeys replace passwords?<\/h3>\n\n\n<p>In public key cryptography, you can perform what is known as <em>signing<\/em>. Signing takes a piece of data and then runs it through a signing algorithm with the private key, where it can then be verified with the public key.<\/p>\n\n\n\n<p>Anyone can generate a public key pair, and it&#8217;s not attributable to any person since any person could have generated it in the first place. What makes it useful is that only data signed with the private key can be verified with the public key. That&#8217;s the portion that replaces a password \u2014 a server stores the public key, and we sign in by verifying that we have the other half (e.g. private key), by signing a random challenge.<\/p>\n\n\n\n<p>As an added benefit, since we&#8217;re storing the user&#8217;s public keys within a database, there is no longer concern with password breaches affecting millions of users. This reduces phishing, breaches, and a slew of other security issues that our password-dependent world currently faces. If a database is breached, all that&#8217;s stored in the user&#8217;s public keys, making it virtually useless to an attacker.<\/p>\n\n\n\n<p>No more forgotten emails and their associated passwords, either! The browser will remember which credentials you used for which website \u2014 all you need to do is make a couple of clicks, and you&#8217;re logged in. You can provide a secondary means of verification to use the passkey, such as biometrics or a pin, but those are still much faster than the passwords of yesteryear.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-about-cryptography\">More about cryptography<\/h3>\n\n\n<p>Public key cryptography involves having a private and a public key (known as a key pair). The keys are generated together and have separate uses. For example, the private key is intended to be kept secret, and the public key is intended for whomever you want to exchange messages with.<\/p>\n\n\n\n<p>When it comes to encrypting and decrypting a message, the recipient\u2019s public key is used to encrypt a message so that only the recipient&#8217;s private key can decrypt the message. In security parlance, this is known as \u201cproviding confidentiality\u201d. However, this doesn&#8217;t provide proof that the sender is who they say they are, as anyone can potentially use a public key to send someone an encrypted message.<\/p>\n\n\n\n<p>There are cases where we need to verify that a message did indeed come from its sender. In these cases, we use signing and signature verification to ensure that the sender is who they say they are (also known as&nbsp;<em>authenticity<\/em>). In public key (also called&nbsp;<em>asymmetric<\/em>) cryptography, this is generally done by signing the hash of a message, so that only the public key can correctly verify it. The hash and the sender&#8217;s private key produce a signature after running it through an algorithm, and then anyone can verify the message came from the sender with the sender&#8217;s public key.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"how-do-we-access-passkeys\">How do we access passkeys?<\/h3>\n\n\n<p>To access passkeys, we first need to generate and store them somewhere. Some of this functionality can be provided with an authenticator. An&nbsp;<em>authenticator<\/em>&nbsp;is any hardware or software-backed device that provides the ability for cryptographic key generation. Think of those one-time passwords you get from&nbsp;<a href=\"https:\/\/support.google.com\/accounts\/answer\/1066447?hl=en&amp;co=GENIE.Platform%3DAndroid\" rel=\"noopener\">Google Authenticator<\/a>,&nbsp;<a href=\"https:\/\/1password.com\/\" rel=\"noopener\">1Password<\/a>, or&nbsp;<a href=\"https:\/\/www.lastpass.com\/\" rel=\"noopener\">LastPass<\/a>, among others.<\/p>\n\n\n\n<p>For example, a software authenticator can use the Trusted Platform Module (TPM) or secure enclave of a device to create credentials. The credentials can be then stored remotely and synced across devices e.g. passkeys. A hardware authenticator would be something like a&nbsp;<a href=\"https:\/\/www.yubico.com\/\" rel=\"noopener\">YubiKey<\/a>, which can generate and store keys on the device itself.<\/p>\n\n\n\n<p>To access the authenticator, the browser needs to have access to hardware, and for that, we need an interface. The interface we use here is the Client to Authenticator Protocol (CTAP). It allows access to different authenticators over different mechanisms. For example, we can access an authenticator over NFC, USB, and Bluetooth by utilizing CTAP.<\/p>\n\n\n\n<p>One of the more interesting ways to use passkeys is by connecting your phone over Bluetooth to another device that might not support passkeys. When the devices are paired over Bluetooth, I can log into the browser on my computer using my phone as an intermediary!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-difference-between-passkeys-and-webauthn\">The difference between passkeys and WebAuthn<\/h3>\n\n\n<p>Passkeys and WebAuthn keys differ in several ways. First, passkeys are considered multi-device credentials and can be synced across devices. By contrast, WebAuthn keys are single-device credentials \u2014 a fancy way of saying you\u2019re bound to one device for verification.<\/p>\n\n\n\n<p>Second, to authenticate to a server, WebAuthn keys need to provide the user handle for login, after which an&nbsp;<code>allowCredentials<\/code>&nbsp;list is returned to the client from the server, which informs what credentials can be used to log in.&nbsp;<strong>Passkeys skip this step and use the server&#8217;s domain name to show which keys are already bound to that site.<\/strong>&nbsp;You\u2019re able to select the passkey that is associated with that server, as it&#8217;s already known by your system.<\/p>\n\n\n\n<p>Otherwise, the keys are cryptographically the same; they only differ in how they&#8217;re stored and what information they use to start the login process.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-process-in-a-nutshell\">The process\u2026 in a nutshell<\/h3>\n\n\n<p>The process for generating a WebAuthn or a passkey is very similar: get a challenge from the server and then use the&nbsp;<code>navigator.credentials.create<\/code>&nbsp;web API to generate a public key pair. Then, send the challenge and the public key back to the server to be stored.<\/p>\n\n\n\n<p>Upon receiving the public key and challenge, the server validates the challenge and the session from which it was created. If that checks out, the public key is stored, as well as any other relevant information like the user identifier or attestation data, in the database.<\/p>\n\n\n\n<p>The user has one more step \u2014 retrieve another challenge from the server and use the&nbsp;<code>navigator.credentials.get<\/code>&nbsp;API to sign the challenge. We send back the signed challenge to the server, and the server verifies the challenge, then logs us in if the signature passes.<\/p>\n\n\n\n<p>There is, of course, quite a bit more to each step. But that is generally how we&#8217;d log into a website using WebAuthn or passkeys.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-meat-and-potatoes\">The meat and potatoes<\/h3>\n\n\n<p>Passkeys are used in two distinct phases: the&nbsp;<strong>attestation<\/strong>&nbsp;and&nbsp;<strong>assertion<\/strong>&nbsp;phases.<\/p>\n\n\n\n<p>The attestation phase can also be thought of as the registration phase. You&#8217;d sign up with an email and password for a new website, however, in this case, we&#8217;d be using our passkey.<\/p>\n\n\n\n<p>The assertion phase is similar to how you&#8217;d log in to a website after signing up.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"attestation\">Attestation<\/h4>\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/attestation.png?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"736\" height=\"569\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/attestation.png?resize=736%2C569&#038;ssl=1\" alt=\"\" class=\"wp-image-377328\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/attestation.png?w=736&amp;ssl=1 736w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/attestation.png?resize=300%2C232&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2023\/02\/attestation.png\">View full size<\/a><\/figcaption><\/figure>\n\n\n\n<p>The&nbsp;<code>navigator.credentials.create<\/code>&nbsp;API is the focus of our attestation phase. We&#8217;re registered as a new user in the system and need to generate a new public key pair. However, we need to specify what kind of key pair we want to generate. That means we need to provide options to&nbsp;<code>navigator.credentials.create<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code>\/\/ The `challenge` is random and has to come from the server\nconst publicKey: PublicKeyCredentialCreationOptions = {\n  challenge: safeEncode(challenge),\n  rp: {\n    id: window.location.host,\n    name: document.title,\n  },\n  user: {\n    id: new TextEncoder().encode(crypto.randomUUID()), \/\/ Why not make it random?\n    name: 'Your username',\n    displayName: 'Display name in browser',\n  },\n  pubKeyCredParams: [\n    {\n      type: 'public-key',\n      alg: -7, \/\/ ES256\n    },\n    {\n      type: 'public-key',\n      alg: -256, \/\/ RS256\n    },\n  ],\n  authenticatorSelection: {\n    userVerification: 'preferred', \/\/ Do you want to use biometrics or a pin?\n    residentKey: 'required', \/\/ Create a resident key e.g. passkey\n  },\n  attestation: 'indirect', \/\/ indirect, direct, or none\n  timeout: 60_000,\n};<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code>const pubKeyCredential: PublicKeyCredential = await navigator.credentials.create({\n  publicKey\n});\nconst {\n  id \/\/ the key id a.k.a. kid\n} = pubKeyCredential;\nconst pubKey = pubKeyCredential.response.getPublicKey();\nconst { clientDataJSON, attestationObject } = pubKeyCredential.response;\nconst { type, challenge, origin } = JSON.parse(new TextDecoder().decode(clientDataJSON));\n\/\/ Send data off to the server for registration<\/code><\/pre>\n\n\n\n<p>We&#8217;ll get&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/PublicKeyCredential\" rel=\"noopener\"><code>PublicKeyCredential<\/code><\/a>&nbsp;which contains an&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AuthenticatorAttestationResponse\" rel=\"noopener\"><code>AuthenticatorAttestationResponse<\/code><\/a>&nbsp;that comes back after creation. The credential has the generated key pair\u2019s ID.<\/p>\n\n\n\n<p>The response provides a couple of bits of useful information. First, we have our public key in this response, and we need to send that to the server to be stored. Second, we also get back the&nbsp;<code>clientDataJSON<\/code>&nbsp;property which we can decode, and from there, get back the&nbsp;<code>type<\/code>,&nbsp;<code>challenge<\/code>, and&nbsp;<code>origin<\/code>&nbsp;of the passkey.<\/p>\n\n\n\n<p>For attestation, we want to validate the&nbsp;<code>type<\/code>,&nbsp;<code>challenge<\/code>, and&nbsp;<code>origin<\/code>&nbsp;on the server, as well as store the public key with its identifier, e.g. kid. We can also optionally store the&nbsp;<code>attestationObject<\/code>&nbsp;if we wish. Another useful property to store is the&nbsp;<a href=\"https:\/\/www.iana.org\/assignments\/cose\/cose.xhtml#algorithms\" rel=\"noopener\">COSE<\/a>&nbsp;algorithm, which is defined above in our &nbsp;<code>PublicKeyCredentialCreationOptions<\/code>&nbsp;with&nbsp;<code>alg: -7<\/code>&nbsp;or&nbsp;<code>alg: -256<\/code>, in order to easily verify any signed challenges in the assertion phase.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"assertion\">Assertion<\/h4>\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/assertion.png?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"717\" height=\"516\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/assertion.png?resize=717%2C516&#038;ssl=1\" alt=\"\" class=\"wp-image-377330\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/assertion.png?w=717&amp;ssl=1 717w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/assertion.png?resize=300%2C216&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2023\/02\/assertion.png\">View full size<\/a><\/figcaption><\/figure>\n\n\n\n<p>The&nbsp;<code>navigator.credentials.get<\/code>&nbsp;API will be the focus of the assertion phase. Conceptually, this would be where the user logs in to the web application after signing up.<\/p>\n\n\n\n<pre class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code>\/\/ The `challenge` is random and has to come from the server\nconst publicKey: PublicKeyCredentialRequestOptions = {\n  challenge: new TextEncoder().encode(challenge),\n  rpId: window.location.host,\n  timeout: 60_000,\n};<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code>const publicKeyCredential: PublicKeyCredential = await navigator.credentials.get({\n  publicKey,\n  mediation: 'optional',\n});\nconst {\n  id \/\/ the key id, aka kid\n} = pubKeyCredential;\nconst { clientDataJSON, attestationObject, signature, userHandle } = pubKeyCredential.response;\nconst { type, challenge, origin } = JSON.parse(new TextDecoder().decode(clientDataJSON));\n\/\/ Send data off to the server for verification<\/code><\/pre>\n\n\n\n<p>We&#8217;ll again get a&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/PublicKeyCredential\" rel=\"noopener\"><code>PublicKeyCredential<\/code><\/a>&nbsp;with an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AuthenticatorAssertionResponse\" rel=\"noopener\"><code>AuthenticatorAssertionResponse<\/code><\/a>&nbsp;this time. The credential again includes the key identifier.<\/p>\n\n\n\n<p>We also get the&nbsp;<code>type<\/code>,&nbsp;<code>challenge<\/code>, and&nbsp;<code>origin<\/code>&nbsp;from the&nbsp;<code>clientDataJSON<\/code>&nbsp;again. The&nbsp;<code>signature<\/code>&nbsp;is now included in the response, as well as the <code>authenticatorData<\/code>. We&#8217;ll need those and the&nbsp;<code>clientDataJSON<\/code>&nbsp;to verify that this was signed with the private key.<\/p>\n\n\n\n<p>The&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AuthenticatorAssertionResponse\/authenticatorData\" rel=\"noopener\"><code>authenticatorData<\/code><\/a>&nbsp;includes some properties that are worth tracking First is the SHA256 hash of the origin you&#8217;re using, located within the first 32 bytes, which is useful for verifying that request comes from the same origin server. Second is the&nbsp;<code>signCount<\/code>, which is from byte 33 to 37. This is generated from the authenticator and should be compared to its previous value to ensure that nothing fishy is going on with the key. The value should always 0 when it\u2019s a multi-device passkey and should be randomly larger than the previous signCount when it\u2019s a single-device passkey.<\/p>\n\n\n\n<p>Once you&#8217;ve asserted your login, you should be logged in \u2014&nbsp;<em>congratulations<\/em>! Passkeys is a pretty great protocol, but it does come with some caveats.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"some-downsides\">Some downsides<\/h3>\n\n\n<p>There&#8217;s a lot of upside to Passkeys, however, there are some issues with it at the time of this writing. For one thing, passkeys is somewhat still early support-wise, with only single-device credentials allowed on Windows and very little support for Linux systems.&nbsp;<a href=\"http:\/\/passkeys.dev\/\" rel=\"noopener\">Passkeys.dev<\/a>&nbsp;provides a&nbsp;<a href=\"https:\/\/passkeys.dev\/device-support\/\" rel=\"noopener\">nice table that\u2019s sort of like the Caniuse of this protocol<\/a>.<\/p>\n\n\n\n<p>Also, Google&#8217;s and Apple&#8217;s passkeys platforms do not communicate with each other. If you want to get your credentials from your Android phone over to your iPhone&#8230; well, you&#8217;re out of luck for now. That&#8217;s not to say there is no interoperability! You can log in to your computer by using your phone as an authenticator. But it would be much cleaner just to have it built into the operating system and synced without it being locked at the vendor level.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"where-are-things-going\">Where are things going?<\/h3>\n\n\n<p>What does the passkeys protocol of the future look like? It looks pretty good! Once it gains support from more operating systems, there should be an uptake in usage, and you&#8217;ll start seeing it used more and more in the wild. Some&nbsp;<a href=\"https:\/\/www.future.1password.com\/passkeys\" rel=\"noopener\">password managers<\/a>&nbsp;are even going to support them first-hand.<\/p>\n\n\n\n<p>Passkeys are by no means only supported on the web.&nbsp;<a href=\"https:\/\/developer.android.com\/training\/sign-in\/passkeys\" rel=\"noopener\">Android<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/developer.apple.com\/documentation\/authenticationservices\/public-private_key_authentication\/supporting_passkeys\" rel=\"noopener\">iOS<\/a>&nbsp;will both support native passkeys as first-class citizens. We&#8217;re still in the early days of all this, but expect to see it mentioned more and more.<\/p>\n\n\n\n<p>After all, we eliminate the need for passwords, and by doing so, make the world safer for it!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"resources\">Resources<\/h3>\n\n\n<p>Here are some more resources if you want to learn more about Passkeys. There\u2019s also a repository and demo I put together for this article.<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/passkeys.neal.codes\/\" rel=\"noopener\">Live Demo<\/a> (no actual information is collected by the form)<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/nealfennimore\/passkeys\" rel=\"noopener\">Demo GitHub Repository<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.yubico.com\/Passkeys\/\" rel=\"noopener\">YubiKey Documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/passkeys.dev\/\" rel=\"noopener\">Passkeys.dev<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.passkeys.io\/\" rel=\"noopener\">Passkeys.io<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webauthn.io\/\" rel=\"noopener\">Webauthn.io<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>These things called&nbsp;passkeys&nbsp;sure are making the rounds these days. They were a main attraction at&nbsp;W3C TPAC 2022, gained support in&nbsp;Safari 16, are finding their way into&nbsp;macOS and iOS, and are slated to be&nbsp;the future for password managers like 1Password. They are&nbsp;already supported&nbsp;in Android, and will soon find their way into Chrome OS and Windows in [&hellip;]<\/p>\n","protected":false},"author":252032,"featured_media":377330,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[19067,779,19068],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/assertion.png?fit=717%2C516&ssl=1","jetpack-related-posts":[{"id":352676,"url":"https:\/\/css-tricks.com\/the-options-for-password-revealing-inputs\/","url_meta":{"origin":377305,"position":0},"title":"The Options for Password Revealing Inputs","date":"October 6, 2021","format":false,"excerpt":"In HTML, there is a very clear input type for dealing with passwords: <input type=\"password\"> If you use that, you get the obfuscated bullet-points when you type into it, like: \u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022 That's the web trying to help with security. If it didn't do that, the classic problem is that someone\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/show-password-input.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3043,"url":"https:\/\/css-tricks.com\/better-password-inputs-iphone-style\/","url_meta":{"origin":377305,"position":1},"title":"Better Password Inputs, iPhone Style","date":"July 9, 2009","format":false,"excerpt":"Recently renowned usability expert Jakob Nielsen wrote an article Stop Password Masking in which he claims that hiding users passwords as they input them is bad practice. What he is referring to is the default browser behavior of <input type=password ... \/> elements, where text entered into them turns into\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/iphone-password-2.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345260,"url":"https:\/\/css-tricks.com\/developer-friendly-passwordless-auth\/","url_meta":{"origin":377305,"position":2},"title":"Developer-Friendly Passwordless Auth","date":"July 29, 2021","format":false,"excerpt":"I'd wager to say that most websites that are business-minded have accounts. A way to log into them. Social media sites, eCommerce sites, CMS systems, you name it, having accounts people log into is at the heart of them. So... make it good. That's what Magic does (great name!). Have\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/More-Logins-1.png?fit=1200%2C854&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":235493,"url":"https:\/\/css-tricks.com\/password-strength-meter\/","url_meta":{"origin":377305,"position":3},"title":"Password Strength `meter`","date":"December 2, 2015","format":false,"excerpt":"The following is a guest post by Pankaj Parashar. Pankaj is our resident expert on all things and and this post is more evidence of that. Here, he walks us through implementing a password strength meter using what is likely the semantically best option. A number of major websites like\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":825,"url":"https:\/\/css-tricks.com\/easily-password-protect-a-website-or-subdirectory\/","url_meta":{"origin":377305,"position":4},"title":"Easily Password Protect a Website or Subdirectory","date":"July 23, 2008","format":false,"excerpt":"Working on a website that you need others to see, but not the whole world? Password protecting a website (or a sub directory within a website) is actually a pretty easy thing to do. .htaccess file AuthType Basic AuthName \"restricted area\" AuthUserFile \/path\/to\/the\/directory\/you\/are\/protecting\/.htpasswd require valid-user The exact path to the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/protected-directory.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5717,"url":"https:\/\/css-tricks.com\/multiple-login-form-highlight\/","url_meta":{"origin":377305,"position":5},"title":"Multiple Login Forms with Highlighting","date":"February 23, 2010","format":false,"excerpt":"This is a little specific... but I figured what the heck maybe it will be useful for someone. I recently had occasion to make multiple different login forms on a single page. With CSS we know we can apply styling to active inputs with :active. That's useful... and we've covered\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/assertion.png?fit=717%2C516&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377305"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/252032"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=377305"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377305\/revisions"}],"predecessor-version":[{"id":377486,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377305\/revisions\/377486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377330"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=377305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=377305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=377305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}