Patient Portal Development with React.js and Firebase

Healthcare products are expected to be secure, fast, and accessible from anywhere. Patients want real-time access to appointments, prescriptions, and medical records ? without friction.

In this article, I'll walk through how I designed and built a scalable patient portal using React.js and Firebase (Auth + Firestore + Security Rules) ? with no custom backend server.

This is a frontend-first architecture powered entirely by Firebase as a backend-as-a-service.

What We're Building

A modern patient portal that supports:

• Secure authentication (Email/Password)
• Viewing medical records
• Booking and managing appointments
• Accessing prescriptions
• Profile management
• Real-time updates

All built using React + Firebase.

Architecture Overview

The system follows a clean and scalable pattern:

User (Web App)
      ?
React SPA
      ?
Firebase Authentication
      ?
Firestore Security Rules
      ?
Cloud Firestore
      ?
Firebase Hosting (CDN)

This setup eliminates the need for a traditional backend server while maintaining production-grade security.

Also, Discover |  Telehealth App Development with Real-Time Video, AI Booking, & Chat

Architecture Breakdown

1. React.js (Frontend SPA)

React handles:

• UI rendering
• Routing (React Router)
• State management (Context / Redux)
• Firebase SDK integration

Everything runs client-side, but security is enforced server-side via Firestore rules.

2. Firebase Authentication

Firebase Auth manages:

• User registration & login
• Session handling
• Token-based authentication
• Password resets
• Email verification

There's no need to manage JWTs manually ? Firebase handles token issuance and refresh automatically.

3. Firestore Security Rules (Critical Layer)

Security rules are the real backbone of this architecture.

They ensure:

• Users can only access their own data
• Data isolation by userId
• Default deny behavior

Even if someone tampers with the frontend, they cannot bypass Firestore rules.

4. Cloud Firestore

Firestore stores:

• User profiles
• Appointments
• Medical records
• Prescriptions

Why Firestore?

• Real-time listeners (onSnapshot)
• Automatic scaling
• Offline support
• Structured collections per user
• No server maintenance

5. Firebase Hosting

• Global CDN
• Automatic SSL
• Fast deployments
• Easy CI/CD integration

Also, Check | FHIR and Blockchain | A New Age of Healthcare Data Management

Step 1: Firebase Setup

Install dependencies:

npm install firebase react-router-dom

Firebase Configuration (firebase.js)

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);

export default app;

Also, Read | Blockchain in Genomics | The Future of Healthcare is Encoded

Why Use Environment Variables?

• Separate dev / staging / production configs
• Prevent accidental credential exposure
• Cleaner deployment workflow

Step 2: Authentication Architecture

I implemented a global AuthContext that:

• Listens to onAuthStateChanged
• Stores the current user
• Exposes login / signup / logout methods
• Prevents UI render until auth state resolves

This prevents flickering protected routes and improves UX.

Protected Routes

Protected routes wrap private pages such as:

• /dashboard
• /appointments
• /profile

If no authenticated user exists ? redirect to /login.

This is UI-level protection. Firestore rules enforce real security.

Step 3: Database Structure

Firestore is structured with per-user isolation:

users/{userId}
appointments/{userId}/userAppointments/{appointmentId}
medicalRecords/{userId}/userRecords/{recordId}

Why This Structure?

• Easy security rule validation (request.auth.uid == userId)
• Simple queries
• Horizontal scalability
• Logical data grouping

Each user's data grows independently ? Firestore scales automatically.

Step 4: Firestore Security Rules

This is where security becomes real.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    function isOwner(userId) {
      return request.auth != null && request.auth.uid == userId;
    }

    match /users/{userId} {
      allow read, write: if isOwner(userId);
    }

    match /appointments/{userId}/{document=**} {
      allow read, write: if isOwner(userId);
    }

    match /medicalRecords/{userId}/{document=**} {
      allow read, write: if isOwner(userId);
    }

    match /{document=**} {
      allow read, write: if false;
    }
  }
}

Important Principle

Always enforce access control at the database layer ? never rely only on frontend logic.

This ensures HIPAA-aligned isolation at the architectural level.

Step 5: Real-Time Appointment System

Using Firestore's onSnapshot:

return onSnapshot(q, (snapshot) => {
  const appointments = snapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }));
  callback(appointments);
});

Why Real-Time?

• Instant status updates
• No manual refresh
• Better UX
• Cleaner reactive architecture

Firestore handles synchronization automatically.

Step 6: Medical Records Module

Medical records use:

• Ordered queries (orderBy('date', 'desc'))
• Real-time listeners
• Structured subcollections

This keeps reads efficient and scoped only to the current user.

You may also like | The Rise of IoMT : Revolutionizing Healthcare Delivery

Performance & Scalability Decisions

1. Code Splitting

Using React.lazy() to reduce bundle size.

2. Scoped Queries

Never fetch full collections.

Always scope queries like this:

collection(db, 'medicalRecords', userId, 'userRecords')

3. Composite Indexes

For multi-field queries, define indexes in firestore.indexes.json.

Security Hardening for Production

For a healthcare app, security is non-negotiable.

Enabled protections:

• Email verification
• Firebase App Check (reCAPTCHA v3)
• Strict Firestore rules
• HTTPS via Firebase Hosting
• Environment-based configs
• Usage alerts

Deployment Flow

Build and deploy hosting:

npm run build
firebase deploy --only hosting

Deploy Firestore rules:

firebase deploy --only firestore:rules

Simple and production-ready.

Future Improvements

Planned enhancements:

• Multi-role access (doctor dashboard)
• Firebase Storage for medical reports
• Push notifications
• In-app messaging
• Telemedicine integration
• Audit logs
• Rate limiting via Cloud Functions

Key Engineering Takeaways

1. Firebase eliminates backend complexity for MVP-stage healthcare apps.
2. Security rules are non-negotiable.
3. Real-time listeners drastically improve UX.
4. Proper Firestore structure simplifies access control.
5. React + Firebase enables rapid development of SaaS-style healthcare platforms.

You may also like | Healthcare Payments : The Role of Blockchain Technology

Conclusion

This architecture is ideal for:

• Healthcare startups
• Rapid MVP launches
• Internal medical tools
• SaaS patient portals

React provides clean component architecture. Firebase provides secure backend infrastructure. Combined, they allow you to move fast without sacrificing scalability.