Open eranhirs opened 6 years ago
@pablomorales92 reached out over gitter and mentioned he is trying to get this working as well.
Even though it is not ideal, dispatching the SET_PROFILE
action manually should help at least for login (based on example from firebaseui docs):
import { actionTypes } from 'react-redux-firebase'
initApp = function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var uid = user.uid;
var phoneNumber = user.phoneNumber;
var providerData = user.providerData;
user.getIdToken().then(function(accessToken) {
var profile = { displayName, email, emailVerified, photoURL, phoneNumber }
// Dispatch action here
dispatch({ type: actionTypes.SET_PROFILE, profile: userSnap.val() })
});
} else {
// User is signed out.
document.getElementById('sign-in-status').textContent = 'Signed out';
document.getElementById('sign-in').textContent = 'Sign in';
document.getElementById('account-details').textContent = 'null';
}
}, function(error) {
console.log(error);
});
}
It seems like a solution may be allowing passing in a firebase-ui instance as part of config, but more investigation is needed to determine if that is the best option.
I wrote a workaround: https://github.com/johnkmzhou/firebaseui-react-poc
@johnkmzhou Nice work! Its great to see an example. It may be easier if we made a proper integration, but in the meantime it would be great to include some of this in the docs.
Especially this part with the auth callback that calls createUserProfile
.
Feel free to provide a PR if you get to it. I am pretty busy at the moment, so probably won't have time that soon.
Something to note:
The firebaseConnect
HOC is only required if you are creating listeners (which it doesn't seem like you are doing), the profile
state is handled automatically by the userProfile
config.
I had to create my own createUserProfile
based off the one in auth.js of react-redux-firebase because I couldn't find a way to get react-redux-firebase to handle writing to the user collection even with the userProfile
config.
On a similar note, I am facing the same issue with Cordova (not using firebaseui, only react-redux-firebase) where I have to write my own createUserProfile
implementation because the way Cordova handles authentication redirects is different from browsers.
@johnkmzhou Thanks for the update. Especially because of what you are mentioning with cordova, we should expose a way to plug in to profile creation.
Just playing around with https://github.com/firebase/firebaseui-web-react several days ago, and got the same issues, and I think this might solve the issue.
handleRedirectResult
, since the authData is similar to what firebase-ui callbacks returned.handleRedirectResult
with the respond from callbacks.with this one, The issue should be solved.
nb: I'm using next branch btw, I don't really sure about the stable branch
// Firebase ui config
const fuiConfig = {
signInFlow: 'popup',
signInSuccessUrl: '/signedIn',
signInOptions: [this.props.firebase.auth.GoogleAuthProvider.PROVIDER_ID],
callbacks: {
signInSuccessWithAuthResult: (authResult, redirectUrl) => {
this.props.firebase.handleRedirectResult(authResult).then(() => {
this.props.history.push(redirectUrl);
});
return false;
},
},
};
// react-redux-firebase on createFirebaseInstance.js
const handleRedirectResult = authData =>
authActions.handleRedirectResult(dispatch, firebase, authData)
return Object.assign(firebase, {
...
handleRedirectResult,
...})
maybe this help, 😄
@dirathea Thanks for posting, it should be easy enough to add this to the docs.
Would love to see an example of how to integrate
react-redux-firebase
withfirebaseui-web
https://github.com/firebase/firebaseui-web