[{"id":377305,"date":"2023-04-12T10:41:53","date_gmt":"2023-04-12T17:41:53","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377305"},"modified":"2023-04-12T10:42:35","modified_gmt":"2023-04-12T17:42:35","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
These things called passkeys<\/strong> sure are making the rounds these days. They were a main attraction at W3C TPAC 2022<\/a>, gained support in Safari 16<\/a>, are finding their way into macOS and iOS<\/a>, and are slated to be the future for password managers like 1Password<\/a>. They are already supported<\/a> in Android, and will soon find their way into Chrome OS and Windows in future releases.<\/p>\n\n\n\n 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 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\n\n\n 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 Before we can talk specifically about passkeys, we need to talk about another protocol called WebAuthn<\/a> (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 Trusted Platform Module<\/a> (TPM), to create private and public keys.<\/p>\n\n\n\n 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 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 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 Google Password Manager<\/a> and Apple iCloud Keychain<\/a> services, respectively.<\/p>\n\n\n In public key cryptography, you can perform what is known as 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 Anyone can generate a public key pair, and it’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’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 As an added benefit, since we’re storing the user’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’s stored in the user’s public keys, making it virtually useless to an attacker.<\/p>\n\n\n\n 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’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 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 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’s private key can decrypt the message. In security parlance, this is known as \u201cproviding confidentiality\u201d. However, this doesn’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 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 authenticity<\/em>). In public key (also called 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’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’s public key.<\/p>\n\n\n To access passkeys, we first need to generate and store them somewhere. Some of this functionality can be provided with an authenticator. An authenticator<\/em> is any hardware or software-backed device that provides the ability for cryptographic key generation. Think of those one-time passwords you get from Google Authenticator<\/a>, 1Password<\/a>, or LastPass<\/a>, among others.<\/p>\n\n\n\nTable of contents<\/h3>\n\n
\n<\/li>
Terminology<\/h3>\n\n\n
\n
What are passkeys?<\/h3>\n\n\n
How do passkeys replace passwords?<\/h3>\n\n\n
More about cryptography<\/h3>\n\n\n
How do we access passkeys?<\/h3>\n\n\n