Firebase
Configure Firebase web app and analytics env variables
Variables
| Variable | Required | Source Field |
|---|---|---|
NEXT_PUBLIC_FIREBASE_API_KEY | Yes | apiKey |
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN | Yes | authDomain |
NEXT_PUBLIC_FIREBASE_PROJECT_ID | Yes | projectId |
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET | Yes | storageBucket |
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID | Yes | messagingSenderId |
NEXT_PUBLIC_FIREBASE_APP_ID | Yes | appId |
NEXT_PUBLIC_GA_ID | Yes | measurementId |
Setup Steps
- Create/select project in https://console.firebase.google.com/.
- In project dashboard, click
Add app. - Select
Webplatform. - Enter app name.
- Skip/disable Firebase Hosting if not needed.
- Click create/register app.
- Copy the generated
firebaseConfigobject. - You can also find the same values in
Project Settings -> General. - Map each field to env variables.
Mapping Example
const firebaseConfig = {
apiKey: "...",
authDomain: "<id>.firebaseapp.com",
projectId: "<id>",
storageBucket: "<id>.firebasestorage.app",
messagingSenderId: "123456789",
appId: "1:123456789:web:abcdef",
measurementId: "G-XXXXXXXXXX",
};NEXT_PUBLIC_FIREBASE_API_KEY="..."
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="<id>.firebaseapp.com"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="<id>"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="<id>.firebasestorage.app"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="123456789"
NEXT_PUBLIC_FIREBASE_APP_ID="1:123456789:web:abcdef"
NEXT_PUBLIC_GA_ID="G-XXXXXXXXXX"NEXT_PUBLIC_GA_ID maps to Firebase measurementId.
Screenshots


Related
For Firebase Storage bucket setup and provider switching, see Storage Configuration.