FirebaseのGoogleAuthを使いたい

Question

FirebaseのFirebase Authenticationを用いてGoogleアカウントでのログイン機能を実装したいのですがつまずいております。

該当ソースコード

App.js

import React from 'react';
import Menu from './components/Menu';
import './App.css';
import firebase from 'firebase/app';
import "firebase/auth";


const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
}

firebase.initializeApp(firebaseConfig);

function App() {
  return (
    <div className="App">
     <Menu />
    </div>
  );
}

export default App;

<Menu />はreact-router-domによるページ遷移です。

そして遷移先のSignin.jsでログイン機能が欲しいです

import React, { Component } from 'react';
import firebase from 'firebase';


class Signin extends Component {
    constructor(props){
        super(props);
        this.signInWithGoogle = this.signInWithGoogle.bind(this);
    }

    signInWithGoogle() {
        const provider = new firebase.auth.GoogleAuthProvider()
        firebase
        .auth()
        .signInWithPopup(provider)
        .then(result => {
            console.log(result);
          });
    }

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

}

export default Signin

onClickの際にしているsignInWithGoogle()が何か間違っているのでしょうか？
現状はクリックしても何も起こりません

ぜひご教授いただけますと幸いです。
よろしくお願いいたします。

Answer 1

上記のSignin.js、私の環境では普通に動作しました。
firebaseConfigなどに誤りがあるのではないでしょうか。
以下が参考になります。
https://qiita.com/HorieH/items/8b4b1c4807e1eb6fcb0a

Comments

[tttttt_621_s]

ご回答ありがとうございます
.envにfirebaseのAPIキー などを記述して、App.jsでprocess.env.REACT_APP_FIREBASE_APIKEYとしていたのですが、process.env.REACT_APP_FIREBASE_APIKEYの部分を直接APIキーを記述したら動きました。
読み込まれていなかったようです