Saturday, 17 April 2021

Even if the user is logged in, I get an error

I have a problem: I want a logged in user to be able to use the getRealtimeUsers function. But I get an error of FirebaseError: Missing or insufficient permissions.

I add the code I made with explanations: On the React side, I created a firebase, registered a getRealtimeUsers function there, and tried to use it.

firebase.js file

import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

firebase.initializeApp(firebaseConfig);
export default firebase;

A function that uses the firebase I created:

import firebase from '../../firebase';

export const getRealtimeUsers = () => {

    return async () => {
        const db = firebase.firestore();
        const unsubscribe = db.collection("users")
        return unsubscribe;
    }
}

Testing of the function

import React, { Component } from 'react';

import { connect } from 'react-redux';
import { getRealtimeUsers } from '../redux/actions/chatActions';

import firebase from '../firebase';
let unsubscribe;

class chat extends Component {
    componentDidMount() {
        unsubscribe = this.props.getRealtimeUsers()
            .then(unsubscribe => {
                return unsubscribe;
            }).catch(error => {
                console.log(error);
            });
    }
    componentWillUnmount() {
        return () => {
            unsubscribe.then(f => f()).catch(error => console.log(error));
        }
    }

    render() {

        const ref = firebase.firestore().collection("users");
        return (

                <div>
                    check if works
                </div>
        );
    }
}

const mapStateToProps = (state) => ({
});

export default connect(
    mapStateToProps,
    {
        getRealtimeUsers
    }
);

Here I let use make login login.js action

export const loginUser = (userData) => (dispatch) => {
  axios
    .post('/login', userData)
    .then((res) => {
      console.log(res)
      setAuthorizationHeader(res.data.token);
    })
    .catch((err) => {
      console.log(err)
    });
};

The login is done on the side of nodejs, which is also where I set it to firebase


const config =  {
    apiKey: "WqcVU",
    authDomain: "c468.firebaseapp.com",
    projectId: "c468",
    storageBucket: "c468.appspot.com",
    messagingSenderId: "087",
    appId: "1:087:web:c912",
    measurementId: "G-SQX1"
  };
  ;

const firebase = require("firebase");
firebase.initializeApp(config);

// Log user in
exports.login = (req, res) => {
    const user = {
      email: req.body.email,
      password: req.body.password,
    };
    
    firebase
      .auth()
      .signInWithEmailAndPassword(user.email, user.password)
      .then((data) => {
        console.log(JSON.stringify(data));
        return data.user.getIdToken();
      })
      .catch((err) => {
        console.error(err);
      });
  };
app.post('/login', login);


the rules

enter image description here

I want only a logged in user to use the getRealtimeUsers function, but even if the logged in user does not work. That's my problem.

I do not know at all how to solve it



from Even if the user is logged in, I get an error

No comments:

Post a Comment