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

Rate this content
9 min
15 May, 2023

Video Summary and Transcription

Hello Vue.js live. My name is Tyler Clark and today I'm giving a talk titled, Vue.js – Building secure applications. I'll be discussing the biggest app threats today, including brute force attacks, credential stuffing, and phishing. I'll also present solutions like WebAuthn for passwordless authentication using biometrics. As you can see here, use the credentials.create function to get a challenge from a server request. Then, pass the necessary information about the user and the acceptable public key types to the server. WebAuthn eliminates password-based flows, creating a secure private and public key pair.

Available in Español

1. Introduction to Vue.js and App Security

Short description:

Hello Vue.js live. My name is Tyler Clark and today I'm giving a talk titled, Vue.js – Building secure applications. I'm a staff developer advocate at Auth0 by Okta with nine years of experience in the technology space. I'll be discussing the biggest app threats today, including brute force attacks, credential stuffing, and phishing. I'll also present solutions like WebAuthn for passwordless authentication using biometrics.

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, 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.

2. WebAuthn Registration and Authentication

Short description:

As you can see here, use the credentials.create function to get a challenge from a server request. Then, pass the necessary information about the user and the acceptable public key types to the server. After the user completes the registration, they can log in and reauthenticate by providing an assertion generated by the navigator object's .credentials.get method.

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.

3. WebAuthn Challenge and Key Pairs

Short description:

This challenge is similar to the registration, generated on the server. The 'allow credentials' array tells the browser which credentials to authenticate with. WebAuthn eliminates password-based flows, creating a secure private and public key pair. Check the links for more information on key pairs, browser support, and the Auth0 view SDK.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.