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