Building our Authentication component

Now that we styled our application a little just so we don’t stare at a white screen, we’ll build our Authentication component.

Create a file named index.js inside your Authentication folder:

Lets start by importing what we’ll need and declare a constant that holds the path to our API

import Axios from 'axios'

import router from '@/router' const BudgetManagerAPI = ` http://${window.location.hostname}:3001`

And now lets write our Authentication object that will contain some methods for us

export default {

user: { authenticated: false }

}

We start by declaring an object named user which holds whether our user is authenticated or not.

Now lets write our methods:

This first method holds three arguments:

context : This will be our Vue component

: This will be our Vue component credentials : This will be the username and password

: This will be the username and password redirect: The path we’ll want to redirect the user to

We use Axios to perform a POST request on our API passing the credentials argument, then we destructure our data response because we only need our token value, storing it as a cookie and setting the expir to one day. Our component’s validLogin data to true and our user’s object authenticated value to true, and finally redirect our user to our redirect argument.

Else, we set our component’s snackbar data to true and message to our error message.

Our second method is very similar to our first one, we use this to create a new account, the only difference is the endpoint we are accessing.

Our third method is used to check whether the user is authenticated or not.

And our last method is to return the Authorization header.

Now lets build our Vue component, open your Authentication.vue component:

We’ll be using Vuetify’s components for this one:

We have a div with the class l-auth-container that will act as a container.

Right after we have a div with the class l-auth . which contain our login structure, inside of it there’s a v-form that’s binded to our validLogin data.

Inside of it there are a couple of v-text-field which are labeled inputs, they are binded to our credentials data which will assign in a couple of minutes, both have prepended icons (which are from https://material.io/icons/) and rules (they both use the same rule, we don’t want to make it too fancy) for validation, they are also both required fields.

Our second input is for our password, it has an appended icon which will indicate whether the user can see the password being typed or not.

This appended icon has a callback, which is an arrow function that toggles the value of our loginPasswordVisible data to true/false, if it’s true, the input type is text else it’s password

And at last we have our buttons which we use to create a new account or submit our form.

The next structure is for our sign up form, that will be only visible when signUpVisible data is true.

It has a similar structure to our login one, only changing a few lines such as signUpPasswordVisible instead of loginPasswordVisible and the method we use on button click.

After these structure we have a v-snackbar which we’ll use to render our authentication messages.

Now lets define our component’s script:

We start by importing our index.js file from our Authentication folder because we’ll use our authenticate method defined inside of it.

Lets have a look to our component’s data:

snackbar : Used to display our snackbar

: Used to display our snackbar validLogin : Used to validate our login form

: Used to validate our login form validSignUp : Used to validate our sign up form

: Used to validate our sign up form signUpVisible : Used to render our sign up form if true

: Used to render our sign up form if true loginPasswordVisible : Indicate whether the user can see his typed password in the login form

: Indicate whether the user can see his typed password in the login form signUpPasswordVisible : Indicate whether the user can see his typed

password in the sign up form

: Indicate whether the user can see his typed password in the sign up form rules : Rules for our inputs validation

: Rules for our inputs validation credentials : Object binded to our login inputs for our authentication

: Object binded to our login inputs for our authentication newUser : Object binded to our sign up inputs for signing up

: Object binded to our sign up inputs for signing up message: Used to render our authentication messages

And we have a couple of methods in this component: submitAuthentication in which we call our authenticate method from our Authentication file, passing the context, credentials and path to redirection.

And submitSignUp in which we call our signup method.

And finally, let’s style it a little (feel free to style it as you want):



<a href="http://twitter.com/import" class="ck gi gj gk gl gm" rel="noopener nofollow">@import</a> "./../../../assets/styles"; .l-auth {

background-color: $background-color;

padding: 15px;

margin: 45px auto;

min-width: 272px;

max-width: 320px;

animation: bounceIn 1s forwards ease;

} .l-signup {

background-color: $background-color;

padding: 15px;

margin: 45px auto;

min-width: 272px;

max-width: 320px;

animation: slideInFromLeft 1s forwards ease;

}

</style>