Tham XYZ


Tham XYZ


Getting started with Firebase web v9 API

Tham's photo
·Jul 24, 2021·

2 min read

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.

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 '' 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.

Did you find this article valuable?

Support Tham by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this