React / Firebase Google登錄不起作用，但沒有錯誤

Question

我在這里跟着這個Facebook的登入教程- 網站 ，並試圖修改它做一個谷歌登入。

我最終得到的代碼是：

import React, { Component } from 'react';

// import provider and auth that we exported from src/client.js
import {provider, auth} from './client';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: null
    }
  }

  async login() {
    const result = await auth().signInWithPopup(provider)
    console.log(result);
    this.setState({user: result.user});
  }

  async logout() {
    await auth().signOut()
    this.setState({user: null});
  }
  render() {
    const {user} = this.state
    console.log(this.state.user);
    return(
      <div className="app">
        <p>{user ? `Hi, ${user.displayName}!` : 'Hi!'}</p>
        <button onClick={this.login.bind(this)}>
          Login with Facebook
        </button>

        <button onClick={this.logout.bind(this)}>
          Logout
        </button>
      </div>
    );
  }
}

export default App;

和

import firebase from 'firebase';

// Initialize Firebase
var config = {
    apiKey: "My Info",
    authDomain: "My Info",
    databaseURL: "My Info",
    projectId: "My Info",
    storageBucket: "My Info",
    messagingSenderId: "My Info"
};


firebase.initializeApp(config);

export const ref = firebase.database().ref()
export const auth = firebase.auth
export const provider = new firebase.auth.GoogleAuthProvider();

我似乎在控制台中沒有收到任何錯誤，其余代碼未從create-react-app更改。 如果有人可以幫助我進行設置，我將非常感謝您的幫助。 我希望在完成后將其與redux集成在一起，但這可悲的是還有很長的路要走。

Answer 1

我覺得有些改進

import React, { Component } from 'react';

    // import provider and auth that we exported from src/client.js
    import {provider, auth} from './client';

    class App extends Component {
      constructor(props) {
        super(props);

        this.state = {
          user: null
        }
       this.login = this.login.bind(this);
       this.logout = this.logout.bind(this);
      }

      async login() {
        provider.setCustomParameters({ prompt: "select_account" });
        const result = await auth().signInWithPopup(provider)
        console.log(result);
        this.setState({user: result.user});
      }

      async logout() {
        await auth().signOut()
        this.setState({user: null});
      }
      render() {
        const {user} = this.state
        console.log(this.state.user);
        return(
          <div className="app">
            <p>{user ? `Hi, ${user.displayName}!` : 'Hi!'}</p>
            <button onClick={this.login())}>
              Login with Facebook
            </button>

            <button onClick={this.logout()}>
              Logout
            </button>
          </div>
        );
      }
    }

    export default App;