Skip to content

Add Firebase to your web app

Register your web app

Open the Project Overview page in your Firebase project and launch the setup workflow via the web icon ().

Add Web app to Firebase project

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

Next, enter a nickname for your app and click Register app.

Register Web app in Firebase project (Register app)

After that, you will be presented with the Firebase configuration for your app.

Register Web app in Firebase project (Add Firebase SDK)

Copy the configuration into the files src/environments/environment.ts and src/environments/environment.prod.ts:

src/environments/environment.ts
export const environment = {
    firebase: {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_AUTH_DOMAIN",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_STORAGE_BUCKET",
        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
        appId: "YOUR_APP_ID",
        vapidKey: "YOUR_VAPID_KEY"
    }
};

Cloud Messaging

Configure web credentials

Open the Cloud Messaging tab in your Firebase project, scroll to the Web configuration section and click Generate key pair.

Configure web credentials

Copy the generated key into the files src/environments/environment.ts and src/environments/environment.prod.ts:

src/environments/environment.ts
export const environment = {
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    vapidKey: "YOUR_VAPID_KEY"
  },
};