A mobile application built with Ionic React and Firebase, demonstrating user authentication and profile management with ReactFire.

• Ionic Framework - UI components and mobile framework
• Capacitor - Native runtime for web apps
• React - Frontend framework
• TypeScript - Type-safe JavaScript
• Vite - Build tool
• Firebase - Backend services
• ReactFire - React bindings for Firebase

ionic-react-capacitor-app/
 ├── src/
 │ ├── components/ # Reusable components
 │ ├── pages/ # Page components
 │ ├── hooks/ # Custom React hooks
 │ ├── context/ # React context providers
 │ └── config/ # Configuration files
 ├── public/ # Static assets
 └── firestore.rules # Firebase security rules

• User authentication (sign in/sign up)
• Profile management
• Protected routes
• Firebase Firestore integration
• Responsive UI with Ionic components

Create a .env file in the root directory with the following variables:

VITE_FIREBASE_API_KEY = your_api_key;
VITE_FIREBASE_AUTH_DOMAIN = your_auth_domain;
VITE_FIREBASE_PROJECT_ID = your_project_id;
VITE_FIREBASE_STORAGE_BUCKET = your_storage_bucket;
VITE_FIREBASE_MESSAGING_SENDER_ID = your_messaging_sender_id;
VITE_FIREBASE_APP_ID = your_app_id;

1. Clone the repository

2. Install dependencies:

   npm install

3. Create Firebase project and add configuration

   access firebase console and create a new project, add firebase to your project, create a new web app, copy the config object and add it to your .env file.

4. Run the development server:

   npm run dev

The application uses the following Firestore security rules:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if request.auth != null && request.auth.uid == userId;
      allow write: if request.auth != null && request.auth.uid == userId;
    }

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

When using Firebase Authentication with Capacitor, there's a known issue with persistence storage. The default browserLocalPersistence doesn't work correctly on mobile platforms.

We handle this by using different persistence methods based on the platform:

• Native platforms (iOS/Android): indexedDBLocalPersistence
• Web: browserLocalPersistence

// Example from src/config/firebase.ts
setPersistence(
  auth,
  Capacitor.isNativePlatform()
    ? indexedDBLocalPersistence
    : browserLocalPersistence
);

• Firebase Auth Persistence Documentation
• Capacitor Platform Detection