Auth0 and Vue: A Match Made in Heaven for Secure App Development

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 kind of 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 Edcad.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 kind of 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, well, just not an easy thing to talk about, especially in a timeframe 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 solutions that you can add and apply through a Vue 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 an 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 combinations and try to get access to that. And phishing is where you might get an email 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 it turns out it's not Amazon and you've just given away your username and password.

So 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, it automatically fills in, but it sucks that we still have to have that today. So what are our options today as developers in our Vue applications? So there are three that I want to talk about here, but today I'm going to share the code 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 email 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.

So 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. So it basically means that when you authenticate once, as you can see in the slide here, no further multi-factor authentication is needed. So you'll see multi-factor authentication means that somebody uses a password in login and then after that they also need to provide like a text and a code to enter into. Authentication 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. And 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.

So 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. And this is the navigator object that provides this credentials.create. You'll see inside of here we're passing it an object and there is an RP here, basically means responsible party. So 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. And the last required piece in this object is pubkey cred params. So 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. And 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. And 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 reauthenticate. 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. And this is generated by doing this .credentials.git on the navigator object. This is going to retrieve the credential generated during the registration with the 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. And then the last thing here is this array for allow credentials. This basically tells the browser which credentials the server would like the user to authenticate with. So credential ID retrieved and saved during registration is passed in here. So with this information we then post to a route that we owned with this and companion with the browser's response.

All right 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 application's 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 they're 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.