SimpleWebAuthn & WebAuthn.io

[00:00:00]
>> We are going to use a library for using this. In fact, to use WebAuthn, you have three options. Yeah, let's say three options. You can write everything your own low level, and you don't want to do that. No one is going to do that because it involves cryptography, APIs, okay?

[00:00:21]
A lot of things that, yeah, we as web developers, it's not something that we manage on a daily base. The other one is to use an identity as a service provider and then we actually don't care too much. We just enable the setting. In Auth0, and yeah, we have WebAuthn.

[00:00:45]
And the third one is to use a library that is probably going to be the most common solution when you're creating your own authentication mechanism. When you're doing that, well, there are many libraries. I try all of them, all the open source libraries out there for Node.js, and I think this one is the best one, okay?

[00:01:11]
And also the one that is updated, and is following the browser's updates It's simple WebAuthn, okay? And it's pretty good. And it has actually two libraries. A client side library and a server library. So it has the wrapper on top of the and also it's doing all the heavy work, on the back-end, okay?

[00:01:31]
All the crypto thing. Creating the challenge. Verifying the challenge. Decrypting, encrypting, it's complete transparent to us okay, make sense? So we are going to use that library to create that into our project. Make sense? So before actually writing code, let's open this website, WebAuthn .io. WebAuthn.io let you show this in action so we can see it's in action as a user.

[00:02:03]
Okay? So they have a solution that they're not saving anything in the backend. So everything happens line side. So here you put username, okay? And then you say, okay, you wanna register. First you register and then you log in. The flow is the same as usual. When I register this, you can see it appears this dialogue that I'm using macOS Ventura and because of that WebAuthn now says directly the term passkey.

[00:02:41]
In fact, let me tell you something. We haven't mentioned passkeys officially in the slides yet, more than mentioning a couple of times. But passkey is becoming the name for WebAuthn. So no matter if we are following the passkey design pattern that we will see in a minute. So even if you're using WebAuthn for two-factor authentication, it's going to be called a passkey, okay?

[00:03:08]
So, because the OS is passkey now for everything. If you have the previous version of Safari, you will see it's different. The wording is different. So, do you want to save a passkey for frontend masters? So, if I use my touch here, my touch ID, okay, done. So now it says, well, I think it was aborted because I aborted or initially, so let me try again done.

[00:03:35]
Okay, there. So now I can authenticate. And what's the deal? Now I can sign in, you'll see my saved passkey. So I use my finger again. And now it's done and yeah, I'm logged in. Okay, that's the user flow. And by the way, what happens on other browsers like Chrome?

[00:04:00]
Well, let's try. So I'm going to Chrome, WebAuthn.io. Again, the same, I need a username. I will register this. And this is what you see. Look at the UI, completely different. So, in this case, it says hey, how do you want to save a FIDO2 or platform authenticator authentication?

[00:04:36]
I can use a phone with a QR code. I can use a USB security key, this device or a Pixel 3, that's a phone that I have in my backpack, an Android phone. If I use this device, it's asking me for touch ID. Okay, I think I took too much time to actually make it work, yeah.

[00:05:02]
But if I try and say use a phone, I have a QR code. That QR code has started with Fido. Fido column. And I can try to use my iPhone so I'm in Chrome there but I can open the camera on my iPhone, okay? And then I will receive a sheet.

[00:05:21]
You're not going to see that no worries. But they will receive a sheet, you can try the QR code by the way. And you will receive a sheet where you can actually use your phone. And some people will say well, but if it's a QR code, you can try over the wire.

[00:05:40]
In fact, if you are watching this course recorded, you're seeing the QR code on the screen. You may wanna try it, but you know what? It's not gonna work, why? Because this QR code needs physical presence. You have to be here in my room. Why? Because the phone to actually make that connection will use Bluetooth.

[00:06:06]
To my device. Okay, so with this, it's avoiding remote interaction. So someone from the outside that can actually check me something. No, it has to be within Bluetooth range. Okay, make sense? So the idea is we register and we then authenticate. And here you can see all the options that you can decide.

[00:06:36]
For example, discover a credential, authentication attachment. For example, if you prefer cross-platform or if you prefer platform. We'll talk about that later. But these aren't like require user verification so you can disable that. So then you are okay. If it's a system that will generate a pair of private and public key without user intervention.

[00:06:59]
I'm okay with that. That's fine. Okay, make sense? So, this is just to test the API from a user's perspective. If you try this on your phone, you will see this directly on your phone. And by the way, can I try this on a simulator? Like, for example, the iPhone simulator?

[00:07:22]
Well, let me tell you this. It's working on iPhone simulator and I will show you how to do that. On Android, because Android is still some kind of a beta support for this, I will explain how that works later. It doesn't work so well, it works only with USB keys, so with the Android emulator.

[00:07:40]
But on iPhone I can go to this website, WebAuthn.io. And now, by the way, this is the iOS simulator that comes with Xcode only available for the Mac. So you need a Mac and you need to install Xcode that is available for free in the Mac App Store.

[00:08:02]
So from here in the menu, you can go in features, okay? There at the top, you can go to face ID and you need to click first Enrolled. If you select Enrolled, it will now simulate face ID or touch ID. Because it can be it can still be an iPhone SE that has t ouch ID.

[00:08:27]
Or an iPad that has touch ID here at the side and not face ID, right? After you do that, now, for example, I can try to register. So, we are frontend masters, I will register. A key and now it's asking me for a passkey, okay? If I say continue it says okay, let's try a face ID.

[00:08:53]
But yeah, I'm putting my face here and it doesn't work because it's not a real iPhone, okay? So to simulate face ID or touch ID in the simulator, you go again to features, Face ID, and you can select matching face, or non matching face. So matching face will actually simulate that.

[00:09:13]
Yeah, it's my face. So now I can try to authenticate using the same face. Okay, matching face. So for debugging this is pretty cool because you can use just a simulator. You don't need a real device and that works perfectly we look [INAUDIBLE]. Okay, now after we set up our project we worth indication.

[00:09:36]
We will see what Chrome has as a solution for us for debugging as well.