Disable account chooser FirebaseUI React

Question

I'm struggling with something that looks like a piece of cake, but I still can't manage to find a solution.

I'm implementing a firebase authentication process, with reactjs and firebaseUI web react. Everything is just fine, except the fact that when I try to login using email/password, it takes me to accountchooser, which is a behavior I don't want.

I searched the docs, github issues etc... But All I found was adding the line below in the uiConfig object :

credentialHelper: firebaseui.auth.CredentialHelper.NONE

The problem is that react throws an error complaining about firebaseui not being defined, and it's pretty normal I guess because I never imported it.

I found a hint while browsing, telling to pass a uiCallback prop to the component, but I am not able to figure it out.

So far, here is my code :

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>
        );
    }

} 

I don't even know if I am trying the right thing. Any help will be appreciated.

Answer 1

Thanks, Rafik! I've been looking for a solution to this for hours.

It turns out that firebaseui.auth.CredentialHelper.NONE === 'none', so I'm using that instead of importing the extra firebaseui.

I don't love either solution (importing extra stuff or using the constant's underlying value), and I certainly wish they'd include that constant in react-firebaseui.

Answer 2

Well, for those it may help, I found a solution to that problem.

1. yarn add firebaseui
2. import firebaseui from 'firebaseui'
3. set credentialHelper: firebaseui.auth.CredentialHelper.NONE in the uiConfig object.

I don't know if installing firebaseui over firebaseUI web react is something good, but it solved my problem.

Answer 3

Try making the uiConfig a property of the SignInScreen class, then referring to the callback using this.uiConfig when you pass it to the component

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>
        );
    }

} 

This is based on the example provided here

Answer 4

This worked for me: According to the comments above, add credentialHelper beneath your signInOptions Array in uiConfig. Full code below:

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>
        );
    }

}