Getting started with Firebase web v9 API

As I wrote in my previous article, I have started exploring Firebase web v9 APIs. I am going to explain how easy to get started with Firebase web v9 API ( beta ) and setup your project. This article covers the following to kick start your next experiment with Firebase APIs.

• Create a project scaffold
• Create Firebase project
• Setting up Firebase tools
• Firebase web v9 API configuration
• Application configuration ### Create a project scaffold I used Vite scaffolding tool to create my project skeleton. Just fill the questions and you will be able to get one for you. In my case, I created a project with Vue.js framework.

npm init @vitejs/app <project_name>

cd <project_name>
npm install
npm run dev

By now, you should be able to see the sample project up and running on port 3000

Create Firebase project

Now you need to create a Firebase project. For that you need to go 'https://console.firebase.google.com/' and create your project. This requires a Google account if not create one for you :)
Just follow the instruction once you reach the firebase console and fill the required details about the project name and other details.

Setting up Firebase tools

Now we are going to install the required firebase tools to manage the project from our system. Execute the following commands from your project directory which was created in the first step

npm install -g firebase-tools
firebase login //to access your firebase project created from the previous step

Firebase web v9 API configuration

npm install --save firebase@9.0.0-beta.7 //Latest beta when I write this

Application configuration

Now you are ready to use the Firebase web v9 API in your application. Create a Javascript file under src directory to hold your Firebase project configurations.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

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

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

export { auth };

NOTE: Replace the above details with your project specific configuration. You grab the details from your Firebase console.
Everything is now completed and you can import the auth variable in your project and use it.