TypeError: _functions.default.config is not a function

Question

I have deployed some environment variables using Firebase Cloud Functions following this guide.

I am using React Native Firebase and want to access the environment variables. In the Firebase docs it says you can access the variables in the following way:

const functions = require('firebase-functions');
const request = require('request-promise');

exports.userCreated = functions.database.ref('/users/{id}').onWrite(event => {
  let email = event.data.child('email').val();

  return request({
    url: 'https://someservice.com/api/some/call',
    headers: {
      'X-Client-ID': functions.config().someservice.id,
      'Authorization': `Bearer ${functions.config().someservice.key}`
    },
    body: {email: email}
  });
});

In the React Native Firebase docs, it says import and use Firebase functions like this:

import functions from '@react-native-firebase/functions';

function App() {
  const [loading, setLoading] = useState(true);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    functions()
      .httpsCallable('listProducts')()
      .then(response => {
        setProducts(response.data);
        setLoading(false);
      });
  }, []);

Notice the difference in import.

My code is as follows:

import functions from '@react-native-firebase/functions';

const id = functions.config().xyz.id;
const key = functions.config().xyz.key;

I am getting an error thrown which is:

TypeError: _functions.default.config is not a function

All packages seem to be installed correctly - my versions are as follows:

    "@react-native-firebase/app": "^6.3.0",
    "@react-native-firebase/auth": "^6.3.0",
    "@react-native-firebase/crashlytics": "^6.3.0",
    "@react-native-firebase/firestore": "^6.3.0",
    "@react-native-firebase/functions": "^7.1.0",
    "@react-native-firebase/messaging": "^6.3.0",

Where am I going wrong and how can the Firebase Cloud Functions be combined with React Native Firebase to obtain deployed environment variables?

Update

I have updated all RNFB packages to v 7.1.0 but am still having the same problem.

Answer 1

As explained in the doc the @react-native-firebase/functions module "provides the functionality to directly trigger deployed HTTPS Callable functions".

In other words, this module is used to call, from your front-end, some Cloud Functions which are executed in the back-end, in Firebase/Google Cloud infrastructure.

On the other hand, retrieving some Cloud Function environment variables can only be done in the Cloud Function, in the back-end.

So you cannot use functions.config() in your React code, which is executed in the front-end. You can only do that in the Cloud Function code, executed in the back-end.

---

What you could do, in the callable Cloud Function, is to return to the front-end (the caller, or consumer) the environment variables retrieved in the Cloud Function.

Something along the following lines:

Callable Cloud Function

exports.getEnvVariable = functions.https.onCall((data, context) => {
  const serviceId = functions.config().someservice.id;

  return { serviceId };
});

React Front-end

import functions from '@react-native-firebase/functions';

function App() {
  const [loading, setLoading] = useState(true);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    functions()
      .httpsCallable('getEnvVariable')()
      .then(response => {
         const serviceId = response.data.serviceId;
      });
  }, []);