Firebase CDN

This document provides instructions for setting up Firebase Storage as a CDN for LibreChat

Firebase Storage integrates with Firebase Hosting's global CDN, letting you serve files stored in Firebase Storage through edge locations around the world. It is one of LibreChat's CDN-backed file storage options, alongside CloudFront for S3.

What you'll need

A Google account and roughly 10 minutes. You'll create a Firebase project, enable Cloud Storage, register a web app to obtain credentials, then point LibreChat at it.

Create a Firebase Project

Open Firebase and sign in. Go to the Firebase website, click Get started, and sign in with your Google account.

Name your project. You can reuse the same project as Google OAuth if you have one.

Naming the Firebase project

Configure Google Analytics (optional). You can disable Google Analytics for this project.

Google Analytics toggle

Create the project. Wait 20-30 seconds for provisioning to finish, then click Continue.

Project ready, click Continue

Enable Cloud Storage

Open All Products. From the project dashboard, click All Products.

All Products menu

Select Storage, then click Get Started.

Select Storage

Storage Get Started

Confirm the security rules. Click Next to continue.

Security rules step

Choose a Cloud Storage location, then finish setup and return to the Project Overview.

Select Cloud Storage location

Register a Web App

Add a web app. On the Project Overview, click + Add app under your project name, then choose Web.

Add a web app

Register the app and give it a nickname.

Copy your firebaseConfig values. Save the displayed configuration somewhere safe.

Firebase config values

Add the values to your .env file. Map each firebaseConfig value to the matching variable:

FIREBASE_API_KEY=api_key                          # apiKey
FIREBASE_AUTH_DOMAIN=auth_domain                  # authDomain
FIREBASE_PROJECT_ID=project_id                    # projectId
FIREBASE_STORAGE_BUCKET=storage_bucket            # storageBucket
FIREBASE_MESSAGING_SENDER_ID=messaging_sender_id  # messagingSenderId
FIREBASE_APP_ID=1:your_app_id                     # appId

Update Storage Rules

Open Storage rules. Return to the Project Overview, select Storage, then open the Rules tab.

Open Storage

Allow read and write access. Change allow read, write: if false; to if true; so it matches the rules below:

rules_version = '2';
 
service firebase.storage {
  match /b/{bucket}/o {
    match /images/{userId}/{fileName} {
      allow read, write: if true;
    }
  }
}

Updated storage rules

Publish your changes.

Publish rules

Configure LibreChat

Set fileStrategy to firebase in your librechat.yaml config file so LibreChat uses Firebase for file storage:

version: 1.3.5
cache: true
fileStrategy: 'firebase'

For more about this file, see the librechat.yaml guide.

Enable CORS for PNG Exports

Only needed for PNG exports

Exporting conversations as PNG fetches images directly from Firebase Storage in the browser. Without a CORS policy that allows your domain, those requests are blocked. Skip this section if you don't export conversations as PNG.

Create the CORS configuration file. In a text editor, create cors.json and allow access from your domain:

[
  {
    "origin": ["https://ai.example.com"],
    "method": ["GET", "POST", "DELETE", "PUT"],
    "maxAgeSeconds": 3600
  }
]

Apply the configuration. From the directory containing cors.json, run the command below, replacing <your-cloud-storage-bucket> with your bucket name:

gsutil cors set cors.json gs://<your-cloud-storage-bucket>

Verify the settings. Retrieve the active policy and confirm it matches cors.json:

gsutil cors get gs://<your-cloud-storage-bucket>

Test it. Export a conversation as PNG from your allowed origin. If everything is configured correctly, the export succeeds without CORS errors.

Security tip

Only allow CORS for trusted origins, and limit the methods and headers to what your deployment actually needs.