# Firebase CDN (https://www.librechat.ai/docs/configuration/cdn/firebase)

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](/docs/configuration/cdn/cloudfront).

<Callout type="info" title="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.
</Callout>

## Create a Firebase Project

<Steps>
<Step>

**Open Firebase and sign in.** Go to the [Firebase website](https://firebase.google.com/), click **Get started**, and sign in with your Google account.

</Step>
<Step>

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

<Frame>
![Naming the Firebase project](https://github.com/danny-avila/LibreChat/assets/81851188/dccce3e0-b639-41ef-8142-19d24911c65c)
</Frame>

</Step>
<Step>

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

<Frame>
![Google Analytics toggle](https://github.com/danny-avila/LibreChat/assets/81851188/5d4d58c5-451c-498b-97c0-f123fda79514)
</Frame>

</Step>
<Step>

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

<Frame>
![Project ready, click Continue](https://github.com/danny-avila/LibreChat/assets/81851188/6929802e-a30b-4b1e-b124-1d4b281d0403)
</Frame>

</Step>
</Steps>

## Enable Cloud Storage

<Steps>
<Step>

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

<Frame>
![All Products menu](https://github.com/danny-avila/LibreChat/assets/81851188/92866c82-2b03-4ebe-807e-73a0ccce695e)
</Frame>

</Step>
<Step>

**Select Storage**, then click **Get Started**.

<Frame>
![Select Storage](https://github.com/danny-avila/LibreChat/assets/81851188/b22dcda1-256b-494b-a835-a05aeea02e89)
</Frame>

<Frame>
![Storage Get Started](https://github.com/danny-avila/LibreChat/assets/81851188/c3f0550f-8184-4c79-bb84-fa79655b7978)
</Frame>

</Step>
<Step>

**Confirm the security rules.** Click **Next** to continue.

<Frame>
![Security rules step](https://github.com/danny-avila/LibreChat/assets/81851188/2a65632d-fe22-4c71-b8f1-aac53ee74fb6)
</Frame>

</Step>
<Step>

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

<Frame>
![Select Cloud Storage location](https://github.com/danny-avila/LibreChat/assets/81851188/c094d4bc-8e5b-43c7-96d9-a05bcf4e2af6)
</Frame>

</Step>
</Steps>

## Register a Web App

<Steps>
<Step>

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

<Frame>
![Add a web app](https://github.com/danny-avila/LibreChat/assets/81851188/22dab877-93cb-4828-9436-10e14374e57e)
</Frame>

</Step>
<Step>

**Register the app** and give it a nickname.

<Frame>
![Register the app](https://github.com/danny-avila/LibreChat/assets/81851188/0a1b0a75-7285-4f03-95cf-bf971bd7d874)
</Frame>

</Step>
<Step>

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

<Frame>
![Firebase config values](https://github.com/danny-avila/LibreChat/assets/81851188/056754ad-9d36-4662-888e-f189ddb38fd3)
</Frame>

</Step>
<Step>

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

```bash filename=".env"
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
```

</Step>
</Steps>

## Update Storage Rules

<Steps>
<Step>

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

<Frame>
![Open Storage](https://github.com/danny-avila/LibreChat/assets/32828263/16a0f850-cdd4-4875-8342-ab67bfb59804)
</Frame>

</Step>
<Step>

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

```js filename="storage.rules"
rules_version = '2';

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

<Frame>
![Updated storage rules](https://github.com/danny-avila/LibreChat/assets/32828263/c190011f-c1a6-47c7-986e-8d309b5f8704)
</Frame>

</Step>
<Step>

**Publish your changes.**

<Frame>
![Publish rules](https://github.com/danny-avila/LibreChat/assets/32828263/5e6a17c3-5aba-419a-a18f-be910b1f25d5)
</Frame>

</Step>
</Steps>

## Configure LibreChat

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

```yaml filename="librechat.yaml"
version: 1.3.5
cache: true
fileStrategy: 'firebase'
```

For more about this file, see the [librechat.yaml guide](/docs/configuration/librechat_yaml).

## Enable CORS for PNG Exports

<Callout type="warning" title="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.
</Callout>

<Steps>
<Step>

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

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

</Step>
<Step>

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

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

</Step>
<Step>

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

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

</Step>
<Step>

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

</Step>
</Steps>

<Callout type="info" title="Security tip">
Only allow CORS for trusted origins, and limit the methods and headers to what your deployment actually needs.
</Callout>
