feat(auth): expose signInAndRetrieveDataWithCredential method which dispatches actions

[dancomanlive]

Do you want to request a feature or report a bug?
A bug

What is the current behavior?
When I log in the the user profile is not stored automatically in Firestore according to useFirestoreForProfile option.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.

I do not want to eject so I am using firebase from the Web SDK.

import * as firebase from 'firebase'
import ApiKeys from '../api/ApiKeys'
import "firebase/firestore"


firebase.initializeApp(ApiKeys)
firebase.firestore().settings({ timestampsInSnapshots: true })

export default firebase

const createStoreWithFirebase = compose(
  reactReduxFirebase(firebase,
    {
      rn: ReactNative,
      userProfile: 'users',
      useFirestoreForProfile: true,
      enableLogging: false,
      enableRedirectHandling: false
      // attachAuthIsReady: true
    }),
  reduxReset(),
  reduxFirestore(firebase)
)(createStore)

I use Rematch library

export const store = init({
  models,
  plugins: [persistPlugin, loadingPlugin],
  redux: {
    createStore: createStoreWithFirebase,
    reducers: {
      firebase: firebaseReducer,
      firestore: firestoreReducer
    }
  }
});

Login.js (this.props.firebase comes from react-redux-firebase)

async loginWithFacebook() {
    const data = await Expo.Facebook.logInWithReadPermissionsAsync('1132153153121515', { permissions: ['public_profile', 'email'] }
  
    if (data.type === 'success') {
      const creds = this.props.firebase.auth.FacebookAuthProvider.credential(data.token)
      await this.props.firebase.auth().signInAndRetrieveDataWithCredential(creds)
    }
    this.props.navigation.navigate('Dashboard')
  }

What is the expected behavior?

There should be a users collection in Firestore named after the userProfile configuration setting in createStoreWithFirebase().

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?
I am using all the latest versions of everything.

Note: everything else works as expected.

[prescottprue]

Calling signInAndRetrieveDataWithCredential directly from firebase.auth() does not dispatch any profile actions.

There will need to be a method exposed for calling this auth method with automatic profile dispatches afterword, but in the meantime you should be able to use updateProfile (outlined here in the docs):

async loginWithFacebook() {
    const data = await Expo.Facebook.logInWithReadPermissionsAsync('1132153153121515', { permissions: ['public_profile', 'email'] }
  
    if (data.type === 'success') {
      const creds = this.props.firebase.auth.FacebookAuthProvider.credential(data.token)
      await this.props.firebase.auth().signInAndRetrieveDataWithCredential(creds)
      // call profile update after login to write data to profile
      const profile = { email: creds.email }
      await this.props.firebase.updateProfile(profile)
    }
    this.props.navigation.navigate('Dashboard')
  }

[dancomanlive]

@prescottprue ok I get it thanks! thought it would work out of the box("If you would like to have your users profiles go to Firestore instead of Real Time Database, you can enable the useFirestoreForProfile option when making store creator" - http://react-redux-firebase.com/docs/firestore.html) : )

data object has the following keys: expires, token, type
creds object has the following keys: accessToken, providerId, signInMethod

The user data is available in the response from await this.props.firebase.auth().signInAndRetrieveDataWithCredential(creds)

...
 const response = await this.props.firebase.auth().signInAndRetrieveDataWithCredential(creds)
 const { name, email } = response.additionalUserInfo.profile
 await this.props.firebase.updateProfile({ name, email })

[prescottprue]

@dancomanlive In order for it to "work out of the box" actions need to be dispatched, so I am going to reopen so we can track adding a top level method for it, since as you pointed out from the docs, that is the goal.

Thanks for reporting!

[dancomanlive]

@prescottprue Great initiative :)

[dancomanlive]

@prescottprue I discovered this works out of the box:

async loginWithFacebook() {
    const data = await Expo.Facebook.logInWithReadPermissionsAsync('FB_ID', { permissions: ['public_profile', 'email'] })

    if (data.type === 'success') {
      const credential = this.props.firebase.auth.FacebookAuthProvider.credential(data.token)
      await this.props.firebase.login({ credential })
    }
  }

The actions shown in the remote debugger:

@@reactReduxFirebase/LOGIN_ERROR 

(in the remote debugger's Diff I see: firebase: { errors: [ 0: null ]} )

@@reactReduxFirebase/LOGIN

(populates firebase.auth with user data and sets firebase.profile.isLoaded from true to false)

@@reactReduxFirebase/SET_PROFILE 

(sets firebase.profile.isLoaded from false to true)

@@reactReduxFirebase/SET_PROFILE 

(populates firebase.profile with user data)

[prescottprue]

@dancomanlive great to know, thanks for posting. Most likely going to update the docs to show this