First look of Firebase web API v9 + Vue composition API

I started experimenting Firebase web v9 APIs for my side hustle project along with Vue 3. I worked with Firebase earlier API set. So initializing the project and getting started with Vue didn't take much of my time.

But to the surprise, I got a fantastic experience with Firebase web v9 APIs with Vue composition APIs. I am going to explain how easy to get started with the integration.

Scenario

To continue on the API exploration, I will consider Firebase sign-up functionality with email and password.

Install Firebase web v9 API

// latest firebase module is [email protected]
npm install --save [email protected]

Firebase configuration for communication

//src/services/firebase.js
//Add your project related keys in the below configuration
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "<change>",
  authDomain: "<change>",
  projectId: "<change>",
  storageBucket: "<change>",
  messagingSenderId: "<change>",
  appId: "<change>",
  measurementId: "<change>"
};

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);

export { auth };

//src/services/UserService.js
import { auth } from './firebase';
import { createUserWithEmailAndPassword } from '@firebase/auth';

export default {
  async signupWithEmail(data) {
    console.log('UserService.signupWithEmail()');
    createUserWithEmailAndPassword(auth, data.email, data.password)
      .then((credential) => {
        const user = credential.user;
        console.log(user);
      })
      .catch((error) => {
        console.error('Error ', error.message);
      });
  }
};

Signup form in Vue

//src/components/Signup.vue
//NOTE: Ignore the css classes for now
<template>
  <section class="p-main">
    <div class="signup-wrapper">
      <div class="signup-title title">
        Sign Up
      </div>

      <form @submit.prevent>
        <div class="signup-form">
          <div class="w-full">
            <input type="text" id="email" v-model="user.email" placeholder="Enter your email">
          </div>
          <div class="w-full">
            <input type="password" id="password" v-model="user.password" placeholder="Enter your password">
          </div>
          <div class="btn-primary w-full text-center">
            <!-- <a href="" class="link-white">Signup</a> -->
            <button class="btn-primary" @click="onSignup">Signup</button>
          </div>

          <div class="px-16 mt-2 bg-gray-200"><hr></div>
          <div class="text-center">
            Already having an account?
          </div>
          <div class="text-center">
            <router-link :to="{ name: 'Signin'}">
              Sign In
            </router-link>
          </div>
        </div>
      </form>
    </div>
  </section>
</template>

<script>
import { useRouter } from "vue-router";
import UserService from '../services/UserService';
export default {
  setup() {
    const router = useRouter();

    const user = {
      email: '',
      password: ''
    };

    const onSignup = () => {
      console.log(user);
      UserService.signupWithEmail(user);
      setTimeout(() => {
        router.push({name: "Home"});
      }, 1000);
    };

    return {
      user,
      onSignup
    }
  },
}
</script>

Importance of Firebase web v9 API

The new API follows the modular SDK, that produces reduced SDK output based on your imports
Provides greater supports with Javascript build tools
Follows ES6 approach which is familiar to every Javascript developers

NOTE: Firebase web v9 APIs are still in beta stage. So there might be some breaking API changes in the future.

Originally published on https://tech.tham.xyz