Hello,
am doing a project in react-redux (w hooks) and redux-thunk. Got to the point, where I wanted to use some kind of account authentication. I have chosen to use Firebase since it is popular and relative easy (haha… 
) to get to know it.
So I started to follow ninjas course on yt with outdated methods. But anyway a lot of his material is really valuable. And there is also a lot of documentation on how to get firebase working with the newest version. If I would just know, how wrong I was.
Anway, trying to get my app working since a week now and finally decided to get some help (yes, you guys, please).
So, when I try to login, I get either as return
Firebase instance does not yet exist. Check your compose function.
or my login attempt is just denied. I think, that it might have something to do with my firebase not getting initaliyed before I make a login attempt. But this is just an assumption.
I am also a bit confused. Since I dont know, if to get authenticated with firebase I would need the firestore to be initialized. Anyway, I try to login with login and password.
Maybe, if you could take a look at my code and tell me, what/where I made something wrong I would be very obliged.
So here it goes:
store.js
import { createStore, applyMiddleware} from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from 'redux-thunk';
import { getFirebase } from 'react-redux-firebase';
// import { getFirestore, reduxFirestore } from "redux-firestore";
import rootReducer from './reducers/rootReducer';
const middlewares = [
thunk.withExtraArgument({getFirebase})
];
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middlewares)));
export default store;
firebase config file → fbConfig.js
const fbConfig = {
apiKey: process.env.REACT_APP_FIREBASE_KEY,
authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
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
};
export default fbConfig;
I import the above posted files into the one below:
index.js
import fbConfig from "./config/fbConfig";
// import { createFirestoreInstance } from "redux-firestore";
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
import registerServiceWorker from "./registerServiceWorker";
console.log(fbConfig);
firebase.initializeApp(fbConfig);
//rrf stores authenticated users' data in Cloud Firestore
const rrfConfig = {
userProfile: "users",
// useFirestoreForProfile: true,
}
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
// createFirestoreInstance
}
ReactDOM.render(
<BrowserRouter>
<Provider store={store} >
<ReactReduxFirebaseProvider {...rrfProps} >
<App />
</ReactReduxFirebaseProvider>
</Provider>
</BrowserRouter>,
document.querySelector("#root")
);
registerServiceWorker();
rootReducer.js
Here I also have a question, because as I was checking on the internet, a lot of people had only one file, that was handling the authentication requests (sign in, sign Out or sign up) called auth (ot at least in the root reducer, like auth: authReducer). I have splitted my logic into 3 separate files. Now I wonder, if I can do this, or should I also have an auth reducer?
import { combineReducers } from 'redux';
import { firebaseReducer } from "react-redux-firebase";
import SigninReducer from "./auth/signinReducer";
import SignoutReducer from "./auth/signoutReducer";
import SignupReducer from "./auth/signupReducer";
const rootReducer = combineReducers({
firebase: firebaseReducer,
signin: SigninReducer,
signout: SignoutReducer,
signup: SignupReducer
});
export default rootReducer;
signinReducer.js
import { GET_SIGNIN_SUCCESS, GET_SIGNIN_ERROR } from "../../actions/index";
const DefaultState = {
authMsg: ""
};
const SigninReducer = (state = DefaultState, action) => {
switch (action.type) {
case GET_SIGNIN_ERROR:
console.log("login failed");
return {
...state,
authMsg: "Unable to login"
};
case GET_SIGNIN_SUCCESS:
console.log("login success");
return {
...state,
authMsg: "login success"
};
default:
return state
}
}
export default SigninReducer;
action/getSignin.js
import { GET_SIGNIN_ERROR, GET_SIGNIN_SUCCESS } from "../index";
export const getSignin = (credentials) => async (dispatch, getState, {getFirebase}) => {
console.log(credentials);
const firebase = getFirebase();
console.log(firebase);
try {
await firebase()
.auth()
.signInWithEmailAndPassword(credentials.email, credentials.password)
.then(() => {
dispatch({
type: GET_SIGNIN_SUCCESS
});
})
.catch((error) => {
dispatch({
type: GET_SIGNIN_ERROR,
error
});
});
} catch(e) {
dispatch ({
type: GET_SIGNIN_ERROR,
payload: "Invalid login credentials."
});
}
};
componet/userSignin.js
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { getSignin } from "../../actions/auth/getSignin";
const UserSign = () => {
const dispatch = useDispatch();
const [ userStatus, setUserStatus ] = useState ({
email: "",
password: ""
})
const handleSubmit = (event) => {
dispatch(getSignin(userStatus));
event.preventDefault();
}
const handleChange = (event) => {
const { id, value } = event.target;
setUserStatus({
...userStatus,
[id]: value
})
}
const showLogin = () => {
return (
<div>
<h4>Login</h4>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="email">Email address</label>
<input type="email" id="email" onChange={handleChange} required />
</div>
<div>
<label htmlFor="password">Your Password</label>
<input type="password" id="password" onChange={handleChange} required />
</div>
<button>Login</button>
</form>
</div>
)
}
return (
<div>
{showLogin()}
<Link to={"/signup"}><p>SignUp</p></Link>
<Link to={"/"}>Back</Link>
</div>
)
}
export default UserSign;
Also, when I do a console.log(fbConfig) in my index.js file I see, that firebase config file gets initialized (API_KEY, etc present). Also in my action/getSignin.js file I can console.log my login and password and check, that they are passed in there.
I double checked the KEY value with the one given by Firebase and they do match.
So I am out of ideas. Please help