Configuration

Configure Refirebase with environment variables or a config object.

Environment variables

Refirebase reads your Firebase config from environment variables automatically. For Next.js projects, it accepts both the plain FIREBASE_* prefix (server-side) and the NEXT_PUBLIC_FIREBASE_* prefix (client bundle).

.env.local

# .env or .env.local
FIREBASE_API_KEY=AIza...
FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
FIREBASE_DATABASE_URL=https://your-project-default-rtdb.firebaseio.com
FIREBASE_PROJECT_ID=your-project
FIREBASE_STORAGE_BUCKET=your-project.appspot.com
FIREBASE_MESSAGING_SENDER_ID=123456789
FIREBASE_APP_ID=1:123456789:web:abc

# Next.js (client bundle) — same keys with NEXT_PUBLIC_ prefix
NEXT_PUBLIC_FIREBASE_API_KEY=AIza...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abc
NEXT_PUBLIC_FIREBASE_DATABASE_URL=https://your-project-default-rtdb.firebaseio.com

# Enable local emulators
FIREBASE_USE_EMULATORS=true

💡

You only need to set the DATABASE_URL if you are using Realtime Database. MEASUREMENT_ID is only needed for Analytics.

Config object

You can also pass the config directly to the constructor. Explicit values take priority over environment variables.

lib/firebase.ts

import { Refirebase } from 'refirebase';

// Option 1: environment variables (recommended)
const { db, auth } = new Refirebase();

// Option 2: explicit config object
const { db, auth } = new Refirebase({
  apiKey: 'AIza...',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project',
  storageBucket: 'your-project.appspot.com',
  messagingSenderId: '123456789',
  appId: '1:123456789:web:abc',
  databaseURL: 'https://your-project-rtdb.firebaseio.com',
});

Emulators

Set FIREBASE_USE_EMULATORS=true and Refirebase automatically connects all services to the local Firebase Emulator Suite.

emulators

// Set the env var to auto-connect to local emulators:
// FIREBASE_USE_EMULATORS=true

// Emulator ports used:
// Firestore  → localhost:8080
// Auth       → localhost:9099
// RTDB       → localhost:9000
// Storage    → localhost:9199

TypeScript schema

Pass a generic type to get full type inference across all Firestore operations. Collection names autocomplete and document fields are typed automatically.

lib/firebase.ts

import { Refirebase } from 'refirebase';

// Define your Firestore schema
type Schema = {
  users: { name: string; email: string; role: 'admin' | 'user' };
  posts: { title: string; body: string; authorId: string };
};

// Pass the schema as a generic
const { db } = new Refirebase<Schema>();

// Now collection names autocomplete and return typed documents
const users = await db.firestore.get('users'); // typed as users[]
const posts = await db.firestore.get('posts'); // typed as posts[]

← PreviousInstallation Next →Quick Start