为什么我不能通过firebase认证

Question

我用redux-thunk在react-redux(w钩子(中做一个项目。说到这里，我想使用某种帐户身份验证。我选择使用Firebase是因为它很受欢迎。所以我开始在yt上学习忍者过时的课程。知道了这一点，我正在检查firebase的文档，关于如何使用redux thunk进行身份验证。现在我说到点子上，当我试图登录我的firebase时，我会得到以下错误："；Firebase实例尚不存在。检查您的合成函数">

这里描述了一个类似的问题，但这很容易(当然…(：所以链接

我只能假设问题出在我的store.js中的compose函数中。只是，我做的每件事都是照本宣科的(或者至少我是这么认为的(：http://docs.react-redux-firebase.com/history/v3.0.0/docs/getting_started.html似乎没有什么帮助。

也许有一个全新的人可以检查我的代码并告诉我，我在哪里犯了错误。

既然我知道错误在store.js中，我就从它开始：

---

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;

---

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将上述文件导入我的index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from "react-router-dom";
import store from './store';
import App from './components/App/App';
import firebase from "firebase/app";
import "firebase/auth"
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这里我还有一个问题，因为当我在互联网上查看时，很多人只有一个文件，那就是处理名为auth的身份验证请求(登录、注销或注册((至少在root reducer中是这样，比如auth:authReducer(。我把我的逻辑分成了3个单独的文件。现在我想知道，我是否可以这样做，或者我应该也有一个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."
});
}
};

---

component/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;

当我检查console.log(fbConfig(时，我看到firebase配置I已初始化(API_KEY等(。此外，在我的action/getSignin.js文件中，我可以console.log我的登录名和密码，并检查它们是否已传入。但是我得到了一个错误，因为我的API_KEY丢失了。

我将API_KEY值与Firebase给出的值进行了双重检查，它们确实匹配。

我没有主意了。请帮助

Answer 1

所以我遇到了这个问题。

我将我的API_KEY值等存储在.env.local文件中。事实证明，如果我直接把它们写在fbConfig文件中，那么一切都会正常工作。不知道为什么，因为在我以前的应用程序中，我做了同样的事情，而且效果很好。此外，我还可以从index.js中的.env.local文件中console.log注销这些值。但不知何故，它们没有初始化。

现在一切都很好。