Search code examples
reactjsfirebasefirebase-authenticationfirebaseui

Disable account chooser FirebaseUI React


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.


Solution

  • 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.