Connecting a Web App

Connecting a Web App to Firebase

Once your Firebase project is set up, you need to register your web app and grab the config code. This config is basically an address card that links your frontend app to your Firebase project.

Step-by-step

1. On the Project Overview, click the web icon </>.
2. Enter an app nickname, e.g. notes-web
3. Check the box if you plan to use Firebase Hosting.
4. Click Register app and grab the config.
5. For a modern JavaScript project, add the SDK with npm install firebase.

Code Example — Firebase app initialize

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT.appspot.com',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

const app = initializeApp(firebaseConfig);

export default app;

What does this code do?

initializeApp initializes your Firebase project config inside the app. Later on, when you use Auth, Firestore, or Storage, those services connect through this initialized app.

Watch out for this

It's normal for the config to be visible in the browser. What actually protects your database/file access is your Security Rules. Just don't upload sensitive server keys or service account JSON to a public GitHub repo.