🛠️ CJF Firebase Setup Guide← Back to Website

🔥 Firebase Setup Guide

← CJF Website

Connect Firebase in ~20 Minutes

Follow these steps once. After setup, your admin panel at /admin will have full login, real database, file uploads, and instant download control.

What You'll Get

After completing these steps, the CJF admin panel will be fully operational.

🔐 Secure Login

Email & password authentication. Only authorised staff can access /admin.

📰 News Management

Add, edit, publish, and draft news articles. Featured articles appear on the homepage.

📁 File Uploads

Upload PDFs directly from the admin panel. Files stored securely in Firebase Storage.

🔒 Download Control

Toggle any file public, restricted, or completely hidden — per file, instantly.

Step 1 of 5

Create a Firebase Project

Firebase is Google's free cloud platform. You need a Google/Gmail account to get started.

  1. Go to console.firebase.google.com
  2. Click "Add Project"
  3. Name it cjf-zambia → Click Continue
  4. Disable Google Analytics (not needed) → Click "Create Project"
  5. Wait ~30 seconds for the project to be created → Click Continue
✅ You now have a Firebase project. Keep this browser tab open — you'll need it for the next steps.
Step 2 of 5

Get Your Firebase Config Keys

These keys connect your website to your Firebase project.

  1. In your Firebase project, click the gear icon ⚙️ next to "Project Overview" → Project Settings
  2. Scroll down to "Your apps" section
  3. Click the </> Web icon to register a web app
  4. Name it CJF Website → click Register App
  5. You'll see a config block like this:
const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "cjf-zambia.firebaseapp.com",
  projectId: "cjf-zambia",
  storageBucket: "cjf-zambia.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123..."
};
  1. Open the file js/firebase-config.js in your website folder
  2. Replace each PASTE_YOUR_... placeholder with the matching value from Firebase
  3. Save the file
⚠️ Keep these keys private. Don't share the config file publicly on social media or email.
Step 3 of 5

Enable Firestore Database & Storage

Two Firebase services need to be activated: Firestore (for content) and Storage (for file uploads).

Firestore (database):

  1. In Firebase Console, click Firestore Database in the left sidebar
  2. Click "Create Database"
  3. Select "Start in production mode" → click Next
  4. Choose location eur3 (Europe) or nearest region → click Enable
  5. Once created, click Rules tab and replace the rules with:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Public can READ news and resources
    match /news/{doc} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    match /resources/{doc} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    match /settings/{doc} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}
  1. Click Publish

Storage (file uploads):

  1. Click Storage in the left sidebar
  2. Click "Get Started" → Production mode → click Done
  3. Click Rules tab and replace with:
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /resources/{file} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}
  1. Click Publish
✅ Your database and file storage are now active and secured.
Step 4 of 5

Create Admin User Accounts

Create the email/password accounts that CJF staff will use to log in to the admin panel.

  1. In Firebase Console, click Authentication in the left sidebar
  2. Click "Get Started"
  3. Click Email/Password → toggle it Enabled → click Save
  4. Click the Users tab → click "Add User"
  5. Enter the admin's email address (e.g. admin@judiciaryzambia.com) and a strong password
  6. Click Add User
  7. Repeat for each staff member who needs access
✅ To remove access, simply delete the user from this Firebase Authentication Users list.
⚠️ Password reset: If a staff member forgets their password, go to Firebase → Authentication → Users → click the 3-dot menu next to their name → "Send password reset email".
Step 5 of 5

Redeploy to Vercel

Now that you've updated firebase-config.js with your real keys, redeploy the website so the changes go live.

  1. Open PowerShell (Windows) or Terminal (Mac)
  2. Navigate to your website folder:
cd $HOME\Downloads\cjf-deploy\cjf-website
  1. Run:
vercel --prod
  1. Wait ~30 seconds for deployment to complete
  2. Visit https://cjf-zambia.vercel.app/admin
  3. Log in with the email and password you created in Step 4
🎉 You're in! The admin panel is fully live with Firebase connected.

Day-to-Day Admin Tasks

Quick reference for the most common tasks after setup.

📰 Add a News Article

  1. Go to yoursite.vercel.app/admin → log in
  2. Click News & Events → "+ New Article"
  3. Fill in Title, Date, Category, Summary, Body
  4. Toggle Published ON → click Save Article
  5. Article appears on the website instantly ✅

📁 Upload a Downloadable File

  1. Click Resources → "+ Add Resource"
  2. Fill in Title, Category, Year, Description
  3. Drag and drop your PDF into the upload zone
  4. Toggle Downloadable ON to show the download button publicly
  5. Toggle Restricted ON to show "Request Access" instead
  6. Click Save Resource → live instantly ✅

🔒 Restrict or Hide a File

  1. Click Resources → find the file → click ✏️ Edit
  2. Toggle Downloadable OFF = hides download button
  3. Toggle Restricted ON = shows "Request Access" button
  4. Toggle Visible OFF = hides the entry completely
  5. Click Save Resource ✅

🎉 Setup Complete

Your CJF admin panel is live at yoursite.vercel.app/admin. All content is managed through Firebase — no coding, no redeployment needed for daily updates.

Open Admin Panel →