Building Simple CRM with Vue: First Firestore Database Integration for User Data Management

Check this post in my web notes!

After successfully implementing user authorization functionalities in our previous articles (including sign-up, login, and logout), the next crucial step in our Vue CRM development journey is to establish a Firestore Database. This database will serve as the foundation for managing essential user data such as phone numbers, email addresses, profile avatars, and more. In this comprehensive guide, we'll delve into the creation of our initial Firestore Database, fine-tune its configurations, and explore hands-on techniques for interacting with the database. Before we dive into the practical aspects, let's outline a detailed plan of our upcoming tasks:

1. Integrate Firestore Database: Register and Incorporate User Data into Our Simple CRM Project

2. Efficient User Onboarding: Creating a New User Profile After Sign-Up

3. Storing and Managing User Data in Our Vue.js CRM Application

Ready to transform your Simple CRM project? Let's dive into action as we integrate Firestore, register users, and optimize data management using Pinia in this Vue.js development journey.
Ready to transform your Simple CRM project? Let's dive into action as we integrate Firestore, register users, and optimize data management using Pinia in this Vue.js development journey.

1. Integrate Firestore Database: Register and Incorporate User Data into Our Simple CRM Project

Open a Firebase Console and in the "Build" menu choose "Firestore Database" and then "Create Database". Choose the Cloud Firestore server location and press the next button. We will start from a production mode and press the create button. Great, we created our first Firestore Database.

Let's start to work directly with the Database. We need to create the first collection "users", for that click on create a collection and add some settings: collection ID "users", document ID "auto" and define user object fields (name, email, phoneNumber..), it will be possible to update those fields later.

Awesome! We have our users collection ready to use:

Now we need to import Firestore into our project. Open a firebase.js file in the firebase folder and import the getFirestore method, then let's export the Firestore as a result of calling the getFirestore method with our app as a parameter.

import { getFirestore } from 'firebase/firestore';
export const firestore = getFirestore(app);

Great, we can use our firestore database where ever we need.

2. Efficient User Onboarding: Creating a New User Profile After Sign-Up

Every time a new user is registered we need to sign up with the Firebase authentication module, receive the user's data from auth currentUser, then create a new user and send a new user as a document into our "users" collection. We had done part of this way previously, so now we need to modify our Sgn-Up process.

Open our auth store and import firestore, setDoc, and doc methods from Firebase.

import { auth, firestore } from '../firebase/firebase';
import { doc, setDoc } from "firebase/firestore";

Then inside aSignUp action, we will update user data after the new user was signed up and then send our new user into the "users" collection.

async aSignUp(form) {
    try {
        await createUserWithEmailAndPassword(auth, form.email, form.password)
            .then(async (userCredential) => {
                this.user = {
                     name: form.name,
                     email: form.email,
                     uid: userCredential.user.uid,
                     phoneNumber: form.phoneNumber
                };
                await setDoc(doc(firestore, "users", this.user.uid), this.user);
            });
    } catch (error) {
         const errorCode = error.code;
         const errorMessage = error.message;
         console.log(errorCode,errorMessage);
    }
},

doc method will create a new Firestore document with the same ID as our user was registered in the Firebase Authentication module, setDoc will send the user data object to the Firestore Database with previously added settings by doc.

Now we will modify our handleSubmit function so that after the user registers our CRM app will redirect the user to the Dashboard page.

const submit = handleSubmit(async (values) => {
    await authStore.aSignUp({
        email: values.email, 
        password: values.password, 
        name: values.name, 
        phoneNumber: values.phone});
    if (authStore.user.uid) router.push('/');
  })

I guess enough for one post but we have one last part...

3. Storing and Managing User Data in Our Vue.js CRM Application

Yes, we already store our user in the auth module after registration, and I'm offering to add a similar part to log in so that after login we would get user data from Firestore and save it in the user state.

For this purpose, we need to import the getDoc method from Firestore.

import { doc, setDoc, getDoc } from "firebase/firestore";

Inside the aSignIn action, after the user is Logged in to the Firebase Authentication module, we will use userCredentials to get the user id and with that id, we will get a correct document from the "users" collection.
As before, we will create a document ref with the user ID and then fetch the document from Firestore.

async aSignIn(form) {
    try {
        await signInWithEmailAndPassword(auth, form.email, form.password)
            .then(async (userCredential) => {
                const docRef = doc(firestore, "users", userCredential.user.uid);
                const docSnap = await getDoc(docRef);
                this.user = docSnap.data();
            });
    } catch (error) {
         const errorCode = error.code;
         const errorMessage = error.message;
         console.log(errorCode,errorMessage);
    }
},

Our next step is to add router redirection to the login form is the user was logged in.

const submit = handleSubmit(async (values) => {
    await authStore.aSignIn({email: values.email, password: values.password});
    if (authStore.user.uid) router.push('/');
  })

Looks great, but not perfect, we will update this soon, but in the next few articles, we will talk about tables, and implement them into our Simple CRM Project.

In conclusion, our Vue CRM development has taken a significant leap forward with the successful integration of Firestore for robust user data management. We've meticulously crafted the database, seamlessly linked user sign-up and login processes, and optimized data storage using Pinia. Join us in our next phase as we delve into advanced techniques, tables, lists and data fetching to further enhance your Simple CRM project's capabilities.