Firebase Error: User does not have access

Question

I am working on a snapchat clone where I want to use the image which is cliked on webcam to store in firestore and use it as preview. The code is perfect but it's showing an error related to firebase. I have no idea what to do. This is my code

import "./Preview.css"
import { resetCameraImage, selectCameraImage } from './../features/cameraSlice';
import { useSelector, useDispatch } from 'react-redux';
import { useHistory } from 'react-router';
import CloseIcon from "@material-ui/icons/Close";
import TextFieldsIcon from "@material-ui/icons/TextFields";
import CreateIcon from "@material-ui/icons/Create";
import NoteIcon from "@material-ui/icons/Note";
import MusicNoteIcon from "@material-ui/icons/MusicNote";
import AttachFileIcon from "@material-ui/icons/AttachFile";
import CropIcon from "@material-ui/icons/Crop";
import TimerIcon from "@material-ui/icons/Timer";
import SendIcon from "@material-ui/icons/Send";
import { v4 as uuid } from "uuid";
import { db, storage } from "./firebase";
import  firebase  from 'firebase';

function Preview() {

    const cameraImage = useSelector(selectCameraImage);
    const history = useHistory();
    const dispatch = useDispatch();

    useEffect(() => {
        if (!cameraImage) {
            history.replace('/');
        }
    }, [cameraImage, history]);

    const closePreview = () => {
        dispatch(resetCameraImage());
    }

    const sendPost = () => {
        const id = uuid();
        const uploadTask = storage.ref(`posts/${id}`).putString(cameraImage, "data_url");

        uploadTask.on('state_changed', null, (error) => {
            // error function
            console.log(error);
        },
        () => {
            // complete function
            storage.ref('posts').child(id).getDownloadURL().then((url) => {
                db.collection('posts').add({
                    imageUrl: url,
                    username: "PAPA React",
                    read: false,
                    //profilePic,
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                });
                history.replace('/chats');
            });
        }
        );
    };

    return (
        <div className="preview">
            <CloseIcon className="preview__close" onClick={closePreview}/>
            <div className="preview__toolbarRight">
                <TextFieldsIcon />
                <CreateIcon />
                <NoteIcon />
                <MusicNoteIcon />
                <AttachFileIcon />
                <CropIcon />
                <TimerIcon />
            </div>
            <img src={cameraImage} alt="" />
            <div className="preview__footer" onClick={sendPost} >
                <h2>Send Now</h2>
                <SendIcon fontSize="small" className="preview__sendIcon" />
            </div>
        </div>
    )
}

export default Preview

Error thrown

My firebase rule settings

Same error on an alternate method

Same error on an alternate method

Answer 1

The error said the users does not have access to your Firebase Storage. Add rules for Firebase Storage to give users access. For example:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}