@chem-po/firebase-native

React Native Firebase integration for ChemPo ecosystem.

🚀 Quick Start

Prerequisites

Before using this package, ensure your React Native app has:

1. Firebase Project Setup

   • Create a Firebase project at https://console.firebase.google.com
   • Enable Authentication with desired providers (Email/Password, Google)
   • Enable Firestore Database
   • Enable Cloud Storage

2. Platform Configuration

iOS Setup

1. Download GoogleService-Info.plist from Firebase Console
2. Add it to your iOS project root
3. Configure URL schemes in ios/[ProjectName]/Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>REVERSED_CLIENT_ID</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

Android Setup

1. Download google-services.json from Firebase Console
2. Place it in android/app/google-services.json
3. Ensure package name matches Firebase configuration

Installation

npm install @chem-po/firebase-native
# or
yarn add @chem-po/firebase-native

Required Peer Dependencies

npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore @react-native-firebase/storage @react-native-firebase/functions @react-native-google-signin/google-signin

📱 Configuration

1. Firebase Initialization

import { getAuth } from '@react-native-firebase/auth'
import { getFirestore } from '@react-native-firebase/firestore'
import { getStorage } from '@react-native-firebase/storage'
import { getFunctions } from '@react-native-firebase/functions'
import { getFirebaseAdapter } from '@chem-po/firebase-native'

// Initialize Firebase services
const auth = getAuth()
const firestore = getFirestore()
const storage = getStorage()
const functions = getFunctions()

// Create backend adapter
const backendAdapter = getFirebaseAdapter(
  auth,
  firestore,
  storage,
  functions,
  true // Enable two-factor authentication
)

2. Google Authentication Setup

⚠️ REQUIRED: You must provide your Google Web Client ID:

import { GoogleAuthProvider } from '@chem-po/core'

// Get this from Firebase Console > Authentication > Sign-in method > Google > Web SDK configuration
const googleAuthProvider: GoogleAuthProvider = {
  name: 'google',
  webClientId: 'YOUR_GOOGLE_WEB_CLIENT_ID.apps.googleusercontent.com',
}

3. Provider Setup

import { ChempoNativeProvider } from '@chem-po/react-native'
import { FirebaseSignIn } from '@chem-po/firebase-native'

export default function App() {
  return (
    <ChempoNativeProvider backendAdapter={backendAdapter}>
      <FirebaseSignIn googleProvider={googleAuthProvider} />
    </ChempoNativeProvider>
  )
}

🔐 Environment Variables

For debug logging (optional):

EXPO_PUBLIC_DEBUG=true  # Enable debug logging

🔧 Configuration Validation

Use the built-in validation helper to identify setup issues early:

import { validateAndLogAuthConfig } from '@chem-po/firebase-native'

// Validate your auth providers configuration
const providers = [googleAuthProvider] // Your auth providers
validateAndLogAuthConfig(providers)

This will output helpful warnings and errors if configuration is missing or incorrect:

• ❌ Missing Google webClientId
• ⚠️ Incorrect webClientId format
• ⚠️ Missing Firebase configuration files

Tip: Call this during development to catch configuration issues before they cause runtime errors.

🚨 Common Issues

"Google web client ID is required"

• Ensure you've added the webClientId to your Google auth provider
• Verify the client ID matches your Firebase project configuration
• Use the validation helper to check your configuration

"No user found"

• Check Firebase Authentication is enabled
• Verify Google Services files are properly configured
• Ensure bundle ID/package name matches Firebase project

Multi-factor Authentication Issues

• Ensure users have enrolled MFA factors via Firebase Console
• Check that twoFactorRequired parameter matches your requirements

Google Play Services Issues

• Ensure Google Play Services is installed and up to date
• Check that your app's package name matches Firebase configuration

📚 API Reference

getFirebaseAdapter

Creates a Firebase backend adapter with authentication, database, and storage.

getFirebaseAdapter(
  auth: Auth,
  db: Firestore,
  storage: Storage,
  functions: Functions,
  twoFactorRequired: boolean
): FirebaseAdapter

FirebaseSignIn Component

Pre-built authentication component with Google Sign-in support.

<FirebaseSignIn
  googleProvider={googleAuthProvider}
/>

Configuration Validation

Utility functions to validate your Firebase configuration:

// Validate configuration and get results
const result = validateAuthConfiguration(providers)

// Validate and log results automatically
validateAndLogAuthConfig(providers)

// Custom logging
logValidationResults(result, 'MyApp')

🤝 Support

For issues related to:

• Firebase configuration: Check Firebase Documentation
• React Native Firebase: Check @react-native-firebase/app
• Google Sign-in: Check @react-native-google-signin