Blue Flame 🔥

A VS Code extension for browsing and managing Google Cloud Firestore databases, Firebase Authentication users, and Firebase Storage files. Navigate collections, documents, users, and storage files in a tree view, browse collections in tabular webview panels, edit document JSON, preview storage files, and manage authentication users — all without leaving your editor.

Features

Firestore

• Multi-connection support — Connect to multiple Firebase projects simultaneously
• Tree-based navigation — Explore Firestore collections, documents, and subcollections in the VS Code sidebar
• Collection table view — Browse documents in a paginated tabular webview with field previews
• Document editor — View and edit document JSON with merge or replace save modes (webview panel or native VS Code editor)
• CRUD operations — Create, read, update, and delete documents from the tree or webview panels
• Cursor-based pagination — Efficiently page through large collections
• Copy document path — Copy the full document path for use in code or queries

Firebase Authentication

• User management — List, create, edit, and delete Firebase Authentication users
• User search — Search users by email, UID, or phone number
• Account controls — Enable or disable user accounts directly from the tree view
• User details editor — Edit user properties (email, display name, phone, password) in a webview panel
• Paginated user list — Efficiently browse large user bases with "Load more" pagination

Firebase Storage

• File browsing — Navigate storage bucket folders and files in the tree view
• File preview — Preview images, text, JSON, and code files in a webview panel
• File operations — Delete files and folders from the tree view
• Copy URLs — Copy gs:// paths or public URLs to clipboard
• View metadata — Inspect file metadata (size, content type, timestamps)
• Paginated listing — Efficiently browse large buckets with "Load more" pagination

Authentication Methods

• Google OAuth — Sign in with your Google account directly in VS Code
• Application Default Credentials (ADC) — Use gcloud auth application-default login
• Service Account JSON — Use a service account key file

Getting Started

Prerequisites

• VS Code 1.109.0 or later
• A Google Cloud project with Firestore, Firebase Authentication, and/or Firebase Storage enabled
• One of the following authentication methods:
  • Google OAuth — Sign in via VS Code's authentication system
  • Application Default Credentials (ADC) — Run gcloud auth application-default login (Google Cloud CLI)
  • Service Account JSON — Download a service account key file from the Firebase Console

Installation

Install Blue Flame from the VS Code Marketplace, or search for "Blue Flame" in the Extensions view (Ctrl+Shift+X).

Adding a Connection

1. Open the Blue Flame panel in the Activity Bar (🔥 icon)
2. Click the + button in the Firestore Explorer title bar
3. Enter a connection name and your Firebase Project ID
4. Choose your authentication mode (Google OAuth, ADC, or Service Account JSON)
5. Optionally specify a database ID (defaults to (default))

Browsing Firestore Data

• Expand a connection → Firestore → collections → documents → subcollections
• Right-click a collection → View Collection to open the tabular browser
• Right-click a document → View Document, Edit Document, or Open in Editor
• Right-click a document → Copy Document Path to copy the full path

Managing Documents

• New Document — Right-click a collection → New Document (auto-ID or specify an ID)
• Edit Document — Open the JSON editor, modify fields, toggle merge/replace, and click Save
• Delete Document — Right-click a document → Delete Document (with confirmation)

Managing Users

• Expand a connection → Authentication to view users
• Search Users — Click the search icon to find users by email, UID, or phone
• New User — Click the + button or right-click → New User
• Edit User — Right-click a user → Edit User to open the user editor
• Disable/Enable — Right-click a user → Disable User or Enable User
• Delete User — Right-click a user → Delete User (with confirmation)

Browsing Storage Files

• Expand a connection → Storage to browse the default bucket
• Navigate folders to view files and subfolders
• Click a file to preview it in a webview panel
• Right-click a file → Copy gs:// URL or Copy Public URL
• Right-click a file → View Metadata to inspect file details
• Right-click a file or folder → Delete (with confirmation)

Commands

Connection Commands

Firestore Commands

Authentication Commands

Storage Commands

Settings

Development

npm install            # Install dependencies
npm run compile        # Type-check + lint + build
npm run watch          # Watch mode for development
npm test               # Run tests

Press F5 to launch the Extension Development Host.

License

MIT © Tim Heuer