Question

我很喜欢在这里和那里浏览任何解决方案。得到了几个答案，但到目前为止还没有成功。我正在使用React使用Firebase oAuth通过fb，google和github进行身份验证。我的主页组件上有一个登录按钮：

  <Button  onClick={this.togglePop}><strong>Login</strong></Button>
  {this.state.seen ? <PopUp toggle={this.togglePop} /> : null}

单击此登录按钮后，它将加载Popup.js，这将创建一个弹出窗口：

import React,{Component} from 'react'
import { GithubLoginButton } from 'react-social-login-buttons'
import GitHubLogin from 'react-github-login'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import Facebook from './Facebook'
import Github from './Github'
import Firebase from './Firebase'

import {
faYoutube,
faFacebook,
faTwitter,
faGithub,
faLinkedin,
faWordpress,
faStackOverflow,
faInstagram
} from "@fortawesome/free-brands-svg-icons"



class PopUp extends Component {

handleClick = () => {
 this.props.toggle();
};  

render() {
return (
  <div className='popup'>
  <div className='popup_inner'>
    <h1>{this.props.text}</h1>
    <button onClick={this.handleClick}>close me</button>
    <div>
      <Firebase />
    </div>

  </div>
</div>
);
}
}

export default PopUp

到目前为止，我得到了登录屏幕。单击后，说Facebook登录其打开另一个窗口并询问权限。权限步骤完成后，其重定向回到相同的弹出窗口。

以下是Firebase组件的以下代码：

import React, {Component} from 'react'
import firebase from 'firebase'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
import UserHome from './UserHome'
import ContactPage from '../pages/ContactPage'


firebase.initializeApp({
apiKey: '<FIREBASE_API_KEY>',
authDomain:'myapp-firebase-auth.firebaseapp.com'
})

class Firebase extends Component{

state = { isSignedIn: false }
uiConfig = {
  signInFlow: "popup",
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  signInSuccessUrl: '/signedIn',
  callbacks: {
    signInSuccessWithAuthResult: (authResult, redirectUrl) => {
        console.log('signInSuccessWithAuthResult', authResult, redirectUrl);
        this.props.history.push({ContactPage});
        return false
    }
  }
}

componentDidMount = () => {
  firebase.auth().onAuthStateChanged(user => {
    this.setState({ isSignedIn: !!user })
    console.log("user", user)
  })
}

render(){
    return (
        <div>
        {this.state.isSignedIn ? (
          <UserHome />
        ) : (
          <StyledFirebaseAuth
            uiConfig={this.uiConfig}
            firebaseAuth={firebase.auth()}
          />
        )}
      </div>
    )


}

}

export default Firebase

即使我使用'signInSuccessWithAuthResult'进行重定向，它也不会加载此处提到的组件this.props.history.push（{ContactPage}。虽然在成功渲染后仍在同一弹出窗口中。如何重定向它到另一个呈现的新页面吗？在此先谢谢。

在React中使用Firebase成功进行身份验证时不会发生重定向

0 个答案: