How to Integrate Bolt.new with Firebase

1// lib/firebase.ts
2import { initializeApp, getApps } from 'firebase/app';
3import { getFirestore } from 'firebase/firestore';
4import { getAuth } from 'firebase/auth';
5import { getStorage } from 'firebase/storage';
6
7const firebaseConfig = {
8  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
9  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
10  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
11  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
12  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
13  appId: import.meta.env.VITE_FIREBASE_APP_ID,
14};
15
16// Prevent re-initialization on hot reload
17const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
18
19export const db = getFirestore(app);
20export const auth = getAuth(app);
21export const storage = getStorage(app);
22export default app;

1// hooks/useTasks.ts
2import { useState, useEffect } from 'react';
3import {
4  collection,
5  onSnapshot,
6  addDoc,
7  updateDoc,
8  deleteDoc,
9  doc,
10  orderBy,
11  query,
12  serverTimestamp,
13} from 'firebase/firestore';
14import { db } from '@/lib/firebase';
15
16export interface Task {
17  id: string;
18  title: string;
19  description: string;
20  status: 'todo' | 'in-progress' | 'done';
21  createdAt: Date | null;
22}
23
24export function useTasks() {
25  const [tasks, setTasks] = useState<Task[]>([]);
26  const [loading, setLoading] = useState(true);
27
28  useEffect(() => {
29    const q = query(collection(db, 'tasks'), orderBy('createdAt', 'desc'));
30    const unsubscribe = onSnapshot(q, (snapshot) => {
31      const taskList = snapshot.docs.map((doc) => ({
32        id: doc.id,
33        ...doc.data(),
34        createdAt: doc.data().createdAt?.toDate() ?? null,
35      })) as Task[];
36      setTasks(taskList);
37      setLoading(false);
38    });
39    return () => unsubscribe();
40  }, []);
41
42  return { tasks, loading };
43}
44
45export async function addTask(title: string, description: string) {
46  return addDoc(collection(db, 'tasks'), {
47    title,
48    description,
49    status: 'todo',
50    createdAt: serverTimestamp(),
51  });
52}
53
54export async function updateTask(id: string, changes: Partial<Task>) {
55  return updateDoc(doc(db, 'tasks', id), changes);
56}
57
58export async function deleteTask(id: string) {
59  return deleteDoc(doc(db, 'tasks', id));
60}

1// contexts/AuthContext.tsx
2import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
3import { User, onAuthStateChanged } from 'firebase/auth';
4import { auth } from '@/lib/firebase';
5
6interface AuthContextValue {
7  user: User | null;
8  loading: boolean;
9}
10
11const AuthContext = createContext<AuthContextValue>({ user: null, loading: true });
12
13export function AuthProvider({ children }: { children: ReactNode }) {
14  const [user, setUser] = useState<User | null>(null);
15  const [loading, setLoading] = useState(true);
16
17  useEffect(() => {
18    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
19      setUser(firebaseUser);
20      setLoading(false);
21    });
22    return () => unsubscribe();
23  }, []);
24
25  return (
26    <AuthContext.Provider value={{ user, loading }}>
27      {children}
28    </AuthContext.Provider>
29  );
30}
31
32export function useAuth() {
33  return useContext(AuthContext);
34}
35
36// lib/auth.ts
37import {
38  createUserWithEmailAndPassword,
39  signInWithEmailAndPassword,
40  signInWithPopup,
41  GoogleAuthProvider,
42  signOut as firebaseSignOut,
43} from 'firebase/auth';
44import { auth } from '@/lib/firebase';
45
46export const signUpWithEmail = (email: string, password: string) =>
47  createUserWithEmailAndPassword(auth, email, password);
48
49export const signInWithEmail = (email: string, password: string) =>
50  signInWithEmailAndPassword(auth, email, password);
51
52export const signInWithGoogle = () =>
53  signInWithPopup(auth, new GoogleAuthProvider());
54
55export const signOut = () => firebaseSignOut(auth);

1// app/api/checkout/route.ts
2// Manual Stripe checkout when using Firebase (bypasses Bolt's native Stripe integration)
3import { NextRequest, NextResponse } from 'next/server';
4import Stripe from 'stripe';
5
6const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
7  apiVersion: '2024-04-10',
8});
9
10export async function POST(request: NextRequest) {
11  const { priceId, userId } = await request.json();
12
13  const session = await stripe.checkout.sessions.create({
14    payment_method_types: ['card'],
15    mode: 'payment',
16    line_items: [{ price: priceId, quantity: 1 }],
17    success_url: `${request.nextUrl.origin}/success?session_id={CHECKOUT_SESSION_ID}`,
18    cancel_url: `${request.nextUrl.origin}/pricing`,
19    metadata: { userId },
20  });
21
22  return NextResponse.json({ url: session.url });
23}