Firebase Cloud Storage Vue

—

### ✅ Step 1: Set up Firebase Project
1. Go to [Firebase Console](https://console.firebase.google.com/).
2. Click “Add project” → follow the steps to create a new project.
3. In the left menu, go to **Build > Storage** and click “Get Started”.
4. Select the free **Spark Plan** (5 GB storage, 1 GB downloads/day).
5. Allow access to Firebase Storage and continue.

—

### ✅ Step 2: Set Firebase Rules (for development)
For local development, set permissive rules (NOT RECOMMENDED for production):

// Firebase Console > Storage > Rules
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

—

### ✅ Step 3: Install Firebase in Your Vue Project

yarn add firebase
# or
npm install firebase

—

### ✅ Step 4: Initialize Firebase in Vue

Create a file like `firebase.js` or `firebaseConfig.js`:

// src/firebase.js
import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app-id",
  storageBucket: "your-app-id.appspot.com",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export { storage };

—

### ✅ Step 5: Upload File from Vue

Example `Upload.vue` component:

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <p v-if="url">Uploaded File: <a :href="url" target="_blank">{{ url }}</a></p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { storage } from '../firebase'
import { ref as storageRef, uploadBytes, getDownloadURL } from 'firebase/storage'

const url = ref('')

const uploadFile = async (e) => {
  const file = e.target.files[0]
  if (!file) return

  const fileRef = storageRef(storage, `uploads/${file.name}`)

  try {
    await uploadBytes(fileRef, file)
    url.value = await getDownloadURL(fileRef)
    console.log('Uploaded successfully:', url.value)
  } catch (err) {
    console.error('Upload failed:', err)
  }
}
</script>

—

### ✅ Step 6: Run Locally
Just run your local app:

npm run dev
# or
yarn dev

And test file uploads from your localhost. You’ll see them appear in the Firebase Console > Storage.

—

### 🔒 Bonus: Secure Your Rules for Authenticated Users

Later, use rules like:

allow read, write: if request.auth != null;

And authenticate with Firebase Auth (email/password, Google, etc.).

—

Want to add **Firebase Auth** too or implement file deletion/listing?

You will add this Firebase Storage rule in the **Firebase Console** under the **Storage Rules** section. Here's exactly how to do it:

—

### 🔧 Where to Add Firebase Storage Rules

1. Go to [Firebase Console](https://console.firebase.google.com/).
2. Select your project.
3. In the left sidebar, go to **Build > Storage**.
4. Click on the **"Rules"** tab (top of the page, next to "Files").
5. Replace the default code with this:

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

6. Click **Publish** (button in the top right corner).

—

### ⚠️ Warning

Setting `allow read, write: if true;` allows **anyone** to read/write files. Only use this for **local development** or testing.

When you're ready for production, change it to something safer, like:

allow read, write: if request.auth != null;

Which requires the user to be logged in.

—

Let me know if you’d like help with Firebase Authentication integration too!

service cloud.firestore {
match /databases/{database}/documents {

// This rule allows anyone with your Firestore database reference to view, edit,
// and delete all data in your Firestore database. It is useful for getting
// started, but it is configured to expire after 30 days because it
// leaves your app open to attackers. At that time, all client
// requests to your Firestore database will be denied.
//
// Make sure to write security rules for your app before that time, or else
// all client requests to your Firestore database will be denied until you Update
// your rules
match /{document=**} {
allow read, write: if request.time < timestamp.date(2025, 4, 17);
}
}
}

Firebase has **separate rules for Firestore and Storage**, and they live in different parts of the Firebase Console.

—

### 🔁 Quick Recap:

You currently have this **Firestore rule** (applies to database reads/writes):

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2025, 4, 17);
    }
  }
}

This has **nothing to do with Cloud Storage** (used for files like images, videos, PDFs).

—

### ✅ To Set Rules for **Cloud Storage**:

Do this:

1. Go to the **Firebase Console**: [https://console.firebase.google.com](https://console.firebase.google.com)
2. Choose your project.
3. In the left sidebar, go to:
**Build → Storage** → Click **Rules** tab.
4. You will see something like:

rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /{allPaths=**} {
         allow read, write: if false;
       }
     }
   }

5. Replace it with:

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

6. Click **Publish**.

—

### 🛡️ Best Practice Reminder

– Use `allow read, write: if true;` **only for development**.
– For production, switch to:

allow read, write: if request.auth != null;

And implement **Firebase Auth** in your app.

—

Would you like a working example with Firebase Auth + Storage for Vue?