Who Are Vue? Authn In Vue, The Important Parts

Hello, everyone. I'm so happy to have you here at Vue.js Live this year in April. Well, I don't want to spoil you too much. So I want to start with this fact. I saw something you did in this real world some days before, and I know that you did it because you're here, you're watching my talk. To be able to do so, you need to get a ticket. Maybe it's even connected to your name. And with this ticket, with this access, you are able to join me here. So in order to join me, you need to authenticate yourself, right? And this is actually what I want to talk with you about, authentication, but only the most important part. So you can have the same learning as I had, that it's not that intimidating as it might look like.

Well, don't get me wrong. It's in a way it's good that it's intimidating, because it shows that you are taking the responsibility seriously for such a workflow, which is important and needs to be kept secure. But you don't need to be scared when it comes to implementing it into Vue, and I will show you. But before that, real quick, my name is Ramona. I'm working as a developer advocate at Auth0. But besides that, I'm a Google developer expert in web technologies, a Women Techmaker Ambassador, and a Cypress Ambassador. And unlike the last times where I talked with you about testing, this time I want to talk with you about security-related topics, especially when it comes to such a sensitive workflow as a login. It's equally important, if not more important than software quality, and it's entangled.

So yeah, let's start. So I asked you the question, who are you indirectly when it comes to being able to enter this conference? But answering the question, who are you, or who are you, actually, is something you do a lot of times when it comes to your work life, your day-to-day. But also when it comes to web development, or even in movies, it happens. Just as in this short film, which is called Who Are You?, which was directed by Julio Poz in 2019. And basically the film's about answering this question, and imagine if someone asked it, we will answer with our whole life story, which I do think that every one of us here knows that it's nothing we need to answer, right? So no matter if you are asked, who are you in real life, or if you have some cases inside of your applications where this answer needs to be given, you take a valid answer, a short answer, but a secure one, so the person asking it, or the service asking it, can be sure that you are who you are. You can be sure when it comes to the process of authentication. But let's define what authentication really is, to have a shared sense of understanding, so we know what we are talking about. The first part I did was looking it up in Oxford Dictionary, and they say that authentication is the process or action of proving or showing something to be true, genuine, or valid. If we refer that to software engineering, as Oxford does too, they say it's the process or action of verifying the identity of a user or process. Or in simpler words, given by me, we want to determine whether someone or something is who or what they say they are. And as said, I will focus on the most key aspects here. And this implies that it's not a deep dive.

I want to get you started when it comes to the topic of authentication, but I always try to refer to further resources by QR code, for example. And if you cannot screenshot it or take a picture of a QR code or scan it in time, I will share my slides later anyway. So don't be worried about that. I said I want to show you the most important parts. And this is one of those, in my cases or in my opinion.

So first things first, I want to talk about terms, because people like to mix it up, including me. So I hope I will not do this inside of this talk this time. Hopefully not. But let's be really clear on that one. Authn or authentication is the one as defined before. We want to verify who the user is and validate their identity before granting access to our features, to protected resources, whatever. And authorization of that is something different, even if they are connected.

But how can we implement such a flow in a single page application, especially as there are some differences to consider? How do we want to authenticate to the server in general? Because there are some ways, it's not only one way of authenticating, right? We need to decide on three factors which we want to use. This could be something we know like a username or password, something inside of our app. It could be something we have like a cell phone like I have here or a debit card or even a YubiKey. Something physical in most cases or something we are. Like the fingerprints we have or face ID. Those can be the points where we can authenticate, where we can prove who we are. But if we decide on those or if we think about authentication, I guess this view will come into your mind real quick, right? It's the typical login UI, having a username in it, a password in it and asking for it. So this is referring to something we know, both of those. And as it's only one factor, let's call it single factor authentication. But it doesn't need to be something we know. It can be any factor of those three mentioned before. And as it's pretty simple, let's think about a small demo, a small code example to build a simple authentication in Vue.

But if we decide on those or if we think about authentication, I guess this view will come into your mind real quick, right? It's the typical login UI, having a username in it, a password in it and asking for it. So this is referring to something we know, both of those. And as it's only one factor, let's call it single factor authentication. But it doesn't need to be something we know. It can be any factor of those three mentioned before.

And as it's pretty simple, let's think about a small demo, a small code example to build a simple authentication in Vue. Okay, this is my project setup for the simple one. It's a typical Vue 3 project with Vue Router in it. But there's some addition, we need some back end, some database basically. In my case, I will mock it by using an express server. And a little spoiler before, we will use the JSON Web Toolkit library later on as dependency.

When it comes to the structure, we will have the typical ones for the Vue projects like separate UI parts, like being a home view, a login view, a dashboard, which might be protected later on. The router GIS for the Vue Router to protect the dashboard route, for example, and define the others without protection. And last but not least, the back end mock, which creates all the users we want to validate again. You can take a look at it at StackBlitz. So there's an instance I built for you. I will pin it on lots of slides, so you don't need to scan it right now. And there's a GitHub repository too. So this is the back end mock. It's pretty simple. So I built a small standard express server, which contains a login route.

So before we will take a look at this route, I want to hard code a mock user. So in error with some user in it, since we don't have a database of a kind. Of course, you should use database, but I want to keep it simple for now. After we have this, we will define inside of the login route. We will get the user, the client sent and find out if it's in our database mock. So of course, you will replace this with your database create later on to fetch use data. But this will basically do the check if the user credentials are valid or not. And depending on those, like those find, we will see if we are authenticated and send a status code of 200 or not. So it's really simplified, I know, but it should do it for now.

And now we could take a look at our view router. Where we will define the routes and protect the dashboard by setting requires of to true in the meet header part of our definition. Setting it to true and then going to the login view where we will, I guess, first access the username or password the user entered by using the view model for it. Then we will build the request for the mock inside of a try cache because some things could go wrong sometimes. But let's get it going.

So we will build the request by posting it by using Axios. We will post it to the endpoint we built for our little backend mock. And yeah, give a header so we will set the content type to application JSON to work with it easily. And add the data with the username and password. Yes. And if the response has some data in it. So it's successful. We will set login fail to false which gives some styling and some error handling so that everything is fine. And we will be able to navigate to the dashboard resource without being blocked. We will check it off if it's really working so don't worry. Okay, if there's no data into it. We will set login fail to false. And that's it.