Passkeys

[00:00:00]
>> The last section before a list of best practices and what else you can do is going passwordless. Remember, the top of our originally triangle was going passwordless. So let's remove the password forever. So today, if you want to be passwordless, you have Magic Links. Magic Link says you know what?

[00:00:24]
I'm checking your email. I don't even want your password because someone will break into my systems and will steal your password, so don't give me a password please, she has your email, okay? And every time you wanna log in, I will send you a link within like an one-time password, and you will log in with that, okay?

[00:00:46]
This is all the passwordless options, let's say less secure because of course, we have one point of failure, that's the email accounts, if the email account is hacked, anyone can get in. So no bank account or no bank system will use this. This is for some websites where security is like it's not like very strict, it will work.

[00:01:12]
Then we have OTP, that's kind of the same thing, but with SMS one-time password over SMS, I sent you a code or a Magic Link over SMS. Okay, but we know that it also has this problem that my SIM card can be stolen as well. And finally, we have passkeys, that is like the final goal today in this authentication tunnel, okay, passkeys.

[00:01:40]
So let's get deeper with the idea of passkeys. Well, first pass keys are just the new DNA of web of fun. And if you ask me, I feel like we will stop using the term WebAuthn, and we will start talking about passkeys, okay? So the idea is to use WebAuthn as first factor, that's the idea of a passkey.

[00:02:08]
That at the end, we can use directly WebAuthn as the first factor without any other factor, without passwords, even without an email address to contact the user, it can be a complete anonymous user. Okay, but that user has the passkey, the problem with the original WebAuthn not the original.

[00:02:28]
The problem with the original implementations of WebAuthn were that they were device dependent. Okay, so the key was restoring the device. So if you change the device, you don't have the keys. With passkeys, a passkey is a WebAuthn subgroup of authenticators that are multi-device, how? They're storing your private keys in the iCloud, or in Google's account, or within Microsoft's account, so then it's multi-device.

[00:03:01]
So the idea is that if we get to the point where if you change your device, you still have access to the same passkeys, or if you have multi-devices at home, you can also reuse your passkeys. Then we're kind of there, and that's the idea. In this case, authenticators are saving the keys that we use the term passkeys in the cloud.

[00:03:31]
So you can use them on different devices and even share with other users. Today, Apple was the first company implementing passkeys, okay? So this was implemented since iOS 16 and since macOS Ventura, and both are supporting passkeys. And for example, you can go on your iPhone to credentials, to passwords.

[00:03:53]
You will see your passkeys there, and you can share, with AirDrop, your passkeys with a friend or with your partner. And then your partner will receive the Passkey, and then he or she can log in in the same website with that pass key. It's like sharing the password.

[00:04:11]
But now it's not the password that is insecure, it's a passkey. And no one can actually, even if someone can see your public part of the passkey, nothing happens because you don't have the private part of your passkey. That is actually stored encryptedly in your cloud. Does it make sense?

[00:04:32]
And also it includes a conditional UI. This is part, I think that this is still the, let's say in mature this part. The conditional UI, lets the browser owner complete a login form without the user typing anything, not even the username. So it's a complex mechanism. So in fact, to try this quickly, if you wanna test past keys and how they look like, you can try passkeys.io.

[00:05:01]
But for that you need a browser compatible with path keys is a head Max but path keys are WebAuthn yes. But WebAuthn within special authenticator that is multi device and that's not available everywhere these days. So you can try this on iOS 16 on Safari 16 on macOS Ventura or greater.

[00:05:26]
And if you are on desktop Windows, or Mac, or Linux, you can use Chrome Canary these days today, okay, while shooting this video at least. So in a few months it will be available when it's table Chrome Canary supports passkeys Chrome Canary on desktop. I will explain what happens with Android in a minute, so passkeys IO will show you how the UI looks like.

[00:05:55]
So you put an email here even if it doesn't exist, like frontendmasters or frontend@backend.com. By the way, look at this, here you also have a sign in with passkey directly in the home. The idea is to make this really quick. So I say continue, so I will create a new account and I just set up a passkey.

[00:06:19]
And you can see that Chrome is using the passkey word, but this is Chrome Canary, okay, it's still not in stable. So do you wanna create the passkey? And here it says, this passkey will only be saved in this device, this is because I'm not logged in right now in this particular browser in Canary.

[00:06:41]
I will put my finger, and I'm logged in. So now, what's the idea if I go back to the website? Okay, let me log out. When I signed in with pass key I can just log in with my finger. On Safari, the UI is already mature, so it's kind of better.

[00:07:05]
So passkey.io, I can log in, let's write another one, backend@frontend.com. I'm going to sign up, set up a passkey, I will use Touch ID or Face ID, and this is in the iCloud Keychain. So I can technically go now to my iPhone or to my iPad and using my face, not the real, not the same finger, but because with the face or with the finger, I unlock iCloud.

[00:07:39]
I can reuse the same passkey and passkey is appears under system settings, at least on the Mac and their passwords, and here they are locked. So I can see here like, for example, WebAuth.io, that's the other one or passkey.io I can see my passkey from here. I can see the details, I can add a password for the passkey if I want to add from here, look at this.

[00:08:10]
I can share the passkey using AirDrop so I can AirDrop any of you my passkey and then. You can log in as myself with my account because I can share my passkeys. So now they're gonna not go into shafting my device not just in my iCloud account, they're going to be in your iCloud account as well.

[00:08:34]
Okay, make sense? And the next question is what happens if you are in Google Chrome not supporting passkeys and you need to log in? And you're on Windows or Linux. So when you sign in there, you will use a phone with QR code. That option is multi-platform, multi-browser, multi-operating system.

[00:08:58]
So if I click there, I get the QR code. I can use my phone connected to the same iCloud account and this is going to connect through Bluetooth. Remember, it requires real presence. Both devices are going to be connected with Bluetooth, that means Bluetooth needs to be on both devices.

[00:09:16]
And then I can log in on Windows on Linux with an iPhone with a passkey that is on iCloud. Make sense? So that's how it works, that's how passkeys work. What about Android? So if you search passkeys Android right now, you will get into an article from just a month ago from this recording, saying that they're bringing passkeys to Android Chrome, so it's coming.

[00:09:48]
And today, if you want to play with that, you can on Chrome Canary, on desktop, and on Android, Chrome Canary, and also you need Google Play Services Beta. So you need to enroll your account, your Android account, under Google Play Services Beta. Wait a couple of hours until the Play Store replaces your Google Play Services app in your phone, and then with Chrome Canary you can try passkeys on Android.

[00:10:20]
Probably in 2023 this is going to be available in stable. Directly, and here you see how the experience looks like on Android. So passkeys are multi-vendor, multi-platform. The only thing that you need to implement in your website is WebAuthn. So our server is passkey compatible because it's just another authenticator on top of WebAuthn.

[00:10:50]
Make sense? And the final idea is that if passkeys work. And users understand what they are, they will replace passwords because it's not really secure if you have passkeys that are really secure. But as a backup, as a fallback, you have a password that is one, two, three, four.

[00:11:12]
If you have that, then you still have a problem. So the idea is get rid of the password, you will only have passkeys that's like the end goal for web authentication.