[英]Firebase Google Authentication Constructor undefined Error
Soo.苏。 I have been trying to implement Firebase google auth in my project, Unfortunately I ran into the following error on the console
我一直在尝试在我的项目中实现 Firebase google auth,不幸的是我在控制台上遇到了以下错误
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'constructor')
at _assertInstanceOf (assert.ts:101:1)
at signInWithPopup (popup.ts:86:1)
at signInWithGoogle (App.js:52:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
at executeDispatch (react-dom.development.js:9041:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
at processDispatchQueue (react-dom.development.js:9086:1)
The Code goes as followed代码如下
import React from "react";
import { initializeApp } from "firebase/app";
import { getAuth , GoogleAuthProvider , signInWithPopup } from "firebase/auth"
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
function Home() {
const [user] = useAuthState(auth);
return (
<div className="App">
<header>Welcome to PixShare</header>
<h1>
Home
<section>
{user ? <Home /> : <SignIn />}
</section>
</h1>
</div>
);
}
const SignIn = () => {
const signInWithGoogle = () => {
const provider = new GoogleAuthProvider();
signInWithPopup(provider)
}
return (
<button onClick={ signInWithGoogle }>
Sign In With Google
</button>
);
};
export default Home;
Can someone help me with what went wrong?有人可以帮我解决问题吗? The package.json file is as shown below
package.json文件如下图
{
"name": "pixshare",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"firebase": "^9.9.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-firebase-hooks": "^5.0.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Does anyone know where I went wrong?有谁知道我哪里出错了? Could really use some help
真的可以使用一些帮助
The signInWithPopup()
function takes an Auth
instance as the first argument. signInWithPopup()
function 将Auth
实例作为第一个参数。
So the signInWithPopup(provider)
function should be signInWithPopup(auth, provider)
所以
signInWithPopup(provider)
function 应该是signInWithPopup(auth, provider)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.