Working with multiple apps

Initializing multiple firebase apps and using them simultaneously with RSF is really easy.

The first step is to initialize the firebase.app.App instances themselves. This is well documented on the firebase docs website (which you should go and read right now if you haven't already 🙂) but here is a summary:

// Initializing the [DEFAULT] app (without a name):
const defaultApp = firebase.initializeApp({
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...'
})

// Initializing named apps:
const otherApp1 = firebase.initializeApp(app1Config, 'other1')
const otherApp2 = firebase.initializeApp(app2Config, 'other2')

The default app is accessible directly from the firebase object:

  • firebase.database() is the same as defaultApp.database()
  • firebase.auth() is the same as defaultApp.auth()
  • etc...

This behavious can get really confusing when using multiple apps so try not to use the firebase object and instead use the retuned app (defaultApp) in your code. That it's clear which app is being used. :)

Now that we have several app instances, using them with RSF is as easy as calling the ReduxSagaFirebase constructor on each of them:

const rsfDefault = new ReduxSagaFirebase(defaultApp)
const rsf1 = new ReduxSagaFirebase(otherApp1)
const rsf2 = new ReduxSagaFirebase(otherApp2)

// And then in your sagas:
function * saga () {
  // 👇Login the user using project1
  const user = yield call(
    rsf1.auth.loginWithPopup,
    provider
  )
  // 👇Save data in project2
  yield call(
    rsf2.firestore. setDocument,
    'collection/document',
    { user }
  )
}

See issue #98 for more details.