Implementing Passkeys in Practice - Computerphile

0:00 And I thought maybe a nice thing to do

0:01 would be to actually implement some pass

0:04 keys.

0:04 Create one, use it to log into a

0:07 pretend website and actually sort of see

0:09 some of the data that's going back and

0:10 forth.

0:10 I mean, it is a complicated

0:12 system, but it also is kind of intuitive

0:15 what happens, right?

0:16 I've got a website

0:17 that I created, one of my classic,

0:19 unbelievably good-looking, well-designed websites that I like to make, where we

0:22 have both steps of the process.

0:23 We have the creation of pass keys and we have

0:26 the use of pass keys to log into things.

0:28 The way that I've coded this up is you

0:30 can see all the data going back and

0:31 forth.

0:32 That that was my whole plan.

0:33 And so we'll draw out what happens and then

0:36 we'll look at this and we'll look at the

0:37 code and we'll see what's going on under

0:39 the hood.

0:42 If we just start by looking at just how

0:43 you create a pass key, right?

0:45 Or how you your browser and your operating system

0:48 create a pass key in should we say in

0:51 combination with the server at the other

0:52 end.

0:52 So you want to log into a website

0:54 and that website is going to be running

0:56 some kind of PHP or Node or some other

0:59 kind of back end that does some code.

1:01 Let's just say this is the server,

1:03 right, which in my case is PHP.

1:06 Now we're over here on the browser and in my

1:09 case, this is obviously, you know,

1:10 JavaScript and HTML and things, right?

1:11 So I'm just going to write JS.

1:13 Full disclaimer, I neither program in PHP or

1:15 JS.

1:16 So you know, I've done my best to

1:17 kind of haphazardly join this together.

1:19 But anyway, let's suppose you log into a

1:21 website, you type in your username and

1:23 you type in your password, right?

1:25 This is what normally happens.

1:26 And then they've now added this functionality to

1:28 the website to create a pass key.

1:31 You that's when you get that prompt, right?

1:33 You've logged in.

1:34 Would you like to

1:34 create a pass key on this website?

1:36 So the actual request to create a pass key

1:38 starts with the client on the browser,

1:40 right?

1:41 So they're going to fetch from

1:43 the server arguments for creation create

1:46 args.

1:46 And that's basically saying we

1:48 want information on the server.

1:50 What does the server need?

1:51 Do they need the

1:52 user to be verified?

1:53 What kind of um

1:55 pass keys do they allow?

1:56 This kind of stuff, right?

1:57 So this goes off to the

1:58 server and the server creates those

2:00 args.

2:01 A lot of this is just JSON,

2:02 JavaScript object notation, right?

2:04 And we'll have a look at this.

2:05 This gets sent back to the browser and this is

2:07 kind of where the pass key actually gets

2:09 created.

2:10 So the browser is going to call

2:11 some JavaScript called navigator.credentials.create,

2:15 create, right?

2:16 And this function on any

2:18 browser, that's what creates a pass key,

2:20 right?

2:20 And it needs these arguments to

2:22 do that, right?

2:22 So, it takes the

2:23 arguments about the server.

2:24 It's going to create a pass key.

2:26 And this will mean

2:27 your browser then talks to the operating

2:28 system or talks to your password manager

2:30 or talks to your phone depending on what

2:33 website we're on and what we're using to

2:35 browse that website.

2:36 Right.

2:36 And that's where the pass key is created.

2:38 So, this will involve, you know, a TPM.

2:41 That's the trusted platform module.

2:43 Yeah.

2:43 or an operating system software

2:45 version or you know a password manager

2:47 something along these lines.

2:49 This will create a public and private key pair

2:52 which will be buried again in JSON and

2:55 then go back to the server for checks

2:57 and if the server's happy with it, it

2:58 will store all this stuff in its

3:01 database.

3:02 That's a B, not a D.

3:03 DB, right?

3:05 And then it will respond with

3:07 okay, right?

3:08 Or some kind of yeah, good

3:09 job.

3:10 You've made a pass key, right?

3:11 So this is just the creation of a pass key.

3:13 So I've coded all this up.

3:15 Let's actually see some of this data, right?

3:18 Because it is cryptographically

3:19 complicated, but actually once you see

3:20 it and you point out the main things, I

3:22 don't think it's quite as bad as people

3:23 think.

3:23 So I've created this demo

3:25 website.

3:25 I've got six buttons.

3:26 Normally you wouldn't see all the buttons, right?

3:28 Most of this happens automatically.

3:30 Most of this happens in one or two steps in

3:32 the JavaScript behind the scenes.

3:34 But I wanted to kind of hardcode everything so

3:37 that you could see each individual step

3:39 happening.

3:39 What I've done is I've got

3:41 this index HTML with all the JavaScript

3:43 involved.

3:43 I've got various login and

3:44 register PHP files that do most of the

3:47 verification and checking of these

3:49 credentials.

3:49 I got a bit carried away

3:50 and overengineered it primarily because

3:53 I wanted to avoid too much library use

3:56 because to do that if you want to see

3:57 all the individual stuff you kind of

3:59 have to do a lot of it yourself, right?

4:00 Most libraries will do all this in a

4:03 much better way than I'm doing but they

4:04 won't show you all the data.

4:06 So the first thing we're going to do, we just

4:08 logged onto a website.

4:08 Our user our username is demo user for this for this

4:12 example.

4:12 And our website is not Amazon

4:14 or BBC.

4:15 It's localhost, right?

4:16 Because it's running on my laptop.

4:18 And we're going to fetch the create argument.

4:20 So this is going to ask the server what

4:22 it's going to need from a set of

4:23 credentials.

4:24 So if we click this, this

4:25 goes off to PHP and returns for us some

4:28 JavaScript with various combinations of

4:30 binary data and base 64 and all this

4:34 other kind of business.

4:35 But there's a few key things that we need.

4:37 The first thing is the ID of the relying party.

4:40 So that's the website we're on.

4:42 The username of the user and a challenge and

4:45 that's basically to stop people from

4:46 replaying creation things later, right?

4:48 This challenge is going to be unique to

4:50 this.

4:50 So if I click fetch arguments

4:51 again, it will get a new challenge.

4:53 So if we go back to our little diagram,

4:55 we've just created these arguments right

4:58 here [clears throat] and we've returned the arguments in JSON

5:01 to our browser.

5:02 The browser now needs to

5:03 create the credentials.

5:05 So if I create

5:06 click navigator.credentials.create, it's going to ask the operating system

5:10 for a pass key.

5:11 Now my password manager

5:12 has popped up.

5:13 I'm not going to use it.

5:14 And then Windows pops up.

5:15 Windows has said, "Oh, I've been asked for a pass

5:16 key for demo user on local host.

5:19 Would you like to do it?" Now, if I click

5:20 cancel, it will just return failed.

5:22 Right?

5:22 But I'm going to click okay.

5:23 I'm going to type in my pin code.

5:26 It goes off and the trusted platform

5:28 module on my computer will sign this.

5:31 Right?

5:31 And it will different things will

5:32 happen depending on where you're

5:33 creating the pass key and the data it

5:35 returns back is quite complicated right

5:37 is rather than look at every single

5:39 field.

5:39 I wanted to highlight the key

5:40 stuff.

5:41 So first of all the client data

5:43 which is this thing down here.

5:45 This is just information on what website it is.

5:47 What was the challenge right?

5:49 And you can see that the challenge this

5:50 challenge GB uh uh GPBQ is actually the

5:56 same one that was sent earlier on in the

5:58 fetch argument.

5:58 So that's almost like a

5:59 kind of unique ID for

6:01 it's a unique ID, right?

6:02 And so it stops

6:03 you let's say sending back to a server a

6:06 [snorts] challenge like 2 days later or

6:07 someone else doing it or or you know it

6:10 stops any kind of situation where some

6:12 of these messages are being replayed

6:14 later, right?

6:14 Because they have to be

6:15 new.

6:16 The attestation data is essentially

6:18 all the signatures and certificate

6:20 chains and things involved in verifying

6:22 that this is a real TPM and it is the

6:25 one that actually created these

6:26 credentials.

6:27 Normally a lot of this

6:28 attestation is actually ignored by the

6:30 servers, right?

6:30 It's not that important.

6:32 But consider a situation where maybe

6:33 you're running a bank, right?

6:34 And you want people to log in, but there you

6:36 want them only to log in with your

6:38 official authenticator because you don't

6:40 want um other random people producing

6:43 pass keys.

6:44 You might verify that it's

6:46 it's the exact hardware or software

6:48 mechanism that you wanted inside here.

6:51 So in this case, so the format is TPM.

6:53 That means that a TPM was the thing that

6:55 that created these credentials, right?

6:56 That's my TPM on my motherboard.

6:58 I'm not convinced that knew a TPM because it

7:00 signed this message with SH1 hash right

7:02 and RSA which is deprecated.

7:04 Um but for this atstation data that's not not that

7:07 important

7:08 just to sign it is

7:09 yeah it's signed with the private key

7:11 it's baked onto the chip right and so

7:14 that can't be changed and it doesn't

7:16 matter that we've deprecated uh RSA in

7:19 some sense or RSA sh1 because there's

7:21 not a lot we can do right short of

7:22 replacing the motherboard.

7:23 So I won't be

7:24 doing that.

7:24 I'm not that into it.

7:25 Now we have a certificate change.

7:27 So this is the certificate for the TPM or and this

7:30 is the certificate for uh Microsoft

7:32 intermediate certificate and there is a

7:34 root certificate backing this up and all

7:35 operating systems will offer something

7:37 like this.

7:37 And then a couple other

7:38 things that are interesting.

7:39 This is the user presence and user verification

7:41 fields.

7:42 And what these are saying is

7:43 that I actually had to type in a PIN to

7:45 verify myself to get this to create a

7:47 credential rather than it did it

7:49 automatically.

7:50 Right?

7:50 Sometimes automatically is okay.

7:53 Sometimes we prefer that it isn't.

7:55 And finally, this is the public key, right?

7:58 So this is the

7:59 elliptic curve DSA key which will be

8:02 sent to the server and stored and used

8:04 to verify login later.

8:06 So we're going to

8:06 return these to the server and the

8:08 server does a load of checks.

8:10 So it checks for example that the user was

8:11 verified.

8:12 It checks the certificate

8:13 chain.

8:14 It checks the signature on this

8:15 is all okay.

8:16 So a TPM did actually sign

8:17 it and then it stores it in the

8:20 database.

8:20 So we've got the username is

8:22 demo user.

8:23 You'll notice that over up

8:25 here when we created the credential, it

8:27 it was given a random credential ID

8:29 that's in B 64.

8:30 It's just a binary

8:31 string.

8:32 The credential ID is the unique

8:34 identifier for this public and private

8:35 key pair and it's so that the website

8:37 can say that one please later.

8:39 So this is what's got stored in the database and

8:41 actually you can see this right I've got

8:42 my database up here and if I select uh

8:46 start from users you can see it's all buried in the

8:49 database right and so this PHP server

8:52 can now obtain this information to

8:55 verify people logging in later and

8:57 that's all that's required in creating a

8:59 pass key if I go into my Windows pass

9:02 key settings you can see I've got my new pass key in

9:07 my Windows account and you know could

9:09 have many more of these if I wanted to.

9:10 Let's take a step back and and and away

9:12 from that and let's look at the next

9:14 step of the process.

9:15 So you've created a

9:16 pass key and now you come back later you

9:20 type in your username and instead of

9:21 logging in with a password you have the

9:23 opport option to log in with a pass key.

9:25 What happens?

9:26 Well hold on can't tear

9:29 and talk.

9:30 The process is actually

9:31 surprisingly similar.

9:33 So we have still

9:34 we have our server and we have our

9:36 client.

9:36 So it all again always starts

9:38 with the client.

9:38 You just typed in your

9:39 username, demo user or whatever on some

9:41 website, right?

9:42 And now the server needs

9:43 to decide whether you're going to login

9:46 with a password, login with a pass key.

9:48 So we do a fetch of the get arguments.

9:51 And these are very similar to the create

9:53 arguments.

9:54 They're basically saying if

9:55 there's a pass key, the server will

9:56 respond with what pass keys are

9:58 available, what it wants to see, and the

9:59 challenge token, which is really, really

10:01 important.

10:02 So, this goes off to the

10:03 server and makes the get arguments.

10:04 And this comes back to the client.

10:07 The client is going to call navigator, which

10:09 I'm going to shorthand now because I fed

10:11 up on writing it down.

10:14 And that is going to take the JSON that

10:16 was returned by the server in particular

10:18 the challenge.

10:19 And it's going to ask the

10:20 operating system or the password manager

10:22 or whoever it is that that controls the

10:24 pass key to sign that thing.

10:26 Right?

10:26 that's going to go back for checks with

10:28 the server and then it's going to be a

10:30 yes or a no, right?

10:32 You logged in or you

10:33 didn't log in.

10:33 Okay, so let's have a

10:34 look at this process.

10:35 So we've already created our pass key.

10:37 We can scroll down

10:38 and we've got our next step which is our

10:40 actual authentication.

10:41 So we're going to

10:42 fetch the get arguments and you can see

10:44 we've got the challenge.

10:45 We would prefer user verification and because we know

10:48 the pass key from the database, we can

10:50 provide a list of allowed credentials.

10:52 So that's saying that maybe you have

10:54 more than one credential or you have

10:55 more than one different device

10:56 [clears throat] for that user.

10:58 Like you have your phone has a pass key on it.

11:00 Your password manager has a pass key on

11:02 it.

11:02 Right?

11:03 You might have multiple in

11:04 this list.

11:05 In this case I just have the

11:06 one and that if you recall is the ID we

11:08 saw earlier.

11:09 This goes to the browser

11:11 which then goes to the operating system

11:13 and says can you sign for me this

11:16 challenge with this ID?

11:17 So we're going to run navigator.credentials.get get.

11:20 And of course, what's going to happen is

11:21 immediately we're going to get hopefully

11:22 a popup that says, "Would you like to

11:24 use this pass key to log into this

11:26 website?" The fact that it's my slightly

11:28 dodgy website is neither here nor there.

11:31 It's Windows is perfectly happy to do

11:32 this.

11:33 There we go.

11:34 Windows security sign in with pass key for demo user.

11:36 So, I'm going to type in my password again, and

11:39 we're going to get back a signed

11:41 challenge that proves that I had the

11:44 private key.

11:45 My device had the private

11:46 key.

11:47 So we still have our client data

11:50 which is the origin and the original

11:52 challenge and we still have the

11:54 authentication data in this case which

11:56 contains things like the user

11:58 verification is true.

12:00 Um and the sign

12:00 count which is how many times this pass

12:02 key has been used that can be used to

12:05 check whether someone is has let's say

12:07 cloned a pass key somewhere else and you

12:09 actually have used it 100 times and

12:10 they're trying to use it for the 10th

12:12 time.

12:12 Something fishy going on.

12:13 The most important thing is this signature here.

12:16 This signature is the signed with the

12:19 private key, client data, and

12:20 authentication data.

12:22 So there's no way

12:22 to fake this, right?

12:23 My TPM is the only

12:24 thing that has the private key.

12:26 It's the only thing that could have responded to

12:29 that challenge, right?

12:30 And so now we

12:31 send that challenge back to the server

12:33 and we see what happens, right?

12:35 And the server checks various things, but mostly

12:37 it checks the signature.

12:38 So we return a

12:39 sign challenge and we verify the type of

12:41 the message, which is web offend.get get

12:44 the challenge is okay, the origin is

12:46 okay.

12:47 So, we know we're on the right

12:48 website, we know we're the right

12:49 username, the user was there and they

12:51 were verified and the signature is okay,

12:54 right?

12:55 And that's it.

12:55 And the status is

12:56 okay.

12:56 So, that is an effective login.

12:58 So, unlike a password where I send a

13:02 string or a hash to a server, it hashes

13:05 it some more and compares that hash with

13:07 the database.

13:08 It sends us that

13:09 challenge.

13:10 we sign it with something on

13:11 our device and that goes back, right?

13:13 And that proves that we kind of have a

13:15 password to get in, right?

13:17 But I don't need to know what the password is.

13:18 I don't know what the private key is.

13:19 I can't get it off the TPM.

13:21 And so, um, all we know is the public key.

13:24 It is a complicated system, but actually

13:27 it's kind of neat, right?

13:29 A lot of this

13:30 data you can you don't ever see.

13:31 You just see, look, you do you want to

13:33 create a pass key?

13:34 Okay.

13:34 Do you want to

13:35 use your pass key to sign in?

13:36 and um and it all works kind of smoothly.

13:40 Look, I don't know what you've got

13:41 planned for the year ahead, but if

13:43 you're here watching a computer file

13:44 video, then maybe it involves upping

13:47 your game in computer science, coding,

13:50 all that sort of stuff.

13:51 And if you're serious about that, why not consider

13:54 Brilliant?

13:55 It's got a huge and ever

13:56 growing catalog of courses and lessons.

13:59 And these are game changers.

14:00 They're interactive, superbly designed, and

14:03 really take you on a journey.

14:04 I love the way this looks and it looks just as good

14:07 on your phone as it does on a huge

14:09 computer screen.

14:11 You probably already know some of the

14:12 basics, but this stuff can really take

14:14 you to the next level.

14:15 And it's also a

14:16 great gift for people in your life who

14:18 want to go deeper.

14:19 To learn for free on

14:20 Brilliant for a full 30 days, go to

14:22 brilliant.org/computerfile or scan the QR code there on screen and

14:27 there are links down below.

14:29 [music] Our viewers are also being offered 20% off

14:31 an annual premium subscription, which

14:33 gives you unlimited daily access [music]

14:35 to everything.