Supporting Passkeys with WebAuthn

[00:00:00]
>> Josh Long: But how do I avoid passwords? Well, you use a different factor here. I'm using secure encoded passwords, but it's still a password. I want to avoid that even with a password manager. Still tedious. So I can use a different factor. One thing I can do, let's go back to my code here is I go back to my.

[00:00:16]
I'm gonna add authorization. I'm going to start actually configuring the security filter chain that we talked about earlier. Okay, there we go. And I'm going to say I want to enable. I'll say build. I'll say return that. And here I'm going to do one time tokens. We'll talk about this in a second.

[00:00:38]
I want to recreate the default behavior which is what I'm overriding by creating this bean. So form login is what we had before. I'm gonna recreate that. That's still there, but now I'm going to enable one time tokens. So token generation success center. Okay, and this, the way this works.

[00:00:58]
You've probably seen these before. They're called like magic links in other contexts, right? You go to a website, you say, it says, what's your email username? Or whatever. You say, okay, it's whatever joshlung.com it sends you a link and you click on the link and you're logged in.

[00:01:12]
The reasoning behind that being, okay, well if you have access to your email, you know, you must be who you say you are. So we're not trusting that. We have a system that's secure enough to protect you, but we're trusting that Google does, or Microsoft or whoever administers your email account does.

[00:01:28]
Here's that callback. I'm not going to set up Twilio or SendGrid or whatever for you. You can do that. There's Java APIs and even spring boot integrations for all that. But let's just do a simple example. Let's suppose I am going to send a response to the client out of band.

[00:01:40]
I'm going to use a magical out of band communication mechanism called console mail where I just send things to standard out. So we're going to say response.set header HTTP headers. Wrong one, httpheaders.content.TYPE MediaType is TEXT_PLAIN_VALUE, okay? And then we're gonna say response.set or getWriter. This is the low level servlet API.

[00:02:09]
This is the API that underpins Spring MVC and all the other stuff we've seen so far. So I'm just using the low level thing. I'm gonna say, you've got console mail, right? And then we'll say flush, okay? And here, please visit and it'll be HTTP localhost8080 login OTT token equals one time token.

[00:02:41]
Get token value. Okay, so let's try that out. So that's the token that's generated by spring security for you. Obviously this can be a lambda. That's a lot nicer that way. So now command shift n incognito window. Okay, what happened? I forgot to add the authorization. What is this?

[00:03:10]
Since so as soon as you define one of these, you're overriding the defaults. So you go back to zero. You have no protection at all. So when you start doing that, make sure that you lock down to get the equivalent effect. I'm saying any request that comes in needs to be authenticated.

[00:03:23]
Make sure you don't forget that. Okay, so these two things are equivalent to what you get out of the box. If you don't define one of these beans by yourself, you are saying, I support login and all requests need to be authenticated. So hello. Okay, look at that.

[00:03:36]
So I've got the username and password just like before. We can prove that. Still working, right? Good. Go back to hello, command shift n incognito window. Now I'm going to ask for a console mail. Okay, you've got console mail. Great. Click on this link, give me a token, hit enter, and now I'm logged in.

[00:03:53]
You can prove it by going to hello. Okay, so that's one time tokens or magic links or whatever. Again, you can send an email instead of doing what I just did on the console. You can send a phone message, something like that. Okay, so that avoids passwords. You're trusting some other factor besides the password.

[00:04:12]
But have you all set up passkeys? Passkeys are pretty dope. Have you heard of passkeys? Passkeys, they're everywhere. Google, GitHub, Microsoft. Everybody's saying, hey, every time you log in, they're like, are you sure you don't want to set up a passkey? You should set up a passkey. And it's actually pretty great.

[00:04:30]
It's the idea. Are you using passkeys?
>> Speaker 2: I was just going to say that we also have a course by Max Fertman that covers some web authentication strategies, including passkeys.
>> Josh Long: Yes, yes. Okay, there you go. Seconded. Passkeys are super-duper good and it's a marketing name for a protocol called WebAuthn, right?

[00:04:51]
WebAuthn is a open specification that allows you, basically, to package up the idea of using a public key in as palatable way as possible. Usually by storing it in either a trusted agent like your browser or your operating system or your password manager, right? And then usually also federating it.

[00:05:13]
So, so what does that mean in practical purposes? It means I can use my face to log into a web app on my iPhone. Face ID. It means I can use my touch sensor to log into a web app on my Mac or Windows or whatever. I can use a yubikey, an external key in certain devices.

[00:05:30]
I can use my watch, whatever. In the Apple ecosystem, my public keys, my pass keys are stored in icloud. So any device to which I have access can authenticate as me, right? So let's set up Webauthn. When I set up this project though, I had to manually the rare manual addition.

[00:05:50]
I went out of my way to manually type this in. It's not on the spring initializer, it's not on start.spring layout, okay, so WebAuthn Core, I have to do that. But now with that in, I'm going to say webauthn web authn and you've got a few things you need to specify.

[00:06:06]
Allowed origins is this host import, obviously. Can you see that font back there in the back? I'm sorry about that. I'm being greedy. So I'll call this Bootiful Frontend Masters, okay? And then rpid is I just put local host. Okay, it's distinct. Okay, so let's go ahead and restart that.

[00:06:33]
It's a lot of work. I don't do this kind of work lightly. Okay. It's like six lines of code, but I think it's worth it. So now I'm going to log in with one of these three, right, Josh PW, whatever, right? Actually, here, let me make this. I hate having to remember to redirect myself back to that endpoint.

[00:06:53]
So let's just do that. I'm very lazy. Okay. Okay, Josh P.W. great, that's worked. Once you're logged in the normal way, whether it's magic links or username and passwords, then you go to webauthn register. Okay, so now I'm gona register a passkey via the browser. Now, before Mac OS 15.4, I think the latest one, latest big one, the passkeys for all of macOS were stored in Safari.

[00:07:28]
So if you registered a passkey in Chrome, you still had to go to Safari to delete and manage and update them, right? But now in the new one, they have this passwords app, okay? Passwords.app, it'll manage your passkey. So I wanna make sure that I've got the passkeys app loaded and then passkeys, okay?

[00:07:49]
So you can see at the moment I've got no passkeys in my passwords app, okay? My operating systems password manager, which is where you can find passkeys. So I'm gonna call this mbp. Now, there's two flows here. They're both very useful. So I'm going to do the first one.

[00:08:04]
Use touch ID to sign in. Why, yes, yes, I will. So I click on my little finger there on the sensor. Now I've got a passkey stored in the operating system that was created today. Doesn't give me anything more specific, but whatever. So now I go over here, Incognito mode login.

[00:08:30]
Now I'm gonna say sign in with passkey, okay, so you can ting. Okay, so now I'm logged in, hello, Josh. Nice? If I go to the same app, same website, in a completely new session, go to my phone, I can do face id. The same key works. I don't have to register a face ID token, right, or whatever.

[00:08:59]
It's shared, it's federated with iCloud. My public key is presented by icloud. So I can do that in any device that's connected to my icloud account. Super good. Okay, now, what about the, so common, I don't know when the last time this was actually a thing that happened to you, but when was the last time you were in a library looking up things on the web, right?

[00:09:22]
I get that it's a really common scenario, but it hasn't been. I don't even know where my library is. Sadly, you know, I'm very lucky that way. So I do want to take care of that scenario though. So that is one of the nice strengths of passkeys. I'm going to delete this.

[00:09:41]
Goodbye. I no longer have a passkey. I can't log into that website anymore. So localhost:8080, okay? So now I'm gonna log in again, Josh PW. Okay, so now go back to the WebAuthin registration endpoint, okay? Because the service is still running. Let me restart the service. It's in memory.

[00:10:05]
It's got that. You can. By the way, it's a bean, right? You create an object of a certain type that implements the interface and you can store the stuff in SQL or you can start in memory, you can start in MongoDB, whatever. Okay, restart, Josh, there you go.

[00:10:19]
So no passkeys, no pass keys. Okay. The world is. The world is consistent again. I'm gonna register a new one. So mbp, okay, register. And instead of choosing touch id, I'm going to choose other options. And there I'm going to say register with my iPhone. So I don't trust this terminal.

[00:10:38]
I'm at a computer that has goodness knows what spyware on it and stuff like that, and cameras pointed at me and all that stuff. So instead of doing that, I. I'm gonna log in with my iPhone, which I do trust. This I've had in my pocket the entire time I've come to this library.

[00:10:54]
So I now hit continue and it's going to ask me to scan this QR code, which I shall do. And it says, do I want to sign in? It says, do I want to store it in passwords? Or my bit warden, I'll choose passwords. It's asking me to do face id.

[00:11:11]
Okay, and now I've got a WebAuth in there. Did you see that thing update while I was looking at my camera? So now I've got a token. And I never entered a password. I never gave my fingerprint. I never did anything with this computer. I did it with a trusted factor, my phone or my.

[00:11:27]
Actually, you can also do it with your watch, right, if you have the Apple watch on. I don't have the Apple watch on because the glare is weird when I'm gesticulating in the camera. Okay, so now we go here, log out. Let me just do a new incognito mode.

[00:11:43]
Here we go. So now log in again, finger down, okay, that works. Now let's log out again. Localhost:8080 and I'll sign in with a passkey this time. And this time I'm going to use my phone again because again, I don't trust this dirty computer. Okay, so now I'm going to choose continue, scan the QR code.

[00:12:17]
Do I want to do face ID to sign in? Continue. Okay, and there we go. Hello, Josh. Good. Any questions on that stuff? That's a really great experience. That's not just the more secure experience, it's actually the easier one too. Nobody has to remember a password. They don't have to learn about password managers.

[00:12:38]
They just have to have their phone or their watch or whatever and Google has the same sort of arrangement in the Android space. As far as I know. You can also store this stuff in your password manager. 1Password bitwarden they all support. So as long as you've got your password manager, you can authenticate with that instead of in lieu of icloud, which is acting as the holder of the passkey.

[00:13:00]
Very, very powerful.