'storage/unknown' or 'storage/unauthorized' problem in React-Redux based web app while accessing Storage in Firebase

Question

I am building a LinkedIn Clone using React-Redux (updated to the latest versions). I have added a post functionality where a user can post a picture and text. Till now, firebase is successfully connected to my Web App as sign-in functionality works perfectly, but when I post an image, it doesn't upload to Firebase Storage and storage/unknown index.js:64 or storage/unauthorized this message comes up in the console.

(Note: index.js:64 - line 64 of src/actions/index.js is mentioned in the code below)

This is not an error as Web App is running perfectly but the above functionality is not working. Have installed and imported Firebase and other components like auth, storage, provider correctly wherever required.

src/actions/index.js

import { auth, provider, storage } from "../firebase";
import db from "../firebase";
import { SET_USER } from "./actionType";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";

export const setUser = (payload) => ({
  type: SET_USER,
  user: payload,
});

//Code for Sign-In, User Authentication and Sign-Out functionality

export function postArticleAPI(payload) {
  return (dispatch) => {
    if (payload.image != "") {
      const upload = storage
        .ref(`image/${payload.image.name}`)
        .put(payload.image);
      upload.on(
        "state_changed",
        (snapshot) => {
          const progress =
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100;

          console.log(`Progess: ${progress}%`);
          if (snapshot === `RUNNING`) {
            console.log(`Progress: ${progress}%`);
          }
        },
        **(error) => console.log(error.code)**,                                 //line 64, refer 1st para
        async () => {
          const downloadURL = await upload.snapshot.ref.getDownloadURL();
          db.collection("articles").add({
            actor: {
              description: payload.user.email,
              title: payload.user.displayName,
              date: payload.timestamp,
              image: payload.user.photoURL,
            },
            video: payload.video,
            sharedImg: downloadURL,
            comments: 0,
            description: payload.description,
          });
        }
      );
    }
  };
}

src/components/PostModal.js

import { useState } from "react";
import styled from "styled-components";
import ReactPlayer from "react-player";
import { connect } from "react-redux";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
import { postArticleAPI } from "../actions";

const PostModal = (props) => {
  const [editorText, setEditorText] = useState("");
  const [shareImage, setShareImage] = useState("");
  const [videoLink, setVideoLink] = useState("");
  const [assetArea, setAssetArea] = useState("");

  const postArticle = (e) => {
    console.log("start");                        //debugging, this message logs in console
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      console.log("insideif");                   //debugging, this message doesn't logs in console
      return;
    }

    const payload = {
      image: shareImage,
      video: videoLink,
      user: props.user,
      description: editorText,
      timestamp: firebase.firestore.Timestamp.now(),
    };

    props.postArticle(payload);
    reset(e);
  };

  return (
    <>
      {props.showModal === "open" && (
        <Container>
          <Content>

            //Fronted for Post Functionality

            <ShareCreation>

            //Fronted for Post Functionality

              <PostButton
                disabled={!editorText ? true : false}
                onClick={(event) => postArticle(event)}
              >
                Post
              </PostButton>
            </ShareCreation>
          </Content>
        </Container>
      )}
    </>
  );
};

//css: styled.divs, styled.buttons, etc.

const mapStateToProps = (state) => {
  return {
    user: state.userState.user,
  };
};

const mapDispatchToProps = (dispatch) => ({
  postArticle: (payload) => dispatch(postArticleAPI(payload)),
});

export default connect(mapStateToProps, mapDispatchToProps)(PostModal);

Console Output:

start                      PostModal.js:34
Progess: 0%                index.js:59
storage/unauthorized       index.js:64

After clicking Post button in the Web App, the image is not coming up in Firebase Storage, which should be coming up. What shall I do?

Answer 1

Problem solved. Just go to Firebase->Storage->Rules and edit the rule as follows:

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