Skip to main content

Firebase Integration for the Admin Panel

Use this guide when the downloaded package includes a React and Node.js admin panel that manages Firebase data for the mobile app.

Quick Answer​

Create or choose your Firebase project, generate a Firebase service account for the server, store that JSON file outside public client code, update the server Firebase Admin SDK config, update the client Firebase web config, then run the admin panel and verify it reads your own Firebase data.

1. Generate a Service Account​

In Firebase Console:

  1. open your Firebase project;
  2. go to Project Settings > Service accounts;
  3. click Generate new private key;
  4. download the JSON file.

Treat this JSON file as a backend secret. Do not commit it to Git and do not place it in the React client folder.

2. Configure the Server​

In the admin panel server folder, locate the Firebase Admin SDK configuration. Common paths include:

db/firebaseDB/
db/instamobileDB/
api/

Search if the exact file differs:

rg "serviceAccount|firebase-admin|databaseURL|storageBucket" .

Replace the demo service account reference with your service account file or environment-based credential loading.

Example:

const serviceAccount = require('./serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  storageBucket: 'your-project-id.appspot.com',
});

For production deployments, prefer secret storage or environment variables over checking a JSON key into the project.

3. Configure the Client​

If the admin panel client uses Firebase web SDK, create a web app inside the same Firebase project and copy its config.

Common client config path:

client/src/admin/firebase.js

Example:

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-project-id.firebaseapp.com',
  projectId: 'your-project-id',
  storageBucket: 'your-project-id.appspot.com',
  messagingSenderId: 'your-sender-id',
  appId: 'your-app-id',
};

Firebase client config is public app configuration. The service account JSON is private backend configuration.

4. Run and Verify​

Install dependencies and start the admin panel according to its README. A common setup is:

corepack yarn install --immutable
cd client
corepack yarn install --immutable
cd ..
corepack yarn start

Verify:

  • server starts without Firebase credential errors;
  • client opens in the browser;
  • admin login works;
  • Firestore data shown in the panel belongs to your Firebase project;
  • uploads write to your Storage bucket if the panel supports uploads.

Security Checklist​

  • Service account JSON is not committed to Git.
  • Production server uses secret storage or environment variables.
  • Firebase rules still protect mobile client access.
  • Admin routes require authentication.
  • Admin users are explicitly authorized.
  • Storage bucket URL belongs to your Firebase project.

Troubleshooting​

ProblemFix
Server cannot load service accountCheck file path or environment variable configuration.
Permission denied from Admin SDKConfirm the service account belongs to the Firebase project.
Client shows demo dataReplace the client Firebase config and restart the client.
Uploads failCheck Storage bucket, service account permissions, and Storage rules.
Admin panel exposes too much dataAdd route-level authorization and Firebase role checks.

Next Steps​