1 firebase reactjs firebase-authentication next.js
我正在尝试通过 firebase 添加身份验证，但它给了我一个错误
类型错误：firebase_compat_app__WEBPACK_IMPORTED_MODULE_2__.default.default.auth 不是函数
这是所有验证代码
import Head from "next/head";
// var firebase = require("firebase");
import firebase from "firebase/compat/app";
import "firebase/auth";
import { useAuthState } from "react-firebase-hooks/auth";
import Reddit from "../components/Reddit";
firebase.initializeApp({
apiKey: "<api-key>",
authDomain: "<auth-domain>",
projectId: "<project-id>",
storageBucket: "<storage-bucket>",
messagingSenderId: "166670883433",
appId: "1:166670883433:web:f24816c8fe909b0f89e0f8",
});
const auth = firebase.default.auth();
const [user] = useAuthState(auth);
export default function Home() {
return (
<div className="h-screen bg-black text-white">
<Head>
<title>Reddit - Dive into anything!</title>
<link rel="icon" href="/logo.svg" />
</Head>
{user ? <Reddit /> : <SignIn />}
</div>
);
}
function SignIn() {
const signInWithGoogle = () => {
const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider);
};
return (
<div>
<button onClick={signInWithGoogle}>Sign in with google</button>
</div>
);
}
// export default App;
谁能帮我这个。谢谢！
这是我的 Reddit.js
import Trending from "./trending/Trending";
function Reddit() {
return (
<div>
<Trending />
</div>
);
}
export default Reddit;
这是我的 package.json 文件
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@emotion/react": "^11.6.0",
"@emotion/styled": "^11.6.0",
"@heroicons/react": "^1.0.5",
"@mui/icons-material": "^5.2.0",
"@mui/material": "^5.2.1",
"firebase": "^9.5.0",
"firebase-admin": "^10.0.0",
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^4.0.1"
},
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.5",
"tailwindcss": "^2.2.4"
}
}
这条线给你带来了这个问题。
const auth = firebase.default.auth();
您似乎正在混合 v9Modular和Compat库类型之间的语法。
您可以使用getAuth以下方法获取它firebase/auth
例子：
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
initializeApp({
// Provide the app config
});
const auth = getAuth();
Compat是一个支持 v8 旧 SDK 结构的库。
例子：
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
firebase.initializeApp({
// Provide the app config
});
const auth = firebase.auth();
注意：firebase/compat/在 v9 中提供了一个熟悉的 API 接口，与 v8 SDK 完全兼容，但将来会被删除。因此，我鼓励您升级以使用新的模块化 API 界面。查看更多
注2：我看到你已经firebase-admin在你的项目中安装了。不应firebase-admin安装在前端，因为它设计用于管理后端的 Firebase 项目，这需要 Firebase 项目的最高权限。
| 归档时间： |
|
| 查看次数： |
3114 次 |
| 最近记录： |