javascript - 我怎样才能从firebase访问react中的当前用户？

Question

我可能对 firebase 在这里试图做什么有点困惑。我可以让用户使用现有的 firebase 代码登录我的网站，但是当我尝试以任何形式访问该用户的用户名时(这样我就可以在屏幕上打印出来)，我不什么也得不到。

我的React应用程序的文件结构是index.jsx，它加载Login.jsx。 Login.jsx 如下所示:

import React from 'react';
import axios from 'axios';
import * as firebase from 'firebase';



class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {email: '', password: ''};
    this.engageLogin = this.engageLogin.bind(this);
    var config = {
      apiKey: "-------------------",
      authDomain: "--------.firebaseapp.com",
      databaseURL: "https://------.firebaseio.com",
      projectId: "-------",
      storageBucket: "-------.appspot.com",
      messagingSenderId: "------------"
    };
    firebase.initializeApp(config);
  }


  engageLogin (event) {
    var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result) {
    // This gives you a Google Access Token.
    var token = result.credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    });
    event.preventDefault();
  }

  render() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log('This is the user: ', user)
      } else {
        // No user is signed in.
        console.log('There is no logged in user');
      }
    });
    return (
      <div>
        <div className="container">
          <h2 className="title"> Stream Labs </h2>
          <form onSubmit={this.engageLogin}>
            <div className="form-group row">
                <div type="submit" className="g-signin2">Sign in</div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Login;

据我了解，每当用户登录时， firebase.auth().onAuthStateChanged 应该会触发并 console.log ，但我只收到“没有登录的用户”消息。有人能指出我正确的方向吗？

Answer 1

这将显示当前用户的电子邮件。

    import React from 'react';
    import firebase from "firebase/app";
    import "firebase/auth";
        
    class Profile extends React.Component {
       render () {
          let user = firebase.auth().currentUser;
             return (
                 <p> I'm the current user: {user.email} </p>
             );
       }
    }
        
   export default Profile;

但是，如果您想显示当前用户的名称，则必须使用 Firebase 的其他身份验证方法，例如； Google 登录、Facebook 登录、twitter、电话号码等，但不使用密码身份验证。