TypeError:在尝试React + Firebase Googel Auth时,this.addScope不是一个函数

时间:2017-09-28 10:09:42

标签: reactjs firebase firebase-authentication google-authentication

我正在尝试对我的反应应用程序进行Google身份验证。但不像我预期的那样运作良好。当用户单击Header上的登录按钮时,我想显示弹出窗口。需要帮助。

import firebase from 'firebase'

const config = {
  apiKey: "-",
  authDomain: "-",
  projectId: "-",
}

firebase.initializeApp(config);
export default firebase;

export const auth = firebase.auth(); //the firebase auth namespace
export const googleAuth = firebase.auth.GoogleAuthProvider();
googleAuth.addScope('email');
googleAuth.addScope('profile');

这是我的firebase配置。

import React from 'react';
import { Link } from 'react-router-dom';
import { auth, googleAuth } from '../firebase/conf.js'

class Header extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      user: null
    };
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);

  }

  handleLogin() {
  auth.signInWithPopup(googleAuth)
    .then((result) => {
      console.log(result);
      const user = result.user;
      this.setState({
        user
      });
    });
  }

  handleLogout() {
  auth.signOut()
    .then(() => {
      this.setState({
        user: null
      });
    });
  }

  render() {

    const loginButton = (
      <li>

          <i onClick={this.handleLogin} className="material-icons">vpn_key</i>

      </li>
   );

   const logoutButton = (
     <li>
       <a>
         <i className="material-icons">lock_open</i>
       </a>
     </li>
   );

    return (

      <nav>
        <div className="nav-wrapper blue darken-1">
            <Link to ="/" className="brand-logo center">{APP_NAME}</Link>

            <ul>
                <li><a><i className="material-icons">search</i></a></li>
            </ul>

            <div className="right">
                <ul>
                    { this.state.user ? logoutButton : loginButton }
                </ul>
            </div>
        </div>
    </nav>

    );
  }
}

export default Header;

和我的Header组件。

当我使用此代码运行我的应用程序时,它只显示TypeError: this.addScope is not a function错误。这是详细信息。

auth.js:136 Uncaught TypeError: this.addScope is not a function
    at Function.Bg (auth.js:136)
    at Function.a [as GoogleAuthProvider] (auth.js:292)
    at Object../src/firebase/conf.js (conf.js:17)
    at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
    at fn (bootstrap 68280f0003671cc3e57c:87)
    at Object../src/components/Header.js (Authentication.js:118)
    at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
    at fn (bootstrap 68280f0003671cc3e57c:87)
    at Object../src/components/index.js (index.js:1)
    at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
    at fn (bootstrap 68280f0003671cc3e57c:87)
    at Object../src/containers/Home.js (App.js:13)
    at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
    at fn (bootstrap 68280f0003671cc3e57c:87)
    at Object../src/containers/index.js (index.js:1)
    at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
    at fn (bootstrap 68280f0003671cc3e57c:87)
    at Object../src/index.js (conf.js:20)
    at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
    at fn (bootstrap 68280f0003671cc3e57c:87)
    at Object.0 (styles.css?1cd7:26)
    at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
    at bootstrap 68280f0003671cc3e57c:715
    at bundle.js:719

我该如何解决这个问题?真的需要你的帮助。

永远感谢!

1 个答案:

答案 0 :(得分:2)

GoogleAuthProvider示例所示,您需要使用新实例初始化auth提供程序。我认为您应该添加范围,然后导出AuthProvider。

实施例

import firebase from 'firebase'

const config = {
  apiKey: "-",
  authDomain: "-",
  projectId: "-",
}

firebase.initializeApp(config);
export default firebase;

export const auth = firebase.auth(); //the firebase auth namespace
const googleAuth = new firebase.auth.GoogleAuthProvider();
googleAuth.addScope('email');
googleAuth.addScope('profile');

export googleAuth;