Hello Vue.js Live. First of all, thanks for having me. I'm glad to be here and speaking with you all today. My name is Tyler Clark, and today I'm giving a talk titled, Vue.js Building Secure Applications. A quick little blurb about me, my name is Tyler Clark again. I'm a Staff Developer Advocate at Auth0 by Okta. I've worked in the technology space for about nine years now, mostly JavaScript, mostly front-end and back-end, but I've done a little bit of everything for small companies all the way up to enterprise-level companies. You can find me in two places, Twitter at I am Tyler W. Clark. You can also find me at egghead.io. I've got a bunch of courses on there, and I'm going to be in the conference Discord, so please find me there and ask me any follow-up questions, because I'm sure you'll have some by the end of this talk. All right, this is a lightning talk. I only have about seven minutes, so let's jump right to it. Security is just not an easy thing to talk about, especially in a time frame of seven minutes, but we're going to do our best today. I do want to talk about some of the biggest app threats today that we see a lot of these breaches that come from. I have a couple of solutions that you can add and apply to your view app and then at the very end, I'm going to give some links to take this a little bit further. Now, the three most common security threats on applications today are brute force attacks, credential stuffing, and phishing. Brute force attacks is basically just a excessive amount of trial and errors that hackers use to try to guess your password. Credential stuffing is where you've used the same identifier, email, or username and password combination on one site, that site gets breached, and then hackers take that information and try to access other applications that those users might have used with the same combination and try to gain access to that. Phishing is where you might get an e-mail that looks like it's from Amazon. You click on the link, it looks like it's an Amazon splash page. You give it your username and password, and then it turns out it's not Amazon, and you've just given away your username and password. Look, passwords suck, everyone hates them. That's why things like 1Password and these password managers are so popular because it's a one-stop shop and automatically fills in, but it sucks that we still have to have that today. What are our options today as developers in our Vue applications? There are three that I want to talk about here, but in today I'm going to show the code for just this top one, WebAuthn, which uses biometrics like your fingerprint or your iris to sign into an application. Or there's another common word, you can send an e-mail or a text message that has a one-time password that users could then take and then enter into your login screen, that automatically logs users in. Both of these automatically log users in without the need of a password, so there's no potential of it being breached there. What is WebAuthn? WebAuthn is slang for the Web Authentication API. It's built into platforms like the browser. Authenticating with WebAuthn based biometrics is the equivalent to MFA. It basically means that when you authenticate once, as you can see in the side here, no further multi-factor authentication is needed. You'll see multi-factor authentication means that somebody uses a password and login, and then after that, they also need to provide a text and a code to enter into. It requires multiple factors to get in, but if you use WebAuthn, that counts for both. WebAuthn based passwordless authentication is unphishable, which I talked about in that other slide. Now, I said it's built into platforms like Chrome, so it's not required to use some type of identity solution company like Auth0, to be able to use this in your app today. It's built into Chrome, it's using the navigator object. As you can see here, use this credentials.create function, passing in some code, which I'm going to show you here in a moment. You might be thinking, what is the support on this? Like you use Safari, you have users on Edge or Internet Explorer. Here is a quick little glance on the browser support for WebAuthn. All right, let's jump right into the code here as I'm running out of time. Let's say that we've got two buttons here. We've got a register and a login button that we're using in our component. It's got a register and login function. First up, let's talk about the register function. Right off the bat, you'll see that we're getting a challenge from a server request here. This is a server request that we own. A challenge is basically just a randomly generated bytes. It's used to prevent replay attacks. This right here, this await navigator, is what I just talked about. This is built into the browser, it's off the window object. This is the navigator object that provides this credentials.create. You'll see inside of here, we're passing an object, and there is an RP here. Basically, it means responsible party. This is the one that's responsible for registering and authenticating this particular user that's trying to create an account. Given that user, this user object is going to be the information about the user that's currently registering. You'll see that there's a name, there's an ID, and there's a display name. The last required piece in this object is pubkey cred params. Inside of this, you're going to see it's an array of objects that describes what public key types are acceptable to the server. Then inside of that, you'll see a type public key, and there's an ALG negative seven. That number there defines what type of algorithm signature algorithm that's going to be used to create this. Then after that, we post to that same route, but this is a post providing the response back from this credential. Now, after a user has completed registering for their account, they've left, they've come back, they're ready to log in and re-authenticate. During this authentication, the user needs to prove that they own the private key that they registered with initially. They're going to do so by providing an assertion. This is generated by doing this.credentials.git on the navigator object. This is going to retrieve the credential generated during the registration with a signature included. This challenge here is very similar to the registration. It comes from a server. It is generated on the server. It's a bunch of random bytes. Then the last thing in here is this array for allow credentials. This basically tells the browser which credentials the server would like the user to authenticate with. The credential ID retrieved and saved during registration is passed in here. With this information, we then post to a route that we owned with this and companion with the browser's response. Now, I know I just said a lot and a lot of that code might have just went right over your head, but really what I want you to take away from this is in a password-based registration flow or login flow that we have today, passwords are sent through the web to a server and stored in that applications database. But with WebAuthn, with the help of a platform like a browser, we create a private and public key pair. This contains identifiers for the user organization. There's no passwords involved and there's no passwords being stored. Please check out some of these links here to learn more about how private and public key pairs work, why there's more secure and why they've been around for so long. That link to browser support to see if your browser is on there. There is an Auth0 view SDK that you can check out as well. This will help you get WebAuthn installed quickly and utilize a lot of other different factors. If you want to go more in-depth on WebAuthn and see some of the code that you can use in your app today, check out that link as well. Thank you very much. You.