Firebase SDK autoconfiguration

[OlivierVoyer]

H there,

First, thanks for this amazing product that is really powerful and easy to use.

I was wondering how possible it was to use Firebase Hosting SDK auto configuration (https://firebase.google.com/docs/hosting/reserved-urls#sdk_auto-configuration) to avoid having to put the Firebase config object directly in code. That would allow to deploy the code to different Firebase apps without having to care about multiple configuration files.

I noticed the feature to set an external Firebase App Instance but I must admit that I did not manage to retrieve the one from the Firebase scripts and send it to the react-admin-firebase options object.

I would appreciate any help or suggestions.

Thanks in advance

[adamf92]

You have to just fetch config from hosting special url:

const HOSTING_CONFIG_PATH = '/__/firebase/init.json';

const getConfigFromHosting = async () => {
  const response = await fetch(HOSTING_CONFIG_PATH);
  return await response.json();
};

Then you have just pass it to firebase.initializeApp(config) and FirebaseDataProvider / FirebaseAuthProvider.

[OlivierVoyer]

Thanks @adamf92 . I tried this indeed but didn’t managed to handle the async call to pass my own firebase app instance to the providers then. I’ll make new tries from your advice. Side question: I can’t test it directly from the demo project because of the /__/ not being resolved and have to build it first and then serve through firebase serve. Any other easy way to test directly from ‘npm run start’?

[adamf92]

I don't think it's possible (ok, everything is possible, but it will probably need many hours of workarounds), Firebase reserved urls existing only in firebase hosting or emulated hosting environment (firebase serve). I'm using standard config in file for local development and hosting urls for deployment

[davidstackio]

@OlivierVoyer I had this same issue with wanting to deploy to multiple projects/apps and also easily test locally.

What I ended up doing was using a .env.local file for local development and using CloudBuild + environment variables for the deployed app. It's actually pretty straightforward to set up. Plus you now have a CI/CD pipeline setup with CloudBuild!

.env.local file

REACT_APP_FIREBASE_API_KEY=DATA_FROM_FIREBASE_CONFIG_OBJECT
REACT_APP_FIREBASE_AUTH_DOMAIN=DATA_FROM_FIREBASE_CONFIG_OBJECT
REACT_APP_FIREBASE_PROJECT_ID=DATA_FROM_FIREBASE_CONFIG_OBJECT
REACT_APP_FIREBASE_STORAGE_BUCKET=DATA_FROM_FIREBASE_CONFIG_OBJECT
REACT_APP_FIREBASE_MESSAGE_SENDER_ID=DATA_FROM_FIREBASE_CONFIG_OBJECT
REACT_APP_FIREBASE_APP_ID=DATA_FROM_FIREBASE_CONFIG_OBJECT

Where DATA_FROM_FIREBASE_CONFIG_OBJECT is your project specific info from the Firebase console.

Firebase config object in your code

// Firebase project configuration
const config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

Note: For the latest version of Firebase you don't need to include the analytics. And you only need to include the databaseURL if you are using the realtime database (not Cloud Firestore).