Skip

WebAuthn & Passkeys

Presenter: Christiaan Brand, Tim Cappalli, Megan Shamas
Duration: 14 min

Learn how the WebAuthn API serves as a critical enabler to passkeys, opening the way to user-friendly password-less authentication across devices.

This demo was produced for the FIDO alliance and is republished here with their permission.

All demos

Skip

Video

Hi all it's Megan Shamas.

And I'm the director of marketing for the FIDO Alliance.

As you may know, we introduced a new concept in early 2022 which is multi device FIDO credentials.

You may have heard this referred to as passkey by many.

Passkey aims to make FIDO authentication more usable and available in the consumer space.

What they are is a new option for users to access FIDO sign in credentials on many other devices, even new ones and even across platforms, without having to re-enroll every device on every account.

Then in May 2022, Apple, Google and Microsoft announced plans to support passkey key on their respective platforms.

This news was, it's really a huge step forward in making cryptographically secure and passwordless Fido sign-ins more usable and available to all of us.

But what does the user experience look like in this world of passwordless sign-in?

I'm excited to turn things over to Christian Brand of Google, who will show the world's first demonstration of passkey in action.

Following Christian's demo, Tim of Microsoft will break down each step that you saw.

So Christian, let me turn it over to you.

Hi folks, I'm Christian and I'm a product manager at Google.

First we're gonna look at how passkeys work on Android.

So I open Chrome and I navigate to Tri Bank.

and I attempt to log in to my banking profile here by entering my user name and my password.

Once I hit sign in the website automatically detects that I'm on a platform that supports passkeys and it gives me the option to create one.

I say, yes, please give me a passkey, navigate through the options here, and I note that passkeys will be safely backed up to the cloud.

I'm gonna touch my fingerprint, and my passkey will be created.

Of course, now if I sign out of Tri Bank, I can come back tomorrow.

I simply click into the account name field.

I see the passkey I just created being offered up.

I select it, touch my fingerprint on the sensor and I'm magically signed in.

Of course, this also works if I decide to download the application from the Google play store.

So I decided to download the Tri Bank app, open the app, here again, I get the option to sign in with a account or I can sign in with a passkey.

Let's at this point, click the “sign in with a passkey” option to see how that would work.

So if I click “sign-in with a passkey”, my passkeys get listed, I click the one I wanna use to sign in, simply touch the fingerprint sensor and instantly I'm signed in.

So passkeys created on the web also works on the app and vice versa.

So the next day I wanna go to Tri Bank on my Windows laptop, and sign with Edge.

Here, I'm gonna click “sign-in with a passkey”.

I'm gonna choose to use my phone.

I'll pick up my phone, open the camera and point it at the QR code of the laptop, select user passkey.

Now I'm gonna allow the laptop and the phone to securely communicate over Bluetooth, so the laptop and the phone knows that they're near each other.

At that point, I will simply select the passkey that I just created, touch my fingerprint on the sensor, and I should instantly be signed in on Edge on Windows.

Now, at this point, it gives me the option to create a passkey locally on my Windows machine, so I don't need to keep using my phone to sign in to Tri Bank every time.

So I'm gonna say, create me a passkey.

And at this point, Windows Hello should kick in, and give me the option to touch my fingerprint on this sensor to establish the passkey.

And instantly a passkey should now be created on my machine directly.

So if I now sign out of Tri Bank and I come back tomorrow, I can simply click on sign-in with a passkey.

And remember now I don't need to grab my phone the second time around because I literally have a local passkey on my Windows machine.

So I'm gonna touch my fingerprint to this sensor, and instantly I should be signed in to Tri Bank.

Now, let's say the next day, I want to go to my MacBook and I wanna sign-in using Safari.

So I'm gonna do exactly the same, navigate your Tri Bank, hit the “sign with a passkey” option.

I'm gonna say, I wanna use a phone, and again I can use my Android phone to scan this particular QR code to allow these two devices to talk to one another.

I select a passkey on my phone, click the fingerprint sensor, and I'm signing to safari as well.

And here I can do exactly the same thing that I just did on Windows.

I can create a local passkey, touch my fingerprint on my touch bar.

This should allow a passkey to be created locally on my MacBook.

So now when I go and sign out and I come back to Tri Bank on my MacBook, I sign in with a passkey, simply touch my fingerprint on the sensor and immediately I'm signed in.

So remember that I just created the passkey on my MacBook.

What's really cool is that passkeys get synchronized to my iCloud account.

So not only is my passkey available on the MacBook that I created it on, It's also available everywhere else I'm signed into my iCloud account, and that includes my iPhone.

Say if I were to go to my iPhone here and I open Safari, I visit the Tri Bank website and I hit “sign-in with a passkey”.

The same passkey that I just created on my MacBook will be available for you here.

So I can simply say continue, look at my camera, and immediately I'm signed into Tri Bank.

Now we're gonna ask Tim to walk through these scenarios and explain what happened in a little bit more detail.

Thanks Christian.

Hi everyone.

My name is Tim Cappalli and I'm a standard architect at Microsoft working on this passkey initiative.

And we want to take some time to break down what you just saw from Christian's demo step by step.

We'll go through each of the components, what you saw and what enables it.

And before we actually do that I just wanna take one second to to look at the two major components and specifications that actually enable this functionality, both for passkey and kind of the existing world that we have today with security keys and, and kind of the FIDO ecosystem.

So there's really two pieces.

One is WebAuthn, which is really what developers interact with.

So that's the browser API, that allows the developer to say, “hey, I want to register a credential or authenticate using one of those credentials”.

So that is, as I mentioned, a browser API that's, that's what most people actually interact with in terms of developers.

And on the other side we have what's called the Client to Authenticator Protocol.

And that's what platforms like the operating systems, let's say, and security key manufacturers, or even other authenticators that aren't security keys that need to talk back to the browser.

That's actually what they need to go implement.

And, and, and that, that's one of the more complicated ones but the nice thing is that developers never have to worry about CTAP.

It's something that that's a very small slice of the community to worry about, but that's where kind of the magic happens, right?

That's where all the Bluetooth and the NFC and USB, all the kind of low level things, all magically flow between the operating system and the authenticator.

And the reason we bring that up is, a lot of the magic that we're gonna see here today leverages both of these specifications with some enhancements that enable this new use case.

All right, so let's jump into what we saw from Christian.

So he was on his Android phone, went to Tri Bank, and the only credential he had at that point was a password.

You know, typical scenario.

Maybe you also have to do an SMS verification, but you're using some form of shared secret, And then some form of out of band message or email for example, and it's not a great user experience, right?

Nobody likes passwords, nobody likes OTPs [one time passwords].

So Tri Bank was actually able to detect that Christian's device, this Pixel, supported passkey and was able to, you know create an interstitial that says, hey, why don't you upgrade to passkey?

We think this is a great experience for you and you should upgrade your account.

So at that point, this is standard WebAuthn.

So the, the Tri Bank developer more or less, you know used the WebAuthn API to prompt the user to create a passkey.

And what that did is it invoked the Android authenticator right?

So as I mentioned, that, that WebAuthn API bridges the “relying party” or the website to the browser, and then the browser has its own way of talking down into the operating system to say, “hey, I need to do WebAuthn.

“And in this case, I would like to create a pass key”.

So now that the user has said, they do want to continue you know, Christian click to continue there, The last thing to do is perform what's called a user verification check.

On a phone, this is typically gonna be a biometric, but could also fall back to a pin, on things like security keys that we've used in the past in higher security environments, that was typically a pin.

A lot of those devices didn't have biometrics.

So the fact that so many of these devices, the phone, the tablets, the laptops, have biometrics significantly improve this user experience because I just need to tap my thumb and away we go.

I have now upgraded to a passkey, which is awesome.

So now anytime I want to use a Tri Bank on this Android phone I will sign in with the biometric or pin.

And if I did have a second Android phone or let's say an Android tablet, you know that would just work day one because the, the passkey would sync over to ensure I don't lose access to my account.

So next Christian wanted to sign in to Tri Bank on his Windows device, assuming Edge, it could've been windows on Chrome, whatever it may be in this case, we just, it's a Surface Go, you know, your average Windows device, and Edge, and wanted to sign in with the passkey from, for Tri Bank, right?

Because he knew that he's already enrolled, that doesn't want to continue using a password.

And this is a great way to leverage the credential that was in Christian's phone, over on Windows.

So the first time, since this is the first time he wants to use his phone on this windows device, he does need to link them together.

And so when he went into Tri Bank and click sign in, he was presented QR code, and on the phone open the camera app, scan the QR code, and you're now prompted to link these devices together.

And you'll notice down at the bottom there's something that says remember this computer that will make sure that you don't necessarily need to use the QR code again from this device, you'll get a notification instead which is a really awesome step up at user experience to not, obviously we don't want you to have to scan a QR code every time.

Now, if this were a shared device, or let's say you didn't wanna save this linkage, you would uncheck remember the computer and click allow.

And then next time you would get greeted with the same QR code on that laptop.

So most users on your personal machine, you should only see the QR code once.

So after Christian hit allow, user verification happened again, right?

We obviously wanna make sure the user that is authenticating is present in front of the phone.

In this case, again, fingerprint user verification has been completed.

And what we saw here was an important transition, right?

We don't want a user to have to use their phone every time they're signing into a, something on their laptop or their tablet, right?

We, that's not a, it's not a very friendly user experience.

So the idea is that I can use my phone to bootstrap my laptop so that now I end up with two passkeys, right?

So I end up with a passkey on my Android phone and I end up with another passkey, it's not the same one, it's a completely different one, tied to the account on my windows machine so that I no longer have to pull my phone out of the pocket.

So to enable that, Tri Bank essentially said, “hey, we detected that you're on Windows, “Windows Hello supports passkeys.

“Why don't you go ahead and set up a windows passkey”, right?

And in this case, you'll see that the same WebAuthn call that you know the Tri Bank developer made for Android, they make it in this case, and Windows Hello is automatically invoked.

We do another user verification check, this time on the laptop, right?

Because we wanna make sure it's bound to the same session as the, the logged in user to the laptop.

And once that completes, now Windows Hello has a passkey.

So for Tri Bank, Alicia has a Android passkey, and, or you know there, there's not a specific name, but a passkey tied to their Google account, and now a passkey tied to their windows account.

So it's really awesome.

Two different platforms, two different ecosystems.

And I, don't no longer have to take my phone out of my pocket to sign in on this Windows machine.

Now let's do the same thing on Mac right?

Very, very similar.

It's actually nearly identical to the Windows experience except I just wanna show some of the difference in UI.

Right?

Very, very similar though.

I want to start with the passkey from Android.

So I click on that sign.

You know, Christian clicked on that, signed in button and we get this, this Apple prompt, which says, choose how you'd like to sign in, in this case We wanna actually say, I wanna use another device, in this case, it'll be Android again.

I haven't set up an iPhone yet.

So I go ahead, scan the QR code to pair for the first time.

Same thing again, rinse and repeat, user verification to make sure that I'm you know, Christian was who he say he was on the phone.

And when I'm done, same pattern again.

You can detect that the Apple device actually has local passkey support as well.

And I can go ahead and use the fingerprint reader on my laptop to confirm I'm the user on my laptop, and user verification check completes.

And now we've more or less bootstrapped the iCloud key chain ecosystem, right?

That's Apple's name for the password manager and passkey manager.

So now this is awesome.

Now we have three passkeys, three separate passkeys.

We didn't transfer a passkey between platforms.

These are all unique passkeys that represent each of the ecosystems.

So now the last step, I wanna go over to my iPhone, since the iPhone and the Mac are actually both signed into the same Apple account, and signed into the same iCloud key chain, that passkey is already on that device.

And all I need to do is the user verification check to sign in to Tri Bank.

To wrap up here.

Elisa now has access to Tri Bank across all of her devices, with three different passkeys, right?

One in the Apple ID, one in the Google account.

And one in the Microsoft account, that are now available across all of her devices.

And she no longer needs a password to sign into Tri Bank.

Tri Bank may actually prompt her next time to say, “hey, we we think you have multiple devices enrolled.

”Do you want to remove your password?

” And that's like gonna be a monumental day for all of these websites to be able to ask the user to do that.

Thanks so much Christian and Tim for this demo.

I think it's really clear how much better our user experiences will be when this sign-in tech becomes available.

So stay tuned for announcements around that.

If you'd like a deeper dive into multi device credentials and how they work, I'd urge you check out the primer video from Shane Weeden from IBM, which is also available here on the site.

Thanks so much for watching.

Skip

All demos

Skip

Sponsors

Support TPAC 2022 and get great benefits from our Sponsorship packages.
For further details, contact sponsorship@w3.org

Many thanks for sponsoring TPAC:

Silver sponsors

Gooroomee Coil Technologies,

Bronze sponsor

Igalia

Media sponsor

Legible