1

I am new in firebase and reactjs.I am trying to get data from firestore.I searched about this problem but could not find any answer. I saw this page too.but not exist right answer react-redux-firebase not populating profile in firebase reducerenter image description here there are my codes.it seems right but do not work.index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {createStore, applyMiddleware, compose} from 'redux'
import rootReducer from "./store/reducers/rootReducer";
import {Provider} from 'react-redux'
import thunk from "redux-thunk";
import {reduxFirestore, getFirestore} from 'redux-firestore';
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase';
import fbConfig from './config/fbConfig'
import firebase from "firebase";

const store = createStore(rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, {userProfile: 'users', useFirestoreForProfile: true, attachAuthIsReady: true})
        )
);
store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(<Provider store={store}><App/></Provider>, document.getElementById('root'));
    serviceWorker.unregister();

})

and this is signIn class codes

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {signIn} from "../../store/actions/authActions";
import {Redirect} from 'react-router-dom'

class SignIn extends Component {
    state = {
        email: '',
        password: ''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.signIn(this.state);
    }

    render() {
        const {authError, auth} = this.props;
        if (auth.uid) return <Redirect to='/'/>
        return (
            <div className='container'>
                <form onSubmit={this.handleSubmit} className="white">
                    <h5 className='grey-text text-darken-3'>Sign In</h5>
                    <div className="input-field">
                        <label htmlFor="email">Email</label>
                        <input type="email" id='email' onChange={this.handleChange}/>
                    </div>
                    <div className="input-field">
                        <label htmlFor="password">Password</label>
                        <input type="password" id='password' onChange={this.handleChange}/>
                    </div>
                    <div className="input-field">
                        <button className='btn pink lighten-1 z-depth-0'>LogIn</button>
                        <div className="red-text center">
                            {authError ? <p>{authError}</p> : null}
                        </div>
                    </div>
                </form>
            </div>
        )
    }
};
const mapStateToProps = (state) => {
    return {
        authError: state.auth.authError,
        auth: state.firebase.auth
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        signIn: (creds) => dispatch(signIn(creds))
    }

}
export default connect(mapStateToProps, mapDispatchToProps)(SignIn)

sign in action

export const signIn = (credentials) => {
    return (dispatch, getState, {getFirebase}) => {
        const firebase = getFirebase();
        firebase.auth().signInWithEmailAndPassword(
            credentials.email,
            credentials.password
        ).then(() => {
            dispatch({type: 'LOGIN_SUCCESS'})
        }).catch((err) => {
            dispatch({type: 'LOGIN_ERROR', err})
        })
    }
};

authReducer codes

const initState = {};

const authReducer = (state = initState, action) => {
    switch (action.type) {
        case 'LOGIN_ERROR':
            console.log('login error')
            return {
                ...state,
                authError: 'LoginFailed'
            };
        case 'LOGIN_SUCCESS':
            console.log('login success')
            return {
                ...state,
                authError: null
            };
        case 'SIGNOUT_SUCCESS':
            console.log('signout success');
            return state;
        case 'SIGNUP_SUCCESS':
            console.log('signup success');
            return {
                ...state,
                authError: null
            };
        case 'SIGNUP_ERROR':
            console.log('signup error');
            return {
                ...state,
                authError: action.err.message
            };
        default:
            return state;
    }
    return state
}
export default authReducer

rootReducer

import authReducer from "./authReducer";
import projectReducer from "./projectReducer";
import {combineReducers} from 'redux'
import {firestoreReducer} from 'redux-firestore'
import {firebaseReducer} from "react-redux-firebase";

const rootReducer = combineReducers({
    auth: authReducer,
    project: projectReducer,
    firestore:firestoreReducer,
    firebase:firebaseReducer
});
export default rootReducer
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • It is unclear to me what doesn't work about the code. Please make sure that there is a single problem statement in the question, and that the question only contains the [minimum, complete/standalone code with which any one of us can reproduce the problem](http://stackoverflow.com/help/mcve) (read the link please, it's quite useful). – Frank van Puffelen Sep 18 '19 at 06:31
  • @setare-cheshmakzan have you solved it ? – Clyde Barrow Sep 03 '20 at 09:29

2 Answers2

0

Check your firestore security rules.

match /users/{user} {
    allow write: if request.auth != null;
    allow read: if request.auth != null;
}
prosoitos
  • 6,679
  • 5
  • 27
  • 41
0

add this in firestore rules

match /users/{user} {
    allow write 
    allow read: if request.auth.uid != null;
}

    allow write - allows everyone to create a new user by signing up
    allow read: if request.auth.uid != null - allows everyone who has logged
    in to read all other users