Not sure if firebase is connected to my app and working properly

Question

I am newbie to firebase tools and I am following a tutorial video to create an app with react and firebase. Because Ive got an error while uploading an image of either jpg or png, I wondered if firebase and my app were connected. In the video, version 7 firebase was being used and I installed version 9.6.8. I googled how to write version 9 code that functions same as code written in version 7. But still doesn't work. I guessed my app didn't properly connect to firebase as I read an error occurred. The error is from the console of a browser.

0 null
ProgressBar.jsx:6 
0 null
connection.ts:81          
POST https://firebasestorage.googleapis.com/v0/b/clone-netninja-firegram.appspot.com/o?name=ssc.jpg 403
send @ connection.ts:81
ProgressBar.jsx:6 0 null
ProgressBar.jsx:6 0 null

I am going to google more, but I hope someone can tackle this error. Below are codes that I think related to the error.

Package.json file

{
  "name": "firegram",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "firebase": "^9.6.8",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is a configuration file for firebase.

// import * as firebase from 'firebase/app'
import 'firebase/storage';
// import 'firebase/firestore';
//to use firebase app
// import firebase from 'firebase/app'; //older version
import firebase from 'firebase/compat/app'; //v9

//to use auth
// import 'firebase/auth'; //older version
import 'firebase/compat/auth'; //v9

//to use firestore
// import 'firebase/firestore'; //Older Version
import 'firebase/compat/firestore'; //v9
import 'firebase/compat/storage'; //v9
// Your web app's Firebase configuration
const firebaseConfig = { [[REDACTED]] };

// Initialize Firebase
// const app = initializeApp(firebaseConfig);
firebase.initializeApp(firebaseConfig);

// Initialize two services
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();

export { projectStorage, projectFirestore };

When uploading an image

import React from 'react';
import useStorage from '../hooks/useStorage';

const ProgressBar = ({ file, setFile }) => {
  const { url, progress } = useStorage(file);
  console.log(progress, url)
  return <div className='progress-bar'>ProgressBar</div>;
};

export default ProgressBar;

import { useState, useEffect } from 'react';
import { projectStorage } from '../firebase/config';

const useStorage = (file) => {
  const [progress, setProgress] = useState(0);
  const [err, setErr] = useState(null);
  const [url, setUrl] = useState(null);

  useEffect(() => {
    // references
    const storageRef = projectStorage.ref(file.name);

    storageRef.put(file).on('state_changed', (snap) => {
      let percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
      setProgress(percentage);

    }, (err) => {
      setErr(err)
    }, async () => {
      const url = await storageRef.getDownloadURL();
      setUrl(url)
    });
  }, [file])

  return { progress, url, err }
}

export default useStorage;

Please be *very* careful when publishing content to Stack overflow that you don't, inadvertently include credentials. I've removed `FirebaseConfig` from your code. These credentials could be used be bad actors. I encourage you (you really should) to delete and create new Firebase credentials. — DazWilkin, Mar 10 '22 at 23:52
There's a bunch of setup work that needs to be done. Rather than spend time trying to debug what you have done, I encourage you to use a definitive tutorial such as [this](https://firebase.google.com/docs/web/setup) one. One challenge with tutorial videos is that they're often outdated and not easily maintained. — DazWilkin, Mar 10 '22 at 23:56
@DazWilkin While I typically don't encourage to include Firebase config in questions (it's not needed), these are configuration values and **not** credentials. See https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public — Frank van Puffelen, Mar 11 '22 at 05:02
@frank-van-puffelen that's right, thanks for the correction. I always think there's an API key in there but there isn't. — DazWilkin, Mar 11 '22 at 05:24

score 1 · Answer 1 · answered Mar 11 '22 at 03:57

Just by accessing the given image url: https://firebasestorage.googleapis.com/v0/b/clone-netninja-firegram.appspot.com/o?name=ssc.jpg. It's clear that you're getting a Permission denied error:

{
  "error": {
    "code": 403,
    "message": "Permission denied."
  }
}

There are some possible reasons that you can encounter this 403 error.

If you have not configured your Firebase Storage Rules. By default Storage expects uploading users to be authenticated. If you're still on the testing phase of your project you can bypass that by writing these in the Storage > Rules:
```
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth == null;
    }
  }
}
```
If you are ready to deploy to production, you may want to check this documentation to configure your Firebase Cloud Storage Security Rules.
If you upload a new image with the same filename and extension, it will override/replace the old image and generate a new token for it, making the old URL obsolete. You should generate a unique filename for your uploaded image and then it should be fixed.

Also, as stated by @DazWilkin, we encourage you to use a definitive tutorial on how to initialize Firebase for your project here. For Firebase Storage, you can start from here.

Not sure if firebase is connected to my app and working properly

1 Answers1