DEV Community

loading...
Cover image for Getting started with Firebase web v9 API

Getting started with Firebase web v9 API

Tham
Personal Mastery Coach | Lean Growth Strategist | API Evangelist | Chief Hustler @WorkRituals
・2 min read

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>
Enter fullscreen mode Exit fullscreen mode
cd <project_name>
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Firebase web v9 API configuration

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

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 };
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)