blinkk · stevenle · Jul 2, 2025
diff --git a/.changeset/storage-bucket-project.md b/.changeset/storage-bucket-project.md
@@ -0,0 +1,4 @@
+---
+"@blinkk/root-cms": minor
+---
+feat: add `storageConfig` option to support storage buckets in a different Firebase project.
diff --git a/docs/root.config.ts b/docs/root.config.ts
@@ -42,6 +42,12 @@ export default defineConfig({
         projectId: 'rootjs-dev',
         storageBucket: 'rootjs-dev.appspot.com',
       },
+      storageConfig: {
+        apiKey: 'AIzaSyDIoi6zECKeyJoCduYEmV5j9PIF-wbpaPo',
+        authDomain: 'rootjs-dev.firebaseapp.com',
+        projectId: 'rootjs-dev',
+        storageBucket: 'rootjs-dev.appspot.com',
+      },
       gapi: {
         apiKey: process.env.GAPI_API_KEY,
         clientId: process.env.GAPI_CLIENT_ID,

diff --git a/examples/blog/root.config.ts b/examples/blog/root.config.ts
@@ -64,6 +64,12 @@ export default defineConfig({
         appId: '1:636169634531:web:7b8fe398f10e5d9c4e7bd6',
         measurementId: 'G-5JTQHSPWBB',
       },
+      storageConfig: {
+        apiKey: 'AIzaSyDIoi6zECKeyJoCduYEmV5j9PIF-wbpaPo',
+        authDomain: 'rootjs-dev.firebaseapp.com',
+        projectId: 'rootjs-dev',
+        storageBucket: 'rootjs-dev.appspot.com',
+      },
       gapi: {
         apiKey: process.env.GAPI_API_KEY,
         clientId: process.env.GAPI_CLIENT_ID,

diff --git a/examples/cms/root.config.ts b/examples/cms/root.config.ts
@@ -34,6 +34,12 @@ export default defineConfig({
         projectId: 'rootjs-dev',
         storageBucket: 'rootjs-dev.appspot.com',
       },
+      storageConfig: {
+        apiKey: 'AIzaSyDIoi6zECKeyJoCduYEmV5j9PIF-wbpaPo',
+        authDomain: 'rootjs-dev.firebaseapp.com',
+        projectId: 'rootjs-dev',
+        storageBucket: 'rootjs-dev.appspot.com',
+      },
       gapi: {
         apiKey: process.env.GAPI_API_KEY,
         clientId: process.env.GAPI_CLIENT_ID,

diff --git a/packages/root-cms/core/app.tsx b/packages/root-cms/core/app.tsx
@@ -106,6 +106,7 @@ export async function renderApp(
       },
     },
     firebaseConfig: cmsConfig.firebaseConfig,
+    storageConfig: cmsConfig.storageConfig,
     gapi: cmsConfig.gapi,
     collections: collections,
     sidebar: cmsConfig.sidebar,
@@ -220,6 +221,7 @@ export async function renderSignIn(
   const ctx = {
     name: options.cmsConfig.name || options.cmsConfig.id || '',
     firebaseConfig: options.cmsConfig.firebaseConfig,
+    storageConfig: options.cmsConfig.storageConfig,
   };
   const mainHtml = renderToString(<SignIn title="Sign in" ctx={ctx} />);
   let html = `<!doctype html>\n${mainHtml}`;

diff --git a/packages/root-cms/core/plugin.ts b/packages/root-cms/core/plugin.ts
@@ -59,6 +59,15 @@ export interface CMSSidebarTool {
   iframeUrl?: string;
 }
 
+export interface CMSFirebaseConfig {
+  [key: string]: string | undefined;
+  apiKey: string;
+  authDomain: string;
+  projectId: string;
+  storageBucket: string;
+  databaseId?: string;
+}
+
 export type CMSPluginOptions = {
   /**
    * The ID of the project. Data will be stored under the namespace
@@ -76,14 +85,13 @@ export type CMSPluginOptions = {
    * Firebase config object, which can be obtained in the Firebase Console by
    * going to "Project Settings".
    */
-  firebaseConfig: {
-    [key: string]: string | undefined;
-    apiKey: string;
-    authDomain: string;
-    projectId: string;
-    storageBucket: string;
-    databaseId?: string;
-  };
+  firebaseConfig: CMSFirebaseConfig;
+
+  /**
+   * Optional Firebase config used for interacting with a storage bucket that
+   * exists in a different Firebase project.
+   */
+  storageConfig?: CMSFirebaseConfig;
 
   /**
    * GAPI credentials. Include if using Google Drive and Google Sheets features.

diff --git a/packages/root-cms/signin/signin.tsx b/packages/root-cms/signin/signin.tsx
@@ -11,6 +11,7 @@ declare global {
     __ROOT_CTX: {
       name: string;
       firebaseConfig: Record<string, string>;
+      storageConfig?: Record<string, string>;
     };
     firebase: {
       app: FirebaseApp;

diff --git a/packages/root-cms/ui/ui.tsx b/packages/root-cms/ui/ui.tsx
@@ -1,7 +1,7 @@
 import {MantineProvider} from '@mantine/core';
 import {ModalsProvider} from '@mantine/modals';
 import {NotificationsProvider} from '@mantine/notifications';
-import {initializeApp} from 'firebase/app';
+import {initializeApp, getApp} from 'firebase/app';
 import {User, getAuth} from 'firebase/auth';
 import {initializeFirestore} from 'firebase/firestore';
 import {getStorage} from 'firebase/storage';
@@ -66,6 +66,7 @@ declare global {
         };
       };
       firebaseConfig: Record<string, string>;
+      storageConfig?: Record<string, string>;
       gapi?: {
         apiKey: string;
         clientId: string;
@@ -169,6 +170,14 @@ function loginRedirect() {
 }
 
 const app = initializeApp(window.__ROOT_CTX.firebaseConfig);
+let storageApp = app;
+if (window.__ROOT_CTX.storageConfig) {
+  try {
+    storageApp = initializeApp(window.__ROOT_CTX.storageConfig, 'storage');
+  } catch (err) {
+    storageApp = getApp('storage');
+  }
+}
 const databaseId = window.__ROOT_CTX.firebaseConfig.databaseId || '(default)';
 // const db = getFirestore(app);
 // NOTE(stevenle): the firestore web channel rpc sometimes has issues in
@@ -184,7 +193,7 @@ const db = initializeFirestore(
   databaseId
 );
 const auth = getAuth(app);
-const storage = getStorage(app);
+const storage = getStorage(storageApp);
 auth.onAuthStateChanged((user) => {
   if (!user) {
     loginRedirect();