Introduction to a Future Without Passwords

Milica, a technical writer on Chrome Developer Relations team, introduces the concept of a future without passwords. She covers the problems with current password systems and introduces passkeys as a solution.

Overview of Password Challenges

Discussion on the challenges posed by traditional passwords, including their vulnerability to hacking and the inconvenience they pose to users.

Issues with Strong Passwords

Analysis of why strong passwords are difficult to remember and the common practice of password reuse, sharing, and the resulting security implications.

Role of Password Managers

Exploration of how password managers can assist in generating and managing strong passwords, but their limited usage among users.

Statistics on Password Management

Presentation of data showing various methods people use to manage their passwords, highlighting the need for a better solution.

The Insecurity of Passwords

Discussion on the inherent security vulnerabilities of passwords, especially susceptibility to phishing and data breaches.

Introduction to Passkeys

Milica introduces passkeys as a new, secure, and user-friendly alternative to traditional passwords for online authentication.

How Passkeys Work

Explanation of the working mechanism of passkeys and their benefits over conventional passwords in terms of security and convenience.

Benefits of Implementing Passkeys

Outline of the benefits that websites experience when implementing passkeys, including higher login success rates and improved security.

Adoption of Passkeys by Major Companies

Details about major companies like Google, PayPal, and Shopify adopting passkeys and the impact on their ecosystems.

Demonstration of Passkey Usage

Live demonstration of creating and using a passkey on a fictional bank website, showcasing the ease and efficiency of the process.

Security Features of Passkeys

Discussion on the security features of passkeys, including their reliance on public key cryptography and resistance to phishing attacks.

Cross-Device and Cross-Platform Compatibility

Explanation of how passkeys work across different devices and platforms, enabling a seamless user experience.

Anatomy of a Passkey System

A detailed overview of the components and workings of a passkey system, including the roles of relying parties, authenticators, and passkey managers.

Seamless Transition from Passwords to Passkeys

Information on how users can transition seamlessly from passwords to passkeys, with an emphasis on browser compatibility and user experience.

Conclusion: Embracing a Passwordless Future

Milica concludes by encouraging the adoption of passkeys for enhanced security and user experience, moving towards a passwordless future.

My name is Milica and I'm a technical writer on Chrome Developer Relations team.

I write about performance, privacy, and identity, and you can find my articles on web.dev and developer.chrome.com.

If you want to say hello or chat about any of these topics, I'm at bibydigital on Twitter.

And you can also find my email on my personal website.

Today, I'd like to talk to you about our future without passwords.

So here's a little preview of what I will cover.

We can't talk about getting rid of passwords without first talking about passwords.

With that out of the way, the main topic of my talk today are actually passkeys.

I'll tell you how they work, I will show you how they work, and go over the benefits they offer.

We'll learn more about the security features of passkeys and the state of support today.

And finally, we'll take a look at the anatomy of a passkey system and how to get started implementing them in your own authentication flows.

Now, let's dive in.

Passwords have been around for a long time, but they're a pain for your users and a liability for you as a developer.

Strong passwords are difficult to remember, so many people don't bother creating strong passwords at all.

Or they use one password for everything.

Security.org published research about America's password habits conducted in 2021.

What they found was that bad habits die hard.

2 out of 3 people still reuse passwords across accounts, 1 in 3 share codes with others, and nearly 40 percent have been hacked.

Password managers help here.

I'm joking.

Or am I?

Password managers really do help.

They generate the strong password, autofill it to the right domains and apps, and synchronize across devices.

Some password managers are free, some are paid, some are standalone apps, some are conveniently built into browsers and operating systems, like Google Password Manager, but the reality is, not all users rely on password managers.

Here's some recent data from 2021 on how people manage their passwords.

I really wasn't joking.

9 percent of people store passwords in local files.

38 percent just try to memorize them.

32 percent use password managers and 19 percent use paper.

What this all results in is about 90 percent of people having to reset their password several times a year.

18 percent of people said they reset their password several times a month.

32 percent several times a year.

And 6 percent of people even said they do it daily.

Managing passwords aside, they're just not very secure.

They're susceptible to phishing, attacks that trick users into revealing sensitive information.

No matter how many capital letters or special characters a string has, a deceptive sign in page can trick users into entering their password on it.

And phishing scams have been on the rise, increasing nearly 12 fold since 2016.

Of the 30 plus categories of cybercrime for which the FBI reported data, phishing was by far the most common in 2020.

These types of incidents accounted for almost one in three cybercrimes reported to the FBI.

And if you store user passwords, you're also responsible for managing the risks of hacking.

Passwords are one of the most common entry points for attackers.

According to the latest Microsoft Azure data, there are 921 password attacks every second, nearly doubling in frequency over the past 12 months.

Two factor authentication does improve security, but one, it adds extra steps for users, and two, it can cost you money.

That's why today, I want to tell you about the new, easier and safer way to sign in on the web.

Passkeys.

Passkeys are a simple, secure, cross device authentication technology that enables creating online accounts and signing into them without entering a password.

A passkey is a digital credential tied to a user account and a website or application.

On sites and apps that implement passkeys, the browser or the or operating system show users a prompt to create a passkey.

Users only need to use the screen lock on their device, such as touching the fingerprint sensor, to continue.

There is no need to type or remember anything.

Then, to log into an account, users are simply shown a prompt to unlock their device.

Passkeys are developed by the FIDO Alliance.

It's an open industry association with a focused mission.

To develop and standardize technical specifications that reduce the reliance on passwords to authenticate users.

It was founded in 2012, and the members are many major tech companies, including Google, Apple, and Microsoft, all working together.

Fido Alliance also conducts research, and they've recently published a report that found that 58 percent of consumers in the U.

S.

have abandoned purchases due to difficulty of managing passwords.

Passkeys, on the other hand, offer a much simpler sign in experience for users.

Account selector allows users to simply select the credentials to sign in, they can authenticate with biometrics, such as fingerprint or face scan, or with a pin or pattern, and once the passkey is created and synchronized, they can seamlessly switch to a new device.

Sites that implement passkeys are seeing a number of benefits, such as higher login success rates, reduced drop off rates, increased conversion rates, and reduced costs of separate two factor authentication solutions.

Passkeys are not just easier to use, but also significantly faster than passwords.

According to Google research, and a case study by Yahoo Japan, on average, a user can successfully sign in with passkeys about twice as fast as with passwords.

who else is using passkeys?

Along with Google and Yahoo!

Japan, there's Kayak, PayPal, Shopify, and many more.

Shopify implementing Passkeys enables a big ecommerce ecosystem to adopt passwordless authentication.

More than 100 million users can easily and securely shop online across 2 million merchants with Passkeys.

In May 2023, ahead of World Password Day, Google began rolling out support for Passkeys across Google accounts on all major platforms.

Now, let's see passkeys in action.

I've just signed in into my fictional bank website, TriBank.

The old school way, with the username and password.

My fictional bank of choice is really on top of their game.

They've just deployed passkey support for their users.

When I log in, the bank site detects that my device is passkey compatible and asks me, Hey, do you want to use passkeys to log in next time?

Stronger security sounds good, so I'll say yes.

This prompts me to create a passkey for the banking site on this device.

To create a passkey, I need to confirm the action using the screen lock.

In this case, with my fingerprint.

I touch the fingerprint sensor and success!

I now have a passkey saved on my device.

Next time I sign in, I automatically get an option to authenticate with a passkey.

Signing in with a passkey simply requires me to unlock my device to confirm.

In this case, with a fingerprint.

And I'm signed in!

That was quick.

Now, let's talk about security.

Signing in with passkeys provides strong protection against phishing and data breaches, two of the biggest security threats that passwords fail to prevent.

Passkeys work with public key cryptography.

A passkey is a private key stored securely on the device.

It's created locally when using the screen lock functionality.

Fingerprint, facial recognition, PIN, or pattern.

The matching public key is stored on the server.

Because no secret is stored on the server, passkeys are not vulnerable to server breaches like passwords are.

An attacker can't derive the user's private key from the data stored on the server, which is required to complete authentication.

The passkey also includes metadata, including the username and the server domain, so that apps and sites know which passkey to ask for.

The user's biometric information is never revealed to the website or the app.

Biometric material never leaves the user's personal device.

Each passkey can only be used for the same service it's created on.

It is bound to a website, or app's identity, making them safe from phishing attacks.

The browser and operating system ensure that the passkey can only be used with the website or app that created them.

This way, users can be tricked into using their passkey to sign into a sketchy app or website.

To sign in, a user simply uses their screen lock.

A passkey authentication generates a signature, which the server then verifies using the saved public key.

We've learned a lot about how passkeys work and what are the benefits.

Now, let's see how available is this cool new technology.

The landscape looks good.

P already work across most browsers and operating systems.

They're accessible to all devices sharing the same ecosystem.

When a user creates a passkey for a website on their phone, the phone's password manager or cloud service will back it up.

For Google ecosystem, that's Google Password Manager.

For Apple ecosystem, that's Keychain.

Passkey synchronization allows using passkey seamlessly when logging in on a new device.

When they visit the website from another browser, synchronized with their account, they can sign in with the same passkey they created from the phone, even if they don't have the phone with them.

When a user gets a new phone or laptop, they still have all their passkeys ready to use.

For example, if a user creates a passkey on Android, it's available on all Android devices, as long as the user is signed in to the same Google account.

However, the same passkey isn't available on iOS, macOS, or Windows, even if you're using the same browser, like Chrome.

But luckily, passkeys can also travel across ecosystems.

A passkey created on one device can also be used on other devices through the FIDO hybrid protocol.

For example, a user can use a passkey on their Android phone to log in to a website on their friend's Mac computer.

by scanning a passkey QR code.

They just need to have the phone near the laptop and approve the sign in on the phone.

Let's take a look at that scenario with our banking site.

When I have to make several payments, I prefer to use my laptop.

I open Safari on my MacBook, go to TriBank, and I have the option to sign in with a passkey.

This is my first time using a passkey from my phone on my laptop, so my laptop first needs to connect with my phone.

When I choose to sign in with a passkey, I'm presented with a QR code that I need to scan with my phone.

I open the camera on my phone, point it at the QR code on my MacBook, and my phone now displays the options to use passkey.

The two devices will connect, and behind the scenes, Bluetooth Low Energy is used to ensure that they are physically close to prevent remote attacks.

My phone now shows the available passkeys for this website.

I select the one I want to use, touch my fingerprint, and I'm instantly signed in to my Tribank account on my MacBook.

A one time passkey signature is transferred back to Safari on the Mac, which the website then uses to sign the user in.

This cross device, cross operating system mechanism of passkey authentication is standardized under FIDO and available in Chrome and Safari with other browsers to follow.

There is no additional work needed to enable this user experience.

What about devices and platforms that don't support passkeys?

like any new beginning, the change to passkeys will take time, so passwords and two factor authentication will stick around for a while.

You should keep the existing sign in options in your sites and apps for the time being so that they will continue to be available for devices and services that do not support passkeys.

Now, let's take a look at the anatomy of a passkey system and a quick overview of implementation steps.

There are a few key terms when we talk about passkeys.

Relying party.

In this context, a relying party handles passkey issuance and authentication.

The relying party must operate a client, a website or app that creates passkeys or authenticates with passkeys, and a server for registering, storing, and verifying credentials generated by the passkeys on the client.

Authenticator is a computing device, such as a mobile phone, tablet, laptop, or a desktop computer that can create and verify passkeys using the screen lock feature offered by the operating system.

And finally, a password manager, or rather, passkey manager, software installed on the user's devices that serves, stores, and synchronizes passkeys, such as the Google Password Manager.

There are four components necessary to register a passkey on the web.

The user's browser, which is running your JavaScript.

The user's authenticator, which creates and stores the passkey.

It can be on the same device as the browser.

Your backend server that holds accounts in the database, storing the public key and other metadata about the passkey.

And your frontend, which communicates with the browser and sends fetch requests to the backend.

Now, let's look at how you can integrate passkeys into your service.

For your web app, you can use the standard API called Web Authentication or WebAuthn.

For a quick start, there is a number of libraries available for TypeScript, Ruby, Rust, and other languages.

Here's an example of a user journey to add the new passkey to an existing user account.

First, a user signs in to the website.

Once the user is signed in, they request to create a passkey on the front end.

For example, by pressing a create a passkey button.

The front end requests information from the back end to create a passkey, such as user information, a challenge, and the credential IDs to exclude.

The front end calls a function to create a passkey, which returns a promise.

A passkey is created after the user consents using the device's screen lock.

The promise is resolved and the public key credential is returned to the frontend.

The frontend sends the public key credential to the backend and stores the credential ID and the public key associated with the user account for future authentications.

This is the code you'd need to create a passkey on a browser.

You need to call navigator credentials create.

The sample code shows some key parameters you should provide.

The RPID indicates the domain the passkey is associated with.

This prevents phishing.

The user information is used to display the account selector when the user tries to sign in.

Setting requireResidentKey to true indicates it needs to work without the user entering a username.

Now, let's look at the user journey to sign in with a passkey.

As soon as the user lands on the front end, it requests a challenge from the back end to authenticate with a passkey and calls a function to initiate authenticating with a passkey which returns a promise.

When the user puts the cursor in the sign in field, the browser displays a password autofill dialog including passkeys.

An authentication dialog appears if the user selects a passkey.

After the user verifies their identity using the device's screen lock, the promise is resolved.

And a public key credential is returned to the front end.

The front end sends the public key credential to the back end.

The back end verifies the signature against the match account's public key in the database.

If it succeeds, the user is signed in.

To let the user sign in with a passkey, you call navigator.credentials.get.

Passing a challenge that generated on the server, which prevents replay attacks.

Mediation conditional allows the authentication to only be displayed if a pass key is found.

You can also add the webAuthn token to the autocomplete attribute on the HTML's username input field on the same page.

When the user taps on the input field.

The combination of JavaScript and HTML allows the browser to display saved PAs keys as part of the form autofill.

This helps users transition seamlessly from password to passkey.

For cross device authentication using QR code, no additional code is required because the browser takes care of that for you.

For step by step instructions on how to implement passkeys with Form Autofill in a web app, check out the workshop linked on the slides.

We are well on the way to a passwordless future.

By implementing passkeys today, you get better security, a better user experience, and happier users.

Thanks for watching.

who

Milica Mihajlija

twitter

@biydigital

website

mihajlija.github.io

web.dev

web.dev/authors/mihajlija

developer.chrome.com

developer.chrome.com/authors/mihajlija

Agenda

  • 01 Ugh passwords
  • 02 Hello passkeys
  • 03 Security security security
  • 04 State of support
  • 05 Anatomy of a passkey system

Passwords

Password storage method

For more information visit: https://www.security.org/digital-safety/password-manager-annual-report

A bar chart titled "Password storage method". It shows four bars representing different methods: Local file, Memory, Manager/browser, and Paper. Each bar corresponds to the number of people using that particular storage method. Local file is around 10%. Memory around 40%. Manager/browser around 30% and paper around 20%.
“90% of consumers had to reset their password several times a year”

921 password attacks every second

nearly doubling in frequency over the past 12 months

www.microsoft.com/en-us/security/blog/2022/05/05/this-world-password-day-consider-ditching-passwords-altogether

2-factor authentication?

01 Hello passkeys

A conceptual image representing security features. Central to the image is a padlock with rays of light emanating from it, symbolizing security. Surrounding the padlock are various icons: a facial recognition symbol, a key, a fingerprint, a privacy screen, and a secure messaging icon. These elements suggest different aspects of digital security and privacy measures.
An illustration depicting a stylized smartphone displaying a typical login screen interface. A logo is positioned at the top of the on-screen content, followed by the heading 'Sign in', and an input field containing the email address '[email protected]'.
“58% of consumers in the U.S. have abandoned purchases due to the difficulty of managing passwords”

https://fidoalliance.org/new-research-reveals-consumer-frustrations-with-online-retail/

Passkey benefits

  • Account selector
  • Biometric auth
  • Seamless device switch

Passkey benefits

  • higher login success rates
  • reduced drop off rates
  • increased conversion rates
  • reduced costs of separate 2FA solutions
"Users can successfully sign in with passkeys twice as fast than with passwords"

Who is using passkeys?

  • Google
  • Kayak
  • PayPal
  • Shopify
  • Yahoo! JAPAN
  • and many more

Shows the dialog for creating a passkey for a Google account.

Milica describes the create passkey flow for Google accounts on mobile.

Milica describes logging in to a bank account with a passkey

Milica describes creating a passkey for a bank account.

02 Security

A simplified diagram illustrating the concept of a cryptographic key exchange. A smartphone is displayed on the left with an overlay saying 'private key' symbolized by a user icon with a key. An arrow points from the phone to a stylized 'public key' on the top right, suggesting that the public key is derived from the private key. Another arrow points from the public key to three horizontal rectangular outlines, each containing a series of dots, representing encrypted messages. These outlines suggest multiple possible encrypted outputs that could be produced using the public key.

03 Support

logos of different browsers and mobile platforms.

Milica describes logging into a an account on a desktop using a passkey created on a mobile device.

04 Anatomy of a passkey system

Key terms

  • Relying party - handles passkey issuance and authentication on the client and registering, storing and verifying credentials on the server
  • Authenticator - a device that can create and verify passkeys using the screen lock
  • Password manager - stores and synchronizes passkeys

A passkey system

The image contains a diagram depicting the flow of a passkey system. The system involves interactions between the Browser, Authenticator, Frontend, and Backend. The process starts with the browser invoking the navigator.credentials.create() method. This interaction is linked to the Authenticator, labeled with 'passkey'. From the Authenticator, a 'Public Key Credential' is passed to the Frontend. The Frontend and Backend exchange 'Credential IDs, etc' and 'Public Key, etc', respectively.

Creating a new passkey with WebAuthn

Create a new passkey

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: "*****",
    rp: { id: "example.com" },
    user: { id: "*****", name: "john78" },
    excludeCredentials: [ ... ],
    authenticatorSelection: {
      authenticatorAttachment: "platform",
      requireResidentKey: true,
    },
    ...
  }
});
// Authenticate with a passkey

const credential = await navigator.credentials.get({
  publicKey: {
    challenge: '****',
    rpId: 'example.com',
  },
  mediation: 'conditional'
});
  
<input
    type="text"
    name="username"
    autocomplete="username webauthn"
    ...
>

goo.gle/passkeys-workshop

The image features a QR code in the center, which encodes the URL.

Learn about passkeys

goo.gl/passkeys