Two-factor authentication workshop with WebAuthn | Workshop

Key Takeaways

[Music] so uh yeah hi everybody uh thank you for joining uh my name is mod i'm a developer on the chrome security and privacy team and today i'm with my colleague milita uh hey everyone uh we'll be following along the workshop uh and uh yeah it's it's awesome to have you all here today to run the workshop on two-factor authentication with a security key which can actually be a phone um so yeah let's let's dive right in um and um the workshop yeah welcome as i said so um uh we can start with a little run-through of the agenda um so in the first uh thank you in the first um in the first part of the of this workshop um this will be mostly an introduction and also we'll be going through some setup steps together or you will be going through some set of steps that are necessary for you to be able to follow the workshop um this will this will last about 30 35 minutes and this is an important piece of the workshop um once you're all set up we will be able to actually you know get hands-on and write some code together and to implement what uh i'll tell you about the credential registration and two-factor authentication um i think this may be about 40 minutes these are estimates of course um and then if we if we have time left which is not a given but in case we have time left we'll try and answer a few questions or look into some code enhancements um on top of the basic code we'll have written and finally uh we'll end up with some with some wrap up and goodbyes and the whole duration of the workshop is expected to be about 90 minutes um we will have uh we'll have like a little a break at the at the setup point so at the 35 ish minute mark um right uh so this is our agenda uh so we can direct and install about start with the introduction and set up and um in this piece i will also ask you a few questions so um be ready for that you'll see a poll popping up uh in a few slides but first um yeah um let's talk a little bit about what you can expect from this workshop [Music] so what you will learn today hopefully at the end of the workshop is the basics of web authentication the second thing you will learn is how to implement two-factor authentication with a security key or a phone as a security key which would need to be an android phone but we'll talk a little bit more about that in the actual set of steps and we will also have a chance to cover some best user interface and user experience practices when you're using a web often which is the api we'll be using today um now to the things we will not cover just because many minutes is actually not that long time um we will not cover how you can migrate from your current authentication system into web often um we will not cover how to build a file or server so fido is stands for fast identity online and you can think of it as a server that will deal with the really um authentication logic for this workshop and this is actually okay for you to not uh learn right now today how to build a filo server because in a real application you would typically also rely on the library uh for that um so it's fine for us to not dive into the details um but just know that uh in a real application you would rely on the library and as uh when you typically rely on libraries you would need to do some due diligence about you know uh the the quality of this library code and whether this is doing what you actually expect it to do right we will not also dive too deep into account recovery techniques um and we will also not talk about the future of web often um all of that will you will have a chance to ask questions about these topics in a different channel i'll come to that but just you know what you what to expect for for this workshop today right um quick disclaimer as i just mentioned we'll only have time to cover the basics and you will see that web often is actually a pretty wide topic potentially um but what we will do is that this workshop you see today um first is recorded so we'll post a link to the recording once that becomes available and the second thing we'll do is at some point uh in the future we will sometime soon we'll be posting a more complete version of this workshop in the written format so really more like a code tutorial um so we'll be posting that on twitter um in uh from both these accounts so if this is something you're interested in make sure to to check it out right um a few guidelines for the workshop uh just uh to make sure that you know we have time to go through the topics we would like to go through together today um we'll be running through all the code examples like all of the code together um in case you're stuck so in case you're following the workshop steps and something is preventing you from you know following the workshop properly or going to the next step to encounter an error or anything um please ask your question on the chats and prefix it with the word blocked so that you know we get a heads up and know you're blocked and can you know pause and help you resolve your issue um to make sure you can follow along if you have a question you are just curious about you know one piece of code we just uh looked at um also ask your question on the chat but don't prefix it with blocks and for these questions that will slip up in the chat we'll try and cover this in the end of the workshop if we have time left and otherwise we'll let you know how you can how you can get answers for this um great um so what are we going to build today the web application will start with so the starter code uh it's a little small right now but it will be very basic it will be just uh think of it as a login page with a username and a password and upon successful login this will redirect this will redirect you to an account page uh which will initially only display your username and you'll be able to then you know sign out so the user flow um is super basic will be we'll you know you'll just have these two pages index.html and account.html this is what i've just described so this is what you'll start with and um what you'll end up with so what we will do building together um first um in order to support web authentication with the second factor what you will need uh today for this workshop is a credential i will explain in more detail what this is but the first thing we will need is to add a credential management um ui uh into the we'll build it into the accounts page so this is what you can see here with the two-factor authentication possibility to add a credential and this year we will display a list of registered credentials um once we'll have that we'll be able to actually build a more elaborate login flow that actually enables users that have a credential registers to go through a second authentication step so once we have that what you'll be building is that the second two vector authentication page which will prompt the user for um a credential so which could be um you know touching their security key or um or typing the right button on the prompt on their phone right so yes this is what i just mentioned so if we compare that with the initial you know user flow for the starter application uh you will have here this extra step where we will check if the user is set up for two-factor authentication if they are we will ask them to authenticate with the second factor and if they're not um we will just accept their correct password as a sufficient way to log in right i can maybe pause here just uh just for a second and check if you have any questions on that um and if you do please ask them on the chat um or annuit yourself and ask a question i don't see any question right now so uh yeah feel free to ask if anything is unclear at this stage great um cool moving on um let's take a quick look at uh web authentication in short um what is it about what is this api thank you um so webrthn stands for uh web authentication api and this is really the main api we'll be looking into today and you will see that the api surface itself it's a web api but the api surface itself is really simple it's basically we'll be focusing on um two simple calls i'll come to that when we look at the code um and um the idea behind webrthn is that it's the standardized and phishing resistant protocol that can be used in any web application for for authentication this is the quick overview so how does it work exactly the way this works is it relies on public cryptography and users creating private public keepers instead of a password i'll just pause here for a second just to let you know that [Music] in this workshop today we'll be using weboven for um two-factor authentication there are other use cases for that and our first factor will still remain a password um this doesn't undermine any of the benefits of web often but just so you're not surprised we'll be using both a traditional password and as a second factor but we're both in credential um great so as i mentioned um in case you're not too familiar the only important thing to remember about uh you know publicly cryptography is that um it relies on a private public keeper so you have a private key that would be stored on the user device security this is a secret and the public key will be sent to a server for storage these are the very basics of web of them and the benefits are twofold first because the public key is nothing secret and is what is stored in the in the server um it means you have no shared secret between the client and the server and so this makes databases less attractive to act to attackers and the second interesting aspect of weber then is that contrary to passwords um the credentials you create for webauthen are actually scoped to a given site so what this means is that if you create a credential for set that example it wouldn't it cannot be used on evil site that example and that means that you cannot use credentials across sites and which is different from passwords and this makes credentials um fishing resistance good so those are the benefits for uh for web austin as i mentioned we have two main use cases at the moment and we'll be focusing today on the two-factor authentication use case um the great thing about webrtn is although it's a it's a relatively new standard it is very well supported across all major browsers so beat chrome edge firefox and safari if you have time at the end of the uh of the workshop i can detail that a little bit more in the sense that the core features of web often are very well supported if you want to go the extra step um and have an implementation that is a little more um future proof you will need to take uh to add some code to make sure this is compatible across browsers but this is more of the detail and the key thing to remember is that puzzle support is really good for for web authentic um before i move on maybe i can pause here in case we have any question on um on my birthday right now um if you're shy and don't want to unmute yourself you can also ask your question in a written form in the chat um i will move on uh quick little story about weber then and then we'll be done with all the with all the talk um soon you have a question oh yeah augustine how does that autumn work with zanzibar um thanks for the question i don't know the answer to that actually um can you what i would suggest is because i don't have the answer to that i'll take the question and um as we wrap up the workshop i'll point you to a place where i will have a chance to answer uh your question namely the discord server i'll come to that later um great that's it for now great uh cool um quick glossary um maybe you're already familiar with these terms maybe not um that's an interesting thing with weber then when you're ramping up there are terms you may need to be learning so those are like the very basics of what you need to know today in order to follow the workshop so first important concept is the credential the credential is the private public key pair um you know the public part of it is stored on the server and the private uh the private part is like on the authenticator which is um either a software or a hardware that will be generating your your credentials and also a third possession of a given credential um so you can think of it as the authenticator is basically either either your security key physical security key um if you have one or uh it may be a phone um and both a security key and a phone are called roaming authenticator because you can basically use them um pretty much with any device you would be trying to log in uh with and this is supposed to so roaming authenticators are the one we'll focus on today and the other type of authenticator you have a platform authenticators and these are typically touch id on on on a mac so these are the ones that are built into a given device so long story short authenticator for today it's going to be either your security key or your phone uh next term we'll need is the relying party so the relying party is pretty much the it's gonna need to be your website or your website's server more specifically um it's the party that is relying on uh on a you know a given uh authenticator in order to uh help to have users log in um right and finally fido server again as i mentioned briefly in the intro you don't really need to know what fire server does in detail but just remember that this is the type of server that actually takes care of the more um lower level authentication logic right if you're uh clear with these terms uh this is pretty much like all you know what you need for today so um let me just briefly walk you through uh in detail how the registration how the flow works for weapons so you have two important pieces to the um to a weber then two-factor authentication flow the first piece is going to be uh registering a credential um and in order to do that uh you can see on the right the blue is pretty much uh pretty much like the the user or the user's device and on the left it's going to be the website or the relying party and the way this would work is in case you want to create a new account um the server is going to ask for a public key to the public keyboard of the credential you will be creating a new key pair via your authenticator um and using the webauthen api and then send the public part of that to the to the server this is in order to just create a credential and then later on you're going to want to use that credential for actual two-factor authentication in our case today um so in order to do that the server will ask you to sign some specific data that you will be uh signing with the private key that's uh by on your authenticator uh send the signature back to the server who will be verifying it and if it looks good it means uh you are who you say you are and you have successfully been through the second factor authentication step this will become much clearer once we actually look at some code but this is just a quick overview um [Music] now before moving on it would be helpful for us to understand like what's how well do you know web of then and how how you're set up for this workshop um so for this um i'll ask haley to launch the poll so you should see a little window pop-up on the on the chats interface that's asking you the question number one in a few seconds so sorry just two moments um haiti are you able to launch the poll it has been launched i see people responding oh great okay awesome it looks like it's launched yes i had no idea this api existed so no so this is good you'll be learning a lot hopefully today yes exactly thanks chris so there's a little notification bubble in the corner of your screen on the yes bottom left icon bottom right okay sorry about that um either bottom right or bottom left or your screen you should see a little window up like what window pop with a question pull well a couple of those okay right um holes in the triangle okay sorry you probably need to click the little triangle square and circle icon before maybe being able to see the pull so make sure to click that because we have like two more questions um i think we can probably [Music] how many entries do we have we have a majority yeah okay so yeah uh so most of you are not familiar with the with the weber then uh api so this is first this is good to know and we can move on to the next uh next question for you which will be ah sorry that i will show here have you already set up the security key or phone for this workshop as documented in this set of steps um so yeah this has popped up great i'll give you a few seconds to answer that um no worries if not it's just for us to understand um uh how much time we want to allocate to that today um well is a message here sorry just a second okay chris is saying i did but it's on a different phone which i can go grab yes chris now is a good moment to to grab your phone uh which you've already set up um because yes all right let me check cool i have a bunch of voice here um okay so not about half half but um a bunch of you haven't yet uh gone through the setup steps so this is good to know and the third um question we will be asking so we can move on to the third question for this poll is um more of an information if you don't have an android phone or if you don't have a physical security key handy you're going to have to use dev tools it would be useful for us to know this is your case so answer yes to that question if you have neither an android phone or a security key handy all right this is your case no so i understand right now looking at the numbers that most of you actually have a security key on android phone handy let's give it a few more moments all right good so um no worries it's going to work out also with devtools um i will say though that the user interface for devtools is going to be a little bit different because you can think of devtools as really an emulator for a physical security key or a phone and it works out for the purpose of this workshop but what you will see in your browser is going to look a little bit different um this is not a problem but just so you know don't be surprised i will be using a sticky physical security key so don't be surprised is uh if what you see on your screen specifically the native browser popups um are probably not going to to be shown in the same way for you so don't be surprised if what you have doesn't look exactly like what i have right now goods um great so where are we now uh set up so yeah we're coming close um as we've just seen on the poll um not everybody has had a chance to go through the set of steps and this is important because you're going to need an authenticator in order to be able to follow this workshop either phone security key or devtools so um the setup steps were not sent for the reminder you made okay this is good to know uh thank you it's no worries we have time we will take some a few minutes now to for you to go through the set of steps so um i'll be pasting a link in the call and this is a link to a worksheet which contains a section called before the workshop and from now we will give you about 10 minutes um to go through these setup steps so let me paste let me paste the link this is the setup dock there it is cool okay there you go um everybody should have access to that document um and actually let me just briefly hear what's on there just using it um this is pretty straightforward you will have a few steps to go through and um it is it's going to be important for you to actually uh test you know set up and test whether you're using an android phone or an actual security key um or downfalls or desktops thanks uh you're going to have to to test test it out um in case you're using devtools the most important thing is that uh you are able to display the little web often panel in your application but this is all documented so i think from now on hey we could like uh you know take 10 minutes and let everybody uh set up or you know grab some water or whatever take a good break if you're already set up and then come back at 40 pass and hopefully by then everybody is all set up if you're blocked um ask your questions on the chat and we'll be happy to unblock you so i think hey you can um if you're fine just like playing a little break music [Music] everybody we can tell you you can please help keep what you find on the channel [Music] [Music] so [Music] [Music] so [Music] so [Music] [Music] um between the next question i'm checking out the answer right now i'm not too sure if i could check me out just hold on for a moment [Music] um so bonuses particularly it's not an excellent look in that case either um you have a pretty physical security uh please use that and if you don't have a physical security you're going to have to on linux you're going to have to use the devtools interface this is also linked in the setup document um does that answer the question oh yeah when music is lower now can you hear me better now [Music] haley would you be able to pause the music for a second please thank you uh yes so to the linux question um right now phone as a security key is not enabled on linux so you have two options if you're on linux you can either use a physical security key if you have one and if you don't have one you're going to have to use the devtools interface does that answer the question great noted thanks i think we can resume the music yeah you can resume the music thanks [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Music] so [Music] [Applause] [Music] [Music] [Music] so [Music] yeah one more minute and then we'll be uh continuing to engage your stuff on the side of steps have this right on the test so it can help each other [Music] [Music] good so we're at the 10 minutes mark um i hope everybody was able to follow the setup steps um again if you're stuck now is a good time to post on the chat all right smoothly saying works with the security key but didn't get the notification on the phone um i suspect it's maybe because of a mismatched user account but i'm i'm thinking you know if you have it working with the security key use the security key for the workshop um and then we can you know later help you help you troubleshoot that awesome great uh cool so yeah let's uh let's continue um let me check uh a few notes um that will be useful for the coding piece we're entering now the coding parts um just in case um i'll be uh pasting in a minute in the chat uh the actual workshop steps so this is really more of a plan b document in case you know you're lost on one of the steps and like uh lose track because hopefully you should be able to all stay together and just follow me and that should work out but in case uh something goes wrong this document should be helpful i will be posting it iron military i will be posting it on the on the chat in a minute it's actually the same duck as the setup dock so forget what i said if you scroll down at the bottom of the setup document there is something called a section called during the workshop and this is your uh this is your helper section in case you know you're stuck in between two steps okay mod akash has a question yes he has registered successfully but not able to log in can you give us more info um let me check um akash would you mind uh giving a little more details like where did you try registering and were where were you not able to log in and what are you using and as you write that i will i will continue um as you uh you know share more information to help you troubleshoot i'll continue with the workshop steps okay um quick disclaimer uh you will see you know i mentioned like like the first uh login steps uh here is uh is the password entry uh we don't actually check the password in the code just because we don't want to store a password in that demo page and it's not actually checked for correctness obviously in real application you would actually check for password correctness it's kind of a little nicer um and uh all right um let me pause here um the credential operation and girl promise i think um could you try please uh this is actually not i think this is an error you can ignore for now because it's uh i think it's an error in the documentation yes lab and it should work fine with mods example yeah exactly so this is where you got to that step you're good yeah exactly if you if you can see the little web authent panel showing and if you can click the button that says enable uh emulator authenticator follow your goods um if you still encounter issues later let us know but for now this should be fine um i cash still feel free to share more details about where you're stuck so we can help you troubleshoot well i'll keep on um second disclaimer we're only doing in this back-end some basic security checks so we're doing uh csrf checks and we're doing some input sanitizing but there are lots of things you know that are not in there because it's just a demo for example we don't check for retries on the password which you know is not checked for correctness anyway but i guess the the takeaways don't use that code in prod right um uh finally in general it's a good idea for users to have two plus security keys and if you're using your phone it can act as one security key but not as several we're entering here a little bit the realm of account recovery so it's not too relevant maybe for now but the summary of that is if you end up implementing webauthen in your application you want to make sure that people have actually several several um authenticators uh or several register uh credentials registered for authenticators um this is more of a side note um some commands you're going to need for this workshop is how to comment or uncomment a block of code this is the same as individual studio code if you're using code either command slash on mac and control slash on windows and linux i guess right um quick buzz here just to help folks troubleshoots okay no more no more alerts here so let's continue and um an important thing is i'll come to that in a minute and i'll be sharing my screen um make sure to open your little demo application in a separate window because if you um test it out next to your code there's an um a behavior that's intended with web authent but that will make it so that it's not going to work in your next to the code window so just open your code in a new window and do it the way i will i'll show you um and i think with that we are done for the setup and we can actually move on and write some actual codes and look at some actual code um again if anybody is stuck you know where to write so um the first thing you're going to do that i've already done actually is you're going to navigate to the starter codes which i'll paste right now in the chats so you're going to go there on glitch and you should see in the ui of uh glitch a button that enables you to um remix remix this project as you can see here so you will click that button it's either here or in a you know in a purple area on the top right of the screen so you're going to click remix and this will create a new uh project for you which will have some sort of random name [Music] sometimes glitches a little slow preparing projects so i'll give you some time here yeah um akash i think the issue may come from the fact that you don't have the same account potentially on the on your laptop and phone so i would suggest either uh use a security key um if you if you have one because we don't really have time to get into the details of troubleshooting now so either use a security key if you have one or are you going to use the dev tools ui in order to follow the workshop um great cool um so uh hopefully at this point everybody should have been able to clone the code um so this is where what you should you know this is what things should look like for you as i mentioned you can see this preview here of the application don't use that close that window already because this will fail instead what you're going to do is open this application in a new window sounds good again please write if you encounter any other issue so um what this should look like right now is you have your uh we have our code here and here on the on the i've opened uh just in the next step the actual diploid application for that code and sorry i didn't mention glitches as you've already understood um it's um it's a platform where you can live edit code and it also instantly deploys the code you just edited which is kind of uh which is kind of awesome um so the way this is going to work across the workshop is we're going to do some good edits here and you're going to just reload your page here and the changes are going to be reflected live deployed on the web which is cool right so um hopefully everybody should be there uh let's explore just quickly the code we have here um today we're going to spend most of our time uh in this file here which is called all of that client.js and it's basically client-side authentication codes um [Music] and we will also spend time on our views because we do have some logics on our views you will see that the curl is very vanilla this is intended it's just for us to make sure that we just focus on web authentication code this is uh you know this is we didn't invent anything special when it comes to you know rendering we're using the very basics and just vanilla javascript um so we have this file here um you know make a note of that because we'll be spending a little bit of time in that file and we have a few other interesting files the first one is index.html this one is the file where this is the you know the html5 for this you know index page to sign up or send in in the sending form um you will also notice across the codes a little octopus on emoji with some step numbers this will be this will be actually the workshop steps so um just make note of this um another view file we have here as account.html so you know this is the actual account uh page and finally we have um you know the second factor page that we're you know not using right now um that will be prompting the user for the second factor um a few other interesting things potentially are libs so in the libs we have uh off.js which is uh taking care this is the actual backend code right and you will notice that it relies uh partly it does use as a dependency um the simple website server from fido 2. so this is the feed of fido server implementation i told you about you can see we're importing it as a dependency um and we will have a chance to look a little bit at the code add the code in there but probably not make any edits here um and what else do we have um another potentially interesting one is the um server.js again for this workshop will not uh make too many will not make any edits actually into this file but um just highlighting here that uh in here you can find authentication logic that you may be already familiar with we're checking for quick expiration we're making sure that the user only can only access the account page um if they are actually properly authenticated and so on so um this behavior is not magic it's just already kind of here in this boilerplate code great um quick pause here um great i don't see any questions so as long as we don't see anything in the chat we'll continue with the workshop so let's uh let's actually get started so the first thing we're going to do is um as you can see right now uh i can have uh whoops i'm going to just play around a little bit and like uh you know create like a dummy account so that's all we have right now so the first thing we want to do is actually enable the user to create a credential which can be useful to vector authentication um in order to do that um the very first thing we're going to do is to create a utility function in our client-side authentication file so i'm gonna go to the first thing you're going to do is go to us that clients.js and if you go to line 49 if you scroll down a little bit you will find uh something called step two step one was just working the good so you've already done that and this is step two we will increment that code right so i'm using the command um slash command here and uh what we've just done here we've just implemented the code to actually register credential this is just utility code so um [Music] the most important call in there we're doing a few things here just working through the steps um the first thing we're doing is we're actually fetching some credential creation options from the server i'll come to that in a minute we'll look at what these are but this is important important to have in mind that when you're registering a credential you are going to first ask for the server from some uh for some credential creation options um you're going to have to decode these options because they come in and code it here again um this is not a web api this is actually code that we've imported from a helper a helper uh you know file here we have encoding that gs2 just utility function to do the encoding decoding because it's not the most interesting when it comes to web authent but keep in mind that these options uh you know will come will come back and code it so we're going to have to decode them and um then you're going to this is the most important call here it's a navigator that credential that creates so you can recognize here that this is a web api and upon calling that with um credential creation options as a parameter um what will happen is that the browser will prompt the user to touch their security key or you know tap the right button on their phone oh um please don't edit that code um sorry um i'll okay sorry just sorry i'll like remove rights you can still see that code but don't edit it um yeah so this is the most important call this will actually uh this will actually prompt the user to touch their security key or our phone and then once you've made that call successfully uh you end up with a credential and what you will do is uh send it back encode it to the backend which you can do which you can see here all right so um let me check i would like to briefly maybe uh take a look with you at the credential creation options like what is that about right so let's check um actually i should do that here sorry let's look at our credential creation options um sorry just movements step two step two right this is the good i was i wanted to uncomment here this is what we just done and before we move on let's just briefly look at our um credential creation options um just so you know what this is about um check so we're getting this from our from our back end uh the reason i just want to tell you a little bit about this because this is these are you can think of this as the security settings for your uh for your application um so whatever i will show you now may you know you may want to tweak that depending on your security model and what kind of credentials you want to ask for uh but basically i'll walk you through a few other interesting options in there so um the credential creation options are we have you have several of these the first one is the relying party id so this is really like the name of your application and if you remember we said that credentials were scoped to a certain origin this is what makes them a phishing resistance and this is why the relying party name and id are uh this is how they're used right so here the rpid is going to be the the hostname um so in my case you know it's going to be narrow mangrove train that glitched at me and whatever whatever your forked application name is this will be the the rp the relying party id for you other interesting things are um for you security settings around the you know what kind of authenticator you want to allow um one of them that's interesting is user verification so right now for this workshop we only have basic security keys that only requires you know you to touch them um you may want to have more you know stronger security and actually ask for a biometric security keys and in that case you would change you would change this very setting i'm kind of running through them here because like the best thing is um to you know check them in detail and check the documentation but the key thing is for you to understand that these authenticator selection options are how much security like what do you want to what do you what kind of authenticators do you want to allow and what kind of credential you want to allow for your application um let me check if this one is interesting um yeah this one is interesting so for this workshop we said we would be using roaming keys so either um secure physical security keys or phone um so this translates in the web auth and api as something that's called cross platform because you can use them across platforms um if you wanted to instead have a built-in a built-in authenticator you would need to set that to something else um there are a bunch of other interesting ones but i will just like go a little quicker here the only last thing i want to kind of show you here in the credential options is um it's it's here we're coming into the ux and ui best practices so if you want to you want to encourage folks to only register per security key only once only one credential because otherwise the ui to select a given credential for a security key is complicated so um basically this is what this allows here we're telling hey uh upon credential creation uh i don't want my user to be able to create a credential on the security key where they already have a credential for my application and this way you ensure that you only have your users only have one credential per security key um yeah there are a bunch of other interesting options but for now uh this is it so uh all we've done so far is just we've you know incremented a piece of code uh on the on the client so that was step two we're not using that function at all for now so let's go ahead and actually use it um right so what we're going to do now is we're going to go to account.html and and the first thing you will do is you will look at line 45. and you will see that there is some commented out here html codes um that is just basically a button that says add a credential so the first thing you will do is you will comment this out okay uh so so far so good well all we do is have we have a button that does nothing right now right um so the next step what we want to do is actually hook that button to the credential um registration function we have created um so for that you're going to stay in the account that html file and declare a function that's register which is uh you know already called upon um the registration button click like this guy here so we'll just comment it out um so let me do that this is uh step four so please and comment everything that is on there and we'll talk about what this does in a minute if you like formatted code you can click the format file button in english so yeah here's what this does yeah it basically just adds a click event handler to the register button um and it calls the register credential function we have created uh cool so let's see if it works out so go over to the uh to your um deployed application you can reload it and now you're going to i'm going to open devtools to see if you know everything goes well check right i'm going to click the button add a credential and here you can see that i am prompted uh to select in between these two methods depending on what you ended up using this may look a little bit different for you i think it also depends on the platform you're on i think on windows this may look a little bit different um but the important thing is that you as a user you should be prompted at that moment in time to perform an action that will create a credential so i'm going to select a usb security key because this is what i'm using and now it's asking me to touch my security key it's already plugged in for me so i'm going to go ahead and just touch it and nothing happens i can only trust that the credential has been created we will come to that in a moment something happened but like i can't see my credentials and we would like to see our credentials displayed right um so what you're going to do next um [Music] is uh briefly uncomments a piece of code that is dedicated to displaying available credentials for that user so um in account.html um you will see octopus step 5 so line 140 so you can uncomment all the code that is between this 940 and 940 um 54. cool so we have that function available now and now what we want to do is actually call it to make sure uh you know our credentials are displayed so you will scroll up and uh do two things the first thing is you will actually call this update credentials function at the end of register basically after successful try catch and the second thing is we also want to display our credentials available credentials on page load so we'll just call that function once uh on page load so for that you can uncomment the code that is on 967. um [Music] now that we've done that hopefully yes so it automatically reloaded the page by the way glitch does that when you update your code so you can see that it actually fetches fetched available credentials for me so it is displaying the credential we've just created now let me pause here for a second and uh ask you folks if this is working out for you um were you able to create a credential successfully and can you see your credentials being displayed or rather say something if it's not the case yes i have a yes love it good yes that sounds good thumbs up awesome don't be shy if you're stuck works good woohoo it works yeah nothing i'm just as happy as you are cool uh cool good good so um it's looking pretty good at least for those of you who posted on the chats do you wanna it works for me as well so we're good uh maybe it's time to show the doctors yeah maybe it's time to show the dessert so um that sounds good um i'll try and show uh you how it works with the devtools option um so the first thing i need to do actually i was um i probably should have ah web authentic so i already have this tab here um and if you don't have it go to more options yeah let me find more tools and then above all that thank you so um three dots at the top exactly the three dots thank you so if you don't see that whoops i think the other three dots at the top right oh yeah okay ah cool so here thank you uh more tools and here you have web button whoops more tools level then and i even think if you do command shift p you can look for web uh this is the same shortcut as in as in code but so three dots more tools we're both in everybody if you're not using uh the devtools panel just uh you know bear with us for a second we just want to show how it works for those of you who are those of you who are using uh devtools so you know sip your water and uh and just hold on for a second um i'm gonna enable the virtual authenticator environments uh and i'm gonna add a new authenticator this is a little bit like if i was buying a new security key right so i'm gonna do that right then uh no credentials were created so what i'm gonna do is um click the button again and see how it goes when i create a credential yeah so you can see something happened here um devtools knows that oh you have this virtual authenticator uh giorgio yes um good to know that you have to reload if anybody's encountering an error you can reload uh so here you can see that this was actually this is also successful with devtools you can see here your credential pop-up and hopefully it also shows up here um another thing is that we're not showing the code for that but it's kind of convenient you want your users this is the best practice for ux ui you want your users to be able to remove the credentials they've created because you know maybe they've lost their security key or just you know they're using another one so uh i won't go the show i want you to code for that uh but um you can check it out in the in the calendar you can i'm going to go and remove that just to start on a clean state um [Music] cool another interesting thing i'll show so that was for devtools devtools parenthesis is closed i think we've showed the basics great so we cannot have issues now's the time to speak yeah exactly as always um and now what we're gonna do i'm gonna keep on with my security key now so i'm gonna add a credential again uh great something interesting will happen i'm just going to show you briefly what happens try it out also what happens if you try adding a credential again um it's going to throw you an error it's going to hey the user attempted to register an authenticator that contains one of the credentials already registered if you remember in the previous step we had this thing called exclude credentials so this behavior actually is intentional for us we don't want users to be able to register two credentials for the same authenticator so this is work as intended obviously like in real application you would you know deal with errors in a nicer way because this is oh you cannot see the oh interesting so you cannot see the browser pop-ups right hmm uh okay so i will describe to you what i see um i can see like a native browser window pop-up and telling me that there was an error um you cannot see it on screen here apparently right now um but if you try it out on your side you should see something similar um great all right let's move on so what do we have now okay we have been able to um create a credential um what we will do now uh is you know what we're displaying right now is the credential id which honestly uh is ugly right and it's also not human readable like you know it's difficult for people to read something like that so uh what we would like to do instead is enable people to give credentials names which are you know things humans are better at as long strings so what we will do next is um go to accounts.html and uh this is step seven you're going to go to line 115 and you can uncomment all of the goods uh between 115 and 137. nothing but brinking um you know we're just checking that the name is right the only interesting piece here because like this is good you probably already know how to write the interesting here uh uh thing here is uh i will show you you in the ass js is that by default the web author and api doesn't support naming credentials so this is something you will have to um set up yourself so you're just gonna have to add in your backend server just a new field for uh you know name uh not username but say uh check yeah probably that's so this is upon credential creation um we're you know making it an empty name which is why you can only see a name here but the bottom line is like this is not included in in the credential and this is not part of the native api you know you will have to um this is the best practice for your users to actually enable them to name credentials and um also to rename them so uh you know today in this workshop we will not show that uh but make sure that you know you also enable people to rename their credentials if they made a typo or whatever so um where are we we were here um we were on step seven where we just uncommented the um rename function so i'm going to go back to account.html and then um we need to actually use that function because we're not using it right now so what you can do is copy the code that is between lines 99 and 102 so you are going to copy that and you will replace what is on line 787 by that new code which does the same but it also calls a rename upon successful registration so you just first create a credential and then rename it download rules you could also ask for a name before credential creation um or you know just rename it after the credential connection has been successful um the web authent spec is not you know doesn't say anything doesn't give specific directions about that you can do one of the other they propose both um so right so we have now rename function and we are enabling the user to actually rename the credential they just created so let's see how that behaves um i'm going to remove that credential just to show you what happens when i create a new one feel free to do the same and add a new credential again apparently you cannot see um my uh like the native browser window pop up on my screen what i see right now is a browser window asking me to name this credential hopefully you should be able to see that the same so give it whatever name called like small security key for example or whatever so i'm going to give it a name and as you can see i now have a name credentialed um code wise this is nothing like ranking but it's just to show you that it's a good idea to enable users to name credentials and then it's kind of up to you whether you want to display the credential id or not if you do it may be a good idea to ellipse uh you know basically move away uh the middle contents uh because like it's just a long string and it's still recognizable if you dot dot dot instead of this long string um but it's important just to have a name let me briefly pause here um [Music] and ask if anybody has a question or is stuck uh were you folks able to you know register credentials and rename them name them document uh augustine um make sure please that you are going through these steps in a new tab not within glitch um because the error you just pasted i saw it when i was trying to make the registration happen within um within glitch so uh don't use uh don't use uh you know what is it called yeah don't don't like uh don't do your user interaction in this in in this part just really like open it in a new window and if you do that hopefully this error should go away uh stefano yeah it works great so augustine please try this out and let us know if it worked uh chris interesting just an observation that the idea is infinitely shorter for the usb key than a phone um good um good observation i i didn't have any man actually for today so this is good to know thank you for sharing um definitely something to keep in mind for the ui too actually right yeah yeah um cool so we see yeses right um we'll keep an eye on the chat i'm sure it works for all yeah did it work for you it worked for me so far okay uh cool let's continue then um we are a little short on time but all good because we're basically done with the first part the most important thing is uh you know enabling users to create credentials so um i'll try and um you know go through the next steps a little quicker um and uh now that we have uh now that now i have our credentials uh this is cool but you know if i send out as uh bob right now we don't have yet this thing where i'm actually asked for my quidditch for my second factor actually this kind of breaks all together because like the code is wired up so so that here because i have a second factor uh setup um i'm expected to enter a second factor uh and like touch my credential and uh you know given my credential um but right now we haven't done the ui wiring to actually ask the user for a second factor so this is going to be just not working so let's do it now um moving on to uh actually implementing the second factor authentication this should be much lighter than the first part so let's go ahead um you're going now to go to uh public us client.js you know our file for utility functions for authentication and you can uncomment the lines 85 to 95 this is our step nine uh here we don't have time to go too much into the details but we're like fetching options from server and the most important call here is a navigator that creation that gets when this is called the browser uh when you when you call that what will happen is that the browser will actually uh prompt again the user to touch their security key or touch the right button on their phone and uh once you do that um you know the code will get like a credential out of that and will be able to send uh this credential um to the server for verification so we've uncommented that again it's just a utility function that we're exporting so uh awesome um so right now what we need to do is uh go and actually use it so what we will do is first go to index.html so what we will do here is uh we want to make sure that when the user actually has a second factor registered they are redirected to a second factor authentication page so as you can see right now uh we are not doing that so what you can do is you can um uncomment uh the lines 105 until 111 and you will see that what this does is it checks if the authentication status is the authentication status is just an object we're keeping track of in the backend to this is like a session tracker to check where what is your authentication setup like if it's complete it means that if you only have one factor set up um your password was correct but if you have two factors set up authentication status is only complete um if the second factor also has been entered again the best thing if you're interested in that is you go and check the code later but most important thing is uh if you need a second factor what you we're gonna do is uh redirect you to the second factor um page great um and then [Music] just a moment sorry yeah okay that's that's an important one um okay we'll look at that in a minute so back to index.html um now um [Music] let's see what is what this gives us let's briefly check um so let me just uh let me just check it out so i'm bob chyla also on your site um chris i'll get your will get your question in a second first try out the code you just added so now we know that bob has a credential register so normally they should redirect me to the second factor page which it does is good but at the moment we are not actually using our second factor authentication code so if you kick that button it does nothing um which is not what we want so we will like fix this in a second but make sure that the behavior is right and that you are able to see the second factor authentication page great um quick pause here just to get to chris's question uh chris i say it's not it's not a blocking question let's let's get back to it in the end um moving on um this is actually the last step i think yes uh what we're gonna do now is um go over to second factor.html and what you will do is end comments uh all the codes that's between line 4 54 and 69 so uncomment all of that let's talk briefly about what it does uh the first interesting thing is it actually calls our utility function that we have just implemented uh in allstateclient.js you know the one that actually makes the navigator credential that get called so this is the first interesting thing and then it's going to look at the authentication status and the response and check if it's actually complete which would mean that authentication was successful um there's an important piece that we haven't really talked about but that i would love to show you now um is um look at what actually happens what happens in the back end when we do that how is verification uh taking place right how do you know that the user's credential has been is correct um so that's how they can briefly get that um i think if we look at yes that's where we were already so if you look at in off.js or you can just look at my screen if it's easier because we don't uh we're not going to edit any code here the most important call here is that is this verification call so here we're relying on our 502 server implementation which is our library and we're calling this function that in the um for that library they call verify assertion response and this is really just like credential correctness a credential validity verification so um you give a number of parameters in one is the credential of course um uh there's also a challenge aspect um that i don't really have time to explain but you can think of it as a the challenge it's useful to protect from a credential theft in the in the sense that you always want to check just in time that the person the credential you just received was actually sent to you from a person who actually um owns the private key and has been basically signing this challenge on the fly at the moment in time when you requested it this is a little quick all that in the documentation uh so if you're if you're curious about that uh you can meet up um you also have a bunch of other things like the expected origin as we mentioned credentials are scoped to specific origins so this is going to be checked um and more but this is the important bit right so this is what happens under the hood so if we're going back to second factor this was step 11 which is actually our last step uh so now hopefully our second factor page actually does something and upon uh upon um user uh navigation to this page will actually be able to prompt the user for their credential so let me reload that page do it also from your site try it out so login as the same user as before the one that has a credential uh click next um and here um we have this button uh where you know you're going to have to tap it to use a security key um oh yeah it's using their tools sorry let me disable the virtual authenticator environment just a moment um i'm going to create a new credential just because i had both dev tools and the security key and this messed up things a little bit so let me try again uh this is still bob i'm going to enter my password i'll be prompted so i'm going to tap this button and i'm going to pick security i just touched it and uh now i was able to successfully log in hopefully you should see the same thing going on for you yes so um chris your question with mood okay notice uh yes can everybody was everybody able to go through these steps yes great it works it works yep awesome um a request is already depending mootoo i have not seen that error before i would try you know just like hardly loading the page and like signing out and trying to signing again i'm not sure what this is about okay sounds good cool um working out for everybody anybody stuck it works for my side good works on my machine right okay cool uh it's good because we're actually coming close the end of our workshop if i'm not wrong about five more minutes five more minutes cool so hot reloads work always does right good so um we are actually done with the very basics of weber then uh so this is good congrats yeah yeah congrats everybody uh well done um let's take a few moments to to wrap up um there's your changes uh giorgio time now always not allowed uh unfortunately we don't have time right now to ah good at the first test but i understand georgia work for you at the second yes okay awesome so um of course we didn't have time for uh you know the extra things good to know thanks georgio um so let's wrap up we have a few more minutes so let's let's wrap up uh great thank you good to hear um if you want to learn more about that this was really just a very basic so if you want to learn more about that please follow like pronoun dev or or me on twitter because we'll be soon posting a first written and more advanced tutorial version of this codelab um soon means you know in the next weeks at some points so it will contain you know more detailed explanation about for example the credential creation options and like all of this other stuff and um this workshop is recorded so we'll also be posting the recording but for you it would be more like a repeat so maybe less interesting um [Music] if you have a question about weber then um [Music] ask it on discord we have a discord channel that is specifically for chrome developer summit um we'll be posting the link uh on the chat you mind posting the link uh yes of course uh i have it right here awesome and i'm there to answer any questions yeah we did signs in there uh we're in there so please ask your website questions uh thank you unisa awesome so join us on discord we have a dedicated channel for security and privacy so join us there and uh yeah thanks so much everybody for joining it was it was really cool to see everybody logging in from different parts of the world yes it was a very fun workshop yeah yeah thank you thanks everybody uh stick around for cds it's always good to see you and uh and yeah we're in dutch and we'll see you around everybody thank you bye see you bye [Music] you