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 firebase@9.0.0-beta.5
npm install --save firebase@9.0.0-beta.5

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