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.
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.
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>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With