DEV Community

Cover image for Firebase: My negative Experience
Ifeanyi Chima
Ifeanyi Chima

Posted on

Firebase: My negative Experience

#javascript #webdev #beginners #programming

I am working on a website that will allow a user to login and upload images to his website through a dashboard.

Problem 1

The first issue that I ran into was firebase SDK. I could not use npm packages directly in HTML/CSS. I had to use firebase SDK like this:


import { initializeApp } from "https://www.gstatic.com/firebasejs/11.8.1/firebase-app.js";
import {getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.8.1/firebase-auth.js";
Enter fullscreen mode Exit fullscreen mode

Here is a Fix:

Upgrade Firebase SDK - Make sure you're using the latest versions:

npm install firebase@latest
Enter fullscreen mode Exit fullscreen mode

Problem 2 


const firebaseConfig = {
    // apiKey: "AIzaSyAYrgz9-LLhatfGSeP7iRJsFz1AVF5onpI",
    // authDomain: "oleru-young.firebaseapp.com",
    // projectId: "oleru-young",
    storageBucket: "oleru-young.firebasestorage.app",
    // messagingSenderId: "416968907489",
    // appId: "1:416968907489:web:38b922f619fe2b003075a0"
};
Enter fullscreen mode Exit fullscreen mode

After enabling Storage, you'll see the bucket name in the Firebase Console. It will look like one of these:

  • oleru-young.appspot.com (older format)
  • oleru-young.firebasestorage.app (newer format)

This caused a lot of confusion, if you were wondering the newer format is the correct thing to follow.

Problem 3

CORS - I had to battle with this error


Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/oleru-young.appspot.com/o?name=uploads%2F11f20756a8694b63b7ee0645cde15e2e.jpg' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Enter fullscreen mode Exit fullscreen mode

means your browser is blocking the request to Firebase Storage due to a CORS (Cross-Origin Resource Sharing) issue. Here’s how to fix it.

Here is a fix

Step 1:

Create a cors.json file in your VScode project and add the following syntax

[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    "maxAgeSeconds": 3600,
    "responseHeader": ["Content-Type", "Authorization"]
  }
]
Enter fullscreen mode Exit fullscreen mode

Step 2:

Using your terminal in VScode, you need to login to google cloud by using the terminal

gcloud auth login
Enter fullscreen mode Exit fullscreen mode

If you're working on a project and want to set the active project after logging in, you can run:

gcloud config set project [PROJECT_ID]
Enter fullscreen mode Exit fullscreen mode

Replace [PROJECT_ID] with your actual Google Cloud project ID.

CORS

Set the CORS policy for your project by running this


gcloud storage buckets update gs://[PROJECT_ID].firebasestorage.app --cors-file=cors.json
Enter fullscreen mode Exit fullscreen mode

Problem 4

Firebase Storage Rules

You need to set the rules for the bucket. When you are creating the bucket for the first time. You need to choose test mode. This will allow read and write access to the bucket for up to 30 days.

A firebase bucket looks like this.

rules_version = '2';


service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Use something permissive for testing (not production-safe):

Top comments (2)

Collapse
 
gameingamasteras profile image
amila hay •

Bro, that same CORS issue drove me crazy too 😩 — have you ever tried any alternative to Firebase for image uploads that’s simpler and more beginner-friendly?

Collapse
 
ifeanyichima profile image
Ifeanyi Chima •

no, I am sorry that you experienced that. try supabase or mongodb.