![Web Authentication APIs](https://static.frontendmasters.com/assets/courses/2023-02-15-web-auth-apis/thumb.webp)
Check out a free preview of the full Web Authentication APIs course
The "WebAuthn Overview" Lesson is part of the full, Web Authentication APIs course featured in this preview video. Here's what you'd learn in this lesson:
Max introduces WebAuthn, a multi-vendor effort supported by the FIDO Alliance and W3C. It's typically used as a two-factor authentication strategy and is supported in every browser.
Transcript from the "WebAuthn Overview" Lesson
[00:00:00]
>> So far, we've covered how to make, let's say, let's call it a standard authentication classic form, username and password. We have discussed the security issues that that has. We have added credential management API for auto-logging and storing those credentials safely, client-side, at least with a compatible browser.
[00:00:20]
Then, how to use at least one Federated login, in this case, Google. And now it's time to talk about Web Authentication. That is kind of one of the APIs that some of you were actually waiting for, probably. So, Web authentication, it's a multi-vendor effort, so it's not something from Google or something from Safari.
[00:00:42]
In fact, I can tell you that after request payment API, that is the one that will let you like use Apple Pay, or something like that and also WebRTC and WebAssembly, this is actually the one that every vendor wanted from the first day and that's why it's actually, it has a pretty good implementation on every browser.
[00:01:05]
It was greatly appreciated by the FIDO Alliance, that's the one that is creating USB keys and all the stuf and also the W3C. So today it's a double effort between two organizations the W3C from the standards perspective, and the FIDO Alliance from a more authentication process that goes behind.
[00:01:30]
The idea is that with Web authentication, so someone will store safely private keys while sending public keys for our server. And by the way, I'm simplifying all the wordings here from the spec. So when I learned about Web authentication, it wasn't actually so simple to understand what was going on, because it's written by the FIDO Alliance, mostly from a hardware perspective sometimes.
[00:02:03]
Yeah, we have some diagrams where for example, the server is not called the server, so everything has a different name, so when you try to understand what's going on, even with the diagrams, is difficult, who is the authenticator. Is at the website now who is the reliant party?
[00:02:20]
So, we are the relying party, by the way, but it's like when you read it, it's difficult to follow what's going on, so I simplify it, I'm not going to use the wording from the spec, I'm going to use a more Web developer wording, so we can actually understand what's going on and it's not so difficult when you change the wording.
[00:02:44]
So, the idea is that this API can work with FIDO2, that actually works with USB keys, I have one, so we can try one later, and platform authenticator. So, what's that? So you can use any solution that is using a FIDO2 security standard. Now we're not getting too deep on that, but it can be a USB key that you connect in your computer, or that you use NFC with your phone, the key, they work with NFC as well.
[00:03:19]
And it can work with software based FIDO2 compatible, let's say, password managers but we're not going to have passwords here, and it works with platform authenticator. What's a platform authenticator? Face ID, Touch ID, Windows Hello on Windows, Android biometric authentication, all these methods are known as platform authenticators.
[00:03:45]
So it can be an external authenticator, like an external USB key, or it can be a solution that the platform is offering. The API is the same API, okay? And originally, still today typically, we use it as a second factor authentication. So, we start with username and password, and then we add a second factor authentication with Web authentication that can also help or login, or simplify or the login.
[00:04:21]
For example, you have an account with username and password where a federated account is the same, and I add Touch ID on top of that. So next time I get into the website, I can just use just my touch to get into a website. But you still have a username and password.
[00:04:40]
In case you change your phone, in case anything, why? Because on both situations, so FIDO2 and platform authenticators, I mean, you can change your device, and if you change your device, your thing is not gonna work anymore. Even if it's your same finger, why? Because actually, and this is important, the operating system, Nor the browser, nor OS, no one is getting the data of our fingerprint, no one.
[00:05:12]
The same happens with the face, if you use face ID in your website, it's not like your website will get the details of your face in any format, a 3D model of the face, that's not how this works. No one is getting your face, not even the browser, not even the OS, depends on the hardware, but on iOS, it happens at the chipset level, or that authentication.
[00:05:37]
So the face recognition data is not even in memory, in RAM anytime, it goes to a chipset that has security inside, so yeah, if you wanna hack that data, it's not going to be so simple. Okay, we are talking about probably nanometers, or even less than that. So, that means that when you change your phone, or when you buy a new MacBook, you have to, again, save your fingers and all the private keys that belongs to your previous Mac will not work on the new one by default, okay?
[00:06:18]
Make sense? So that's why it's a second factor authentication, because if it's the first factor authentication or the only one, we will lose the account when we buy a new phone. Make sense? Or when we buy a new computer, or if my USB key is broken, I need to buy a new one.
[00:06:38]
So that's why typically, originally, its work as a second factor authentication. We still need another first way to authenticate the user. But if you remember when we saw these Diagram, okay? We are talking about this. So we are here, okay? We are here, but there are still one more layer up that we will cover by the end of today's course, okay?
[00:07:11]
But we are here, that means that when we are here typically we also have a form based authentication or another kind of multi-factor authentication because if not, we'll lose our account if we lose the device being the platform authenticator or the FIDO2 authenticator. Make sense? Today it works on every browser, with different techniques and abilities based on the browser.
[00:07:37]
It can be a PIN-based software key, the browser can ask me for a pin, like I wanna save these credentials but under a pin that you define. It can be a FIDO2 USB key, such as Yubico, or any other company that is making these USB keys. By the way, there are FIDO2 compatible Apps for mobile devices as well.
[00:08:06]
So you can use your mobile device as some kind of key. And also we have biometric authenticators, Touch ID, Face ID, Windows Hello, or Android. It's the same API, it's the same way to store credentials, okay? As Web developers, we cannot request Face ID, we request authentication. Each device, each browser will pick whatever solution it has to offer you, but you can express, what do you prefer?
[00:08:43]
Like I prefer platform authenticators over USB keys, I prefer uses presence, what is that? If it's a pin, it can be a bot that is typing the pin, makes sense? If it's a USB, I'm not sure, does anyone has a USB key? Have you ever seen one. No, I will show you one in a minute.
[00:09:10]
Not the flash drive, I'm talking about the security USB key.
>> Do crypto hardware wallets use that mechanism?
>> So crypto wallets, hardware like Ledger, they are similar, typically they're not FIDO2 compatible, you might have one that is also FIDO2 compatible. So the technology behind is similar, but typically you cannot use that one for storing these keys, okay?
[00:09:37]
But they could technically depends on the software actually that they have. But typically it's not just you plug something on your USB and that's all. You also need to interact with the key, that's mandatory. So you need to put your finger over the key, for example. And that doesn't mean that the key will read your fingerprint, no, but it needs human interaction.
[00:10:01]
So when you are using the API, you can say, hey, you know what? I need an authenticator that will require user interaction. Of course, Touch ID, Face ID, they all require user interaction
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops