グーグル ログイン機能を実装したい

Question

グーグルでのログイン機能実装を試みているのですが、

signinのボタンを押すと

TypeError: Cannot read property 'GoogleAuthProvider' of undefined

　のエラーが出ます

import React from "react";
import firebase from "firebase/app";

const SignIn = () => {
  const signInWithGoogle = () => {
    // Googleプロバイダオブジェクトのインスタンスを作成
    const provider = new firebase.auth.GoogleAuthProvider();
    // ポップアップウィンドウでログインを行う場合はsignInWithPopupを呼び出す
    firebase
      .auth()
      .signInWithPopup(provider)
      .then((user) => {
        alert("success : " + user.user.displayName + "さんでログインしました");
      })
      .catch((error) => {
        alert(error.message);
      });
  };

  return (
    <div>
      <div className="login">
        <h1>ログイン</h1>
      </div>
      <div className="signin_button">
        <img
          src="../btn_google_signin.png"
          onClick={() => signInWithGoogle()}
          alt="google signin"
        />
      </div>
    </div>
  );
};

export default SignIn;

調べたところimport を変えろとの記事があったので調べたのですがだめでした

import * as firebase from "firebase/app";
import "firebase/auth";

にすると

×
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

Answer 1

firebase.initializeAppが足りないですね

Answer 2

https://firebase.google.com/docs/reference/js/firebase.app.App
firebase.appのコンストラクタを直接呼び出さないで下さいとなっているようなので
firebase.initializeApp()をやってからならいけるんじゃないでしょうか

Answer 3

import firebase from "firebase/app";

ではなく

import * as firebase from 'firebase';

にしてはどうでしょうか(下記参照)？

• stackoverflow | TypeError: Cannot read property 'GoogleAuthProvider' of undefined

Comments

[tomsuma]

ご回答ありがとうございます
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
変わらず同じエラーです