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.

What is the error message when you try and run the code with the UI call back? — Paul McLoughlin, Mar 08 '18 at 20:40

score 9 · Answer 1 · answered Apr 29 '18 at 20:18

9

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.

answered Apr 29 '18 at 20:18

Jeff Bergman

91
3

Can you add some more detail, your answer is unclear. – Apr 29 '18 at 20:31
4

He means that the `firebaseui.auth.CredentialHelper.NONE` constant's value is the string litteral "none". So you can simply replace the constant (that implicitly forces you to require some more stuff) by its value. – Rafik Tighilt Apr 29 '18 at 22:11
That is what I mean. Thanks again Rafik. – Jeff Bergman Apr 30 '18 at 22:13
1

so instead of, firebaseui.auth.CredentialHelper.NONE, just use 'none' – SeanMC Nov 06 '19 at 15:26

score 6 · Answer 2 · answered Jan 27 '19 at 07:26

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

}

This is the correct answer, no need to import firebaseui again just for firebaseui.auth.CredentialHelper.NONE ... since its value is just 'none'. — SeanMC, Nov 06 '19 at 15:25

score 5 · Accepted Answer · answered Mar 08 '18 at 21:25

5

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

yarn add firebaseui
import firebaseui from 'firebaseui'
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.

answered Mar 08 '18 at 21:25

Rafik Tighilt

2,071
1
15
27

Rafik, functionally no problem with your solution but wouldn't importing `firebaseui` into your code just for the constant unnecessarily bloat your package size? Seems overkill. Haven't found a good solution myself. – Shai Ben-Tovim May 23 '18 at 18:09
Yes it is overkill. Jeff Bergman's answer solves that problem. – Rafik Tighilt May 24 '18 at 02:33

Paul McLoughlin · Answer 4 · 2018-03-08T21:07:56.843

1

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

edited Mar 08 '18 at 21:07

answered Mar 08 '18 at 20:41

Paul McLoughlin

2,279
2
18
24

I tried this, but how can I add the property `credentialHelper` ? There is still no effect sadly. – Rafik Tighilt Mar 08 '18 at 21:04
What is the error message you're getting when you make the changes? – Paul McLoughlin Mar 08 '18 at 21:08
I don't have any error message, it just doesn't do anything – Rafik Tighilt Mar 08 '18 at 21:18
You say you haven't imported Firebase UI, have you tried that also? – Paul McLoughlin Mar 08 '18 at 21:21
I just found a solution, I'm updating the post. Thanks :) – Rafik Tighilt Mar 08 '18 at 21:21

Disable account chooser FirebaseUI React

4 Answers4

Linked