feat(integrations): firebaseui-web

[eranhirs]

Would love to see an example of how to integrate react-redux-firebase with firebaseui-web https://github.com/firebase/firebaseui-web

[prescottprue]

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

[johnkmzhou]

I wrote a workaround: https://github.com/johnkmzhou/firebaseui-react-poc

[prescottprue]

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

[johnkmzhou]

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.

[prescottprue]

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

[dirathea]

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.

1. I think we need to export handleRedirectResult, since the authData is similar to what firebase-ui callbacks returned.
2. Stop redirect and call 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, 😄

[prescottprue]

@dirathea Thanks for posting, it should be easy enough to add this to the docs.