未捕获的类型错误：_firebase__WEBPACK_IMPORTED_MODULE_0__.app.auth 不是函数答案

【问题标题】：Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_0__.app.auth is not a function未捕获的类型错误：_firebase__WEBPACK_IMPORTED_MODULE_0__.app.auth 不是函数
【发布时间】：2021-12-26 23:23:06
【问题描述】：

好吧，我一直在用 react redux 构建一个不和谐的克隆，现在我卡在登录页面上。它一直给我这个错误“Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_0_.app.auth is not a function”这是我在firebase.js中的代码

import { initializeApp } from "firebase/app";
import { getDatabase } from 'firebase/database';
import { getAuth } from "firebase/auth"
import { GoogleAuthProvider } from "firebase/auth";


const firebaseConfig = {
  apiKey: "AIzaSyD0RxEfG1qZ4Qsoelw5E6J0rIaJSP4BbXQ",
  authDomain: "diacromb.firebaseapp.com",
  projectId: "diacromb",
  storageBucket: "diacromb.appspot.com",
  messagingSenderId: "237625612351",
  appId: "1:237625612351:web:2527b57f858d5a4688008a",
  measurementId: "G-3DEREK47Q2"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const db = getDatabase(app);
const auth = getAuth();



const provider = new GoogleAuthProvider();

export {auth , app };
export {provider};
export default db;

这是我的 Login.js 代码

import { Button } from '@material-ui/core'
import {  auth, app } from './firebase'
import { provider } from './firebase'
import { signInWithPopup } from "firebase/auth"

import React from 'react'
import './Login.css'


function Login() {
   /* const signIn = () =>{
        const googleAuthProvider = new GoogleAuthProvider();
        app.auth().signInWithPopup(googleAuthProvider);    
       } */

        const signIn = ()=>{
            var google_provider = provider;
            
            app.auth().signInWithPopup(provider)
            .then((re)=>{
                console.log(re)
            })
            .catch((err)=>{
                console.log(err) 
            }) 
        }
    

    return (
        <div className='login'>
            <h2> I am the login page</h2>
            
          
            <Button onClick={signIn}>Sign In</Button>
        </div>
    );
    }



export default Login

我不知道发生了什么，我阅读了其他一些帖子，有人说要安装旧版本的 firebase，我尝试这样做，但仍然没有用。我已经为此困扰了将近 2 天了

【问题讨论】：

在您的 Login.js 中，您应该使用 signInWithPopup(auth, provider) 而不是 app.auth().signInWithPopup(provider)，正如您的问题的唯一答案中所指定的那样，文档中也提到了这一点。

标签： javascript reactjs firebase firebase-authentication

【解决方案1】：

我假设你使用的是 firebase 9。你必须使用 js 模块。

https://firebase.google.com/docs/web/modular-upgrade

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });

【讨论】：