Components

Comics

Let’s start with the component that users will get to see once they are successfully authenticated. I have named this file as Comics.vue and placed it inside the components folder.

The .vue file is divided into three parts: the template , script , and style . The template contains the HTML that will be rendered on the browser, script contains the JavaScript code, and the style will contain the style code. To keep this post short and to the point, I am only going to talk about the template and script . But don’t worry, I will share the final version of the code at the end of this post.

Let’s start by writing the template section as shown below:

Take a look at the first button tag. It has an attribute called v-on:click . The v-on directive is used to listen to any DOM events and run JavaScript code. Here the v-on directive will listen for a “click” on the button, then run the logout function that will be defined in the script section of the same file.

Next, we take a look that the article tag. It has the v-for directive, which like a normal for loop is used here to render a list of items. Here, we take a “comic” from a list of “comics” and renders each of them.

Another thing to note is the :key . This is important here because without it Vue will throw an error saying that each item in the list requires a unique identifier, which in this case is defined by the :key .

Then, in the form tag, we see the @submit directive. This is used to tell Vue what JavaScript code to run when the form is submitted. Here, it will run the addComic function with the name and image as arguments. These arguments are defined by the input elements inside the same form. We use the v-model to define where the user’s input is to be stored once the form is submitted.

Alot of it will not make much sense without taking a look at the script section of this file. So below the template section, write the following code:

We start by importing the Firebase library. We will also import the db const that we will define in the main.js file later on. Next, we will write all the JavaScript code for this inside a default export statement, starting with this component’s name as Comics . After that, we will write the data , and this is where we define the name and image that we used inside the input in the template section. We will also define the comics collection as an empty array.

After that, we define the firestore database. All we do is here create a collection named comics inside the Firestore database and order it by its data of creation.

We will then define the functions that we have used in the template . First one is the addComic , where we are creating a new document inside the comics collection. Each document will have three fields — name , image , and createdAt ,

If we are able to create an entry, then we should be able to delete it as well. This is achieved by the deleteComic function that takes in the id as an argument and uses it to delete a doc from the comics collection.

Finally, we have the logout function, which will use Firebase to sign out of the of the app, and redirect the user to the login page.

But we have not created the login page… yet.

Login

This is the first page where a user will be taken to when they open the app. Let’s start by creating a new file named Login.vue and write its template section as shown below:

Looks similar to previous page of Comics , the only thing new here is that we are using the router-link to takes the user to the signup page.

But there is more to this page than that. This is also where the user get authenticated and enters the app. This is done using the login method that is connected to the v-on:click method of the Enter button. Let’s define it inside the script section of this file:

Inside the Firebase, we have an auth function that takes care of everything related to authentication. Since we are using email and password to authenticate a user, we use the signInWithEmailAndPassword function and pass it the email and password provided by the user to check if the user is eligible to enter the app. If they are, then app takes us to the comics page, and if not, then we get the error.

But how does a user enter the app, if they are visiting it for the first time, and they do not have any account created. Creating of new accounts can be taken care of by a new page called signup .

Signup

Create another file named SignUp.vue and write its template section as shown below:

Nothing new here. The only thing of interest here is the v-on:click directive on the Sign Up! button. Let’s get down to the script section and write the signup method for this button.

The signUp method also uses Firebase’s auth() function to create a new user with the email and password provided by the user. If firebase is able to create this new user, the app redirects back to the login page.