Vue + Firestore Build A Simple CRUD App with Authentication
Tags: beginners, javascript, webdev, programming
Published: 2021-11-15 14:56:39

In this Firestore CRUD Vue.js tutorial, I will be guiding you on how to build a real-world To-Do web app with Firebase Authentication.

This is the second part of the Firestore CRUD Vue.js tutorial.

Part #1: [Firebase Authentication for Vue.js](https://softauthor.com/firebaseui-vue-facebook-google-auth/)

Part #2: [Build A Secure To-Do App with Vue.js + Firestore (you’re here)](https://softauthor.com/vue-firestore-crud-app-authentication/)

###What are we building?

![Alt text of image](https://softauthor.com/wp-content/uploads/2019/07/Firestore-crud-vuejs-todo-authentication.gif)

Let’s get started 🚀

- [Create a Component and Route for To-Do View](https://softauthor.com/vue-firestore-crud-app-authentication/#create-a-todo-component-route-vuejs)
- [Structure Firestore Data for To-Do App](https://softauthor.com/vue-firestore-crud-app-authentication/#structure-firestore-data-for-todo-app)
- [Add User-Specific Data to Cloud Firestore](https://softauthor.com/vue-firestore-crud-app-authentication/#add-user-specific-data-to-firestore)
- [Get User-Specific Data with Cloud Firestore](https://softauthor.com/vue-firestore-crud-app-authentication/#get-user-specific-data-firestore)
- [Update User Data in the Firestore Database](https://softauthor.com/vue-firestore-crud-app-authentication/#update-user-specific-data-firestore)
- [Delete Data from Cloud Firestore](https://softauthor.com/vue-firestore-crud-app-authentication/#delete-user-specific-data-firestore)
- [Secure To-Do App Using Firestore Rules](https://softauthor.com/vue-firestore-crud-app-authentication/#secure-app-using-firestore-rules)

If you already have the vue.js project running and added Firebase to your project from the [Firebase Authentication for Vue.js](https://softauthor.com/firebaseui-vue-facebook-google-auth/) tutorial, skip to [Create a Component and Route for To-Do View](https://softauthor.com/vue-firestore-crud-app-authentication/#create-a-todo-component-route-vuejs).

###Up and Running Vue.js Starter Project

Go ahead and [download](https://github.com/softauthor/firestore-crud-app-for-vue/tree/master/start) the starter vue.js project.

CD to the project on your **Terminal**, and run the following command:

```JavaScript
npm install
```

Once the dependencies installation is complete, go ahead and launch the app by going to the provided localhost URL.

If everything is good, you should have an app running like this:

![Alt text of image](https://softauthor.com/wp-content/uploads/2019/07/firestore-crud-app-start-vue.png)

###Configure Firebase to the Vue.js Project

{% youtube NpDlC2-Zo0U %}

Once the vue project is up and running, the next step will be to add Firebase to your project by going to main.js and replace config code from your Firebase project.

```JavaScript
const firebaseConfig = {
  apiKey: "****************************",
  authDomain: "****************************",
  databaseURL: "****************************",
  projectId: "****************************",
  storageBucket: "****************************",
  messagingSenderId: "****************************",
  appId: "****************************"
};
```

If OAuth login buttons such as Facebook and Google do not work, you will have to configure them which are covered in the [Firebase Authentication for Vue.js](https://softauthor.com/firebaseui-vue-facebook-google-auth/) tutorial.

###Create A Todo Component and Route

In your vue.js project, go to the **src** → **components** → create **Todos.vue** file.

Then, add the scaffold code.

```HTML
<template>
</template>

<script>
export default {
}
</script>

<style>
</style>
﻿
```

Once it’s done, switch to **router** folder → **index.js** file and import the component at the top.

```JavaScript
import Todos from '@/components/Todos'
```

Then, add a new object for todo inside the router array.

```JavaScript
{
    path: '/todo',
    name: 'Todos',
    component: Todos,
    meta: {
        auth: true
    }
}
```

Set **auth:true** flag in this todo route object, which will make sure only authenticated users have access to the todo page component.

Switch back to **ToDo.vue** file and add HTML code for navigation and heading inside between the starting and ending **template** tags.

```HTML
<section>
    <navigation></navigation>
    <h5 class="center-align">To-Dos</h5>
</section>
```

>*I am using Materialize CSS Framework in this project in case you are wondering.*

Moving on to the script section.

At the top, a **<navigation>** component is added.

```HTML
<script> 
import navigation from "@/components/NavBar.vue"; 
export default { 
  components: { navigation }
}; 
</script>
```

Then, import **NavBar.vue** and add it inside the components object.

It would be nice to have a navigation item at the top of the todos page. Hop over to **NavBar.vue** and add the following code inside the ul element.

```HTML
<li v-show="user">
  <router-link to="/todo">To Do</router-link>
</li>
```

[Continue Reading...](https://softauthor.com/vue-firestore-crud-app-authentication/#create-a-todo-component-route-vuejs)