Bolt.new AI and Firebase integration: Step-by-Step Guide 2025

You integrate Bolt.new with Firebase the same way you integrate any browser‑based full‑stack sandbox with Firebase: you install the real Firebase SDKs inside your Bolt project, provide your Firebase keys through environment variables, initialize the Firebase client or admin SDK in your server-side routes, and call Firebase normally. Bolt doesn’t have any hidden magic; you treat it like a small Node + browser workspace that can talk to Firebase via REST or official SDKs. The essential steps are: install Firebase packages, configure environment variables, initialize Firebase (client SDK for frontend, Admin SDK for backend), then call Firestore/Auth/Storage from your Bolt routes or frontend code.

 

What Firebase + Bolt.new Integration Actually Means

 

Bolt.new gives you a frontend (runs in the browser) and a backend (Node inside Bolt’s sandbox). Firebase gives you two SDK families:

• Firebase Web SDK — meant for browser apps (Auth, Firestore, Storage, etc.)
• Firebase Admin SDK — server‑side SDK used in Node (secure writes, privileged access)

Inside Bolt.new you can use both: the Web SDK in your React/Vue/Svelte/JS frontend, and the Admin SDK in backend routes.

 

Step-by-Step Integration

 

The steps below are the safest and most common pattern for real integrations.

• Install Firebase SDKs

npm install firebase firebase-admin

• Add environment variables in Bolt.new (project settings → environment variables).
  These should be your real Firebase credentials—not placeholder values.

Frontend-safe variables (Web SDK):

• VITE_FIREBASE_API\_KEY
• VITE_FIREBASE_AUTH\_DOMAIN
• VITE_FIREBASE_PROJECT\_ID
• VITE_FIREBASE_STORAGE\_BUCKET
• VITE_FIREBASE_SENDER\_ID
• VITE_FIREBASE_APP\_ID

Backend-only variables (Admin SDK):

• FIREBASE_PROJECT_ID
• FIREBASE_CLIENT_EMAIL
• FIREBASE_PRIVATE_KEY

These come from Firebase → Project Settings → Service Accounts → Generate New Private Key.

 

Initialize Firebase in the Frontend (Web SDK)

 

// firebaseClient.js

import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
import { getAuth } from "firebase/auth"

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID
}

const app = initializeApp(firebaseConfig)

export const db = getFirestore(app)
export const auth = getAuth(app)

Now you can use db and auth directly inside Bolt.new’s frontend components.

 

Initialize Firebase in the Backend (Admin SDK)

 

Use this when you need privileged server access, such as writing secure data, verifying auth tokens, or hitting Firestore without exposing secrets.

// firebaseAdmin.js

import admin from "firebase-admin"

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, "\n") // required fix
    })
  })
}

export const firestore = admin.firestore()
export const auth = admin.auth()

Notice the replace fix — private keys come with escaped newlines.

 

Create a Backend API Route in Bolt.new That Talks to Firebase

 

// routes/saveNote.js (example backend route)

import { firestore } from "../firebaseAdmin.js"

export default async function handler(req, res) {
  try {
    const { userId, text } = req.body

    await firestore.collection("notes").add({
      userId,
      text,
      createdAt: Date.now()
    })

    res.status(200).json({ ok: true })
  } catch (err) {
    console.error(err)
    res.status(500).json({ error: "Failed to save note" })
  }
}

This is how Bolt routes communicate with Firebase in production‑safe ways.

 

Frontend → Backend → Firebase Flow

 

This is the typical flow you’ll implement:

• The frontend collects data or a signed-in Firebase user token.
• The frontend calls a Bolt backend route using fetch().
• The backend verifies the user (optional) and writes/reads from Firestore via Admin SDK.

This keeps secrets off the client and follows Firebase’s recommended architecture.

 

When to Use Each SDK

 

• Use Firebase Web SDK when running code in the browser: authentication, reading public Firestore data, or showing UI.
• Use Firebase Admin SDK in backend routes when performing secure operations (server writes, role checks, token verification).

 

Important Gotchas

 

• Never expose your Admin SDK credentials to the frontend. Only store them in Bolt backend environment variables.
• Firebase private keys must be stored with \n escapes in env vars and fixed at runtime.
• Bolt.new can call Firebase’s REST APIs too if you prefer minimal dependencies.

This is the real, production-safe way to integrate Bolt.new with Firebase.