禁用帐户选择器 FirebaseUI React

IT技术 reactjs firebase firebase-authentication firebaseui
2021-05-13 13:33:36

我正在为看起来像小菜一碟的东西而苦苦挣扎，但我仍然无法找到解决方案。

我正在使用 reactjs 和 firebaseUI web react实现 firebase 身份验证过程。一切都很好，除了当我尝试使用电子邮件/密码登录时，它会带我到accountchooser，这是我不想要的行为。

我搜索了文档、github 问题等......但我发现的只是在uiConfig对象中添加以下行：

credentialHelper: firebaseui.auth.CredentialHelper.NONE

问题是 react 会抛出一个错误，抱怨 firebaseui 没有被定义，我想这很正常，因为我从来没有导入过它。

我在浏览时发现了一个提示，告诉将一个uiCallbackprop传递给组件，但我无法弄清楚。

到目前为止，这是我的代码：

import React, { Component } from 'react';
import '../App.css';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import * as firebase from 'firebase'

const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '/signedIn',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
};

export default class SignInScreen extends Component {

    render() {
        return (
            <div>
            <h1>My App</h1>
            <p>Please sign-in:</p>
            <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
            </div>
        );
    }

}

我什至不知道我是否在尝试正确的事情。任何帮助将不胜感激。

4个回答

谢谢，拉菲克！几个小时以来，我一直在寻找解决方案。

结果是firebaseui.auth.CredentialHelper.NONE=== 'none'，所以我使用它而不是导入额外的 firebaseui。

我不喜欢任何一种解决方案（导入额外的东西或使用常量的潜在值），我当然希望他们将这个常量包含在 react-firebaseui 中。

这对我有用：根据上面的评论，在 uiConfig 中的 signInOptions 数组下方添加 credentialHelper。完整代码如下：

import React, { Component } from 'react';
import '../App.css';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import * as firebase from 'firebase'

const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '/signedIn',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    credentialHelper: 'none'
};

export default class SignInScreen extends Component {

    render() {
        return (
            <div>
            <h1>My App</h1>
            <p>Please sign-in:</p>
            <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
            </div>
        );
    }

}

好吧，对于那些可能有帮助的人，我找到了解决该问题的方法。

  1. yarn add firebaseui
  2. import firebaseui from 'firebaseui'
  3. credentialHelper: firebaseui.auth.CredentialHelper.NONE在 uiConfig 对象中设置。

我不知道通过 firebaseUI web react 安装 firebaseui 是否好用，但它解决了我的问题。

尝试创建 的uiConfiga 属性SignInScreen class，然后this.uiConfig在将其传递给组件时使用它来引用回调

import React, { Component } from 'react';
import '../App.css';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import * as firebase from 'firebase'

export default class SignInScreen extends Component {

  uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '/signedIn',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    'credentialHelper': firebaseui.auth.CredentialHelper.NONE
};

    render() {
        return (
            <div>
            <h1>My App</h1>
            <p>Please sign-in:</p>
            <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
            </div>
        );
    }

}

这是基于此处提供的示例

其它你可能感兴趣的问题
上一篇是什么导致打印热量“抓住”部件？ 下一篇使用较小喷嘴的缺点和后果是什么？