Follow this guide to use theFirebaseJavaScript SDK in your web app or as a client forend-user access, for example, in a Node.js desktop or IoT application.

Step 1: Create a Firebase project and register your app

Before you can add Firebase to your JavaScript app, you need to create aFirebase project and register your app with that project. When you register yourapp with Firebase, you'll get a Firebase configuration object that you'll use toconnect your app with your Firebase project resources.

Note: Upgrading from the version 8 Firebase SDK? Check out ourupgradeguide.

VisitUnderstand Firebase Projects to learn moreabout Firebase projects and best practices for adding apps to projects.

Create a Firebase project

New to Firebase or Cloud

Follow these steps if you're new to Firebase orGoogle Cloud.
You can also follow these steps if you want to create a wholly new Firebase project (and its underlyingGoogle Cloud project).

1. Sign into theFirebase console.
2. Click the button to create a new Firebase project.

3. In the text field, enter aproject name.

   If you're part of aGoogle Cloud org, you can optionally select which folder you create your project in.

   Your project name is used as a display name in Firebase interfaces, and Firebase auto-creates a unique project ID based on this project name. Note that you can optionally click theEdit icon now to set your preferred project ID, but you cannot change this ID after project creation. Learn abouthow Firebase uses the project ID.
4. If prompted, review and accept theFirebase terms, then clickContinue.
5. (Optional) Enable AI assistance in theFirebase console (called "Gemini in Firebase"), which can help you get started and streamline your development process.

6. (Optional) Set upGoogle Analytics for your project, which enables an optimal experience using these Firebase products:Firebase A/B Testing,Cloud Messaging,Crashlytics,In-App Messaging, andRemote Config (includingPersonalization).

   Either select an existingGoogle Analytics account or create a new account. If you create a new account, select yourAnalytics reporting location, then accept the data sharing settings andGoogle Analytics terms for your project.

   You can always set upGoogle Analytics later in theIntegrations tab of yoursettingsProject settings.
7. ClickCreate project.

Firebase creates your project, provisions some initial resources, and enables important APIs. When the process completes, you'll be taken to the overview page for your Firebase project in theFirebase console.

Existing Cloud project

Follow these steps if you want to start using Firebase with an existingGoogle Cloud project. Learn more about and troubleshoot"adding Firebase" to an existingGoogle Cloud project.

1. Sign into theFirebase console with the account that gives you access to the existingGoogle Cloud project.
2. Click the button to create a new Firebase project.
3. At the bottom of the page, clickAdd Firebase to Google Cloud project.
4. In the text field, start entering theproject name of the existing project, and then select the project from the displayed list.
5. ClickOpen project.
6. If prompted, review and accept theFirebase terms, then clickContinue.
7. (Optional) Enable AI assistance in theFirebase console (called "Gemini in Firebase"), which can help you get started and streamline your development process.

8. (Optional) Set upGoogle Analytics for your project, which enables an optimal experience using these Firebase products:Firebase A/B Testing,Cloud Messaging,Crashlytics,In-App Messaging, andRemote Config (includingPersonalization).

   Either select an existingGoogle Analytics account or create a new account. If you create a new account, select yourAnalytics reporting location, then accept the data sharing settings andGoogle Analytics terms for your project.

   You can always set upGoogle Analytics later in theIntegrations tab of yoursettingsProject settings.
9. ClickAdd Firebase.

Firebaseadds Firebase to your existing project. When the process completes, you'll be taken to the overview page for your Firebase project in theFirebase console.

Register your app

After you have a Firebase project, you can register your web app with that project.

1. In the center of theFirebase console's project overview page, click theWeb icon (plat_web) to launch the setup workflow.

   If you've already added an app to your Firebase project, clickAdd app to display the platform options.

2. Enter your app's nickname.
   This nickname is an internal, convenience identifier and is only visible to you in the Firebase console.

3. ClickRegister app.

4. Follow the on-screen instructions to add and initialize the Firebase SDK in your app.

   You can also find more detailed instructions for adding, initializing, and using the Firebase SDK in the next steps of this getting started page.

If you don't already have a JavaScript project and just want to try out aFirebase product, you can download one of ourquickstart samples.

Step 2: Install the SDK and initialize Firebase

This page describes setup instructions for the Firebase JS SDK's modular API,which uses aJavaScript Module format.

This workflow uses npm and requires module bundlers or JavaScript frameworktooling because the modular API is optimized to work withmodule bundlersto eliminate unused code (tree-shaking) and decrease SDK size.

Note: Using the modular API is strongly recommended, especially for production apps.If you need support for calling the API in other ways, likewindow.firebase,seeUpgrade from the namespaced API to the modular APIorAlternative ways to add Firebase.

1. Install Firebase using npm:

   npm install firebase

2. Initialize Firebase in your app and create a Firebase App object:

   import{initializeApp}from'firebase/app';// TODO: Replace the following with your app'sFirebase configurationconstfirebaseConfig={//...};constapp=initializeApp(firebaseConfig);

   A Firebase App is a container-like object that stores common configurationand shares authentication across Firebase services. After you initialize aFirebase App object in your code, you can add and start using Firebaseservices.

   If your app includes dynamic features based on server-side rendering (SSR),you'll need to take some additional steps to ensure that your configurationpersists across server rendering and client rendering passes. Inyour server logic, implement theFirebaseServerApp interface tooptimize your app'ssession management with service workers.

   Do you use ESM and want to use browser modules? Replace all yourimport lines to use the following pattern:
   import { } from 'https://www.gstatic.com/firebasejs/12.9.0/firebase-SERVICE.js'
   (whereSERVICE is an SDK name such asfirebase-firestore).

   Using browser modules is a quick way to get started, but we recommend using a module bundler for production.

Step 3: Access Firebase in your app

Firebase services (likeCloud Firestore,Authentication,Realtime Database,Remote Config, and more) are available to import within individualsub-packages.

The example below shows how you could use theCloud Firestore Lite SDK to retrievea list of data.

import{initializeApp}from'firebase/app';import{getFirestore,collection,getDocs}from'firebase/firestore/lite';// Follow this pattern to import other Firebase services// import { } from 'firebase/<service>';// TODO: Replace the following with your app'sFirebase configurationconstfirebaseConfig={//...};constapp=initializeApp(firebaseConfig);constdb=getFirestore(app);// Get a list of cities from your databaseasyncfunctiongetCities(db){constcitiesCol=collection(db,'cities');constcitySnapshot=awaitgetDocs(citiesCol);constcityList=citySnapshot.docs.map(doc=>doc.data());returncityList;}

Step 4: Use a module bundler (webpack/Rollup) for size reduction

Note: You can skip this step if you are using a JavaScript framework CLI toollike theAngular CLI,Next.js,Vue CLI, orCreate ReactApp. Check outour guideon module bundling for more information.

The Firebase Web SDK is designed to work with module bundlers to remove anyunused code (tree-shaking). We strongly recommend using this approach forproduction apps. Tools such as theAngular CLI,Next.js,Vue CLI, orCreateReact App automaticallyhandle module bundling for libraries installed through npm and imported intoyour codebase.

See our guideUsing module bundlers with Firebase for more information.

Available Firebase services for web

Now that you're setup to use Firebase, you can start adding and using any of thefollowing available Firebase services in your web app.

The following commands show how to import Firebase libraries installed locallywithnpm. For alternative import options, see theavailable libraries documentation.

^{1Firebase AI Logic was formerly called "Vertex AI in Firebase" with the packagefirebase/vertexai.}

Next steps

Learn about Firebase:

• Exploresample Firebase apps.

• Get hands-on experience with theFirebase Web Codelab.

• Explore theopen source code inGitHub.

• Review thesupported environments for theFirebaseJavaScript SDK.

• Speed up your development with additional Firebase-maintained open sourcelibraries, likeAngularFire,RxFire, andFirebaseUI for web.

• Prepare to launch your app:

  • Set upbudgetalertsfor your project in theGoogle Cloud console.
  • Monitor theUsage and billingdashboard in theFirebase console to get an overall picture of your project'susage across multiple Firebase services.
  • Review theFirebase launch checklist.