muk*_*nda 20 javascript firebase firebase-authentication next.js react-context
我创建了一个 Next.js 应用程序并使用 Firebase 身份验证。我使用 useContext 挂钩来管理应用程序中的用户状态。AuthContext的代码如下:
auth.js
import { createContext, useState, useEffect, useContext } from "react";
import { getAuth, onIdTokenChanged } from "firebase/auth";
const AuthContext = createContext({});
export const AuthProvider = ({children}) => {
const auth = getAuth();
const [user, setUser] = useState(null);
useEffect(() => {
return(onIdTokenChanged(auth, (user) => {
if(user) {
setUser(user);
} else {
setUser(null);
}
}))
},[]);
return(<AuthContext.Provider value={{user}}>{children}</AuthContext.Provider>);
}
export const useAuth = () => useContext(AuthContext);
Run Code Online (Sandbox Code Playgroud)
编辑:我已经在 firebaseConfig.js 中配置了 Firebase。其代码如下:
firebaseConfig.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
Run Code Online (Sandbox Code Playgroud)
小智 20
我刚刚遇到了同样的错误,我设法通过执行以下操作来解决此问题:
import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig{
...
}
Run Code Online (Sandbox Code Playgroud)
并像这样添加这些行:
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore();
export { auth, db };
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
40119 次 |
| 最近记录: |