1

I've set some config variables using the command firebase functions:config:set algolia.appid="app_id" algolia.apikey="api_key", but how do I utilize them in my Flutter app? I have firebase_core installed.

In TypeScript you would write the following:

import * as admin from 'firebase-admin';

admin.initializeApp();
const env = functions.config();
console.log(env.algolia.appid);

But what about in Dart and Flutter?

Thanks

2
  • What do you want to use? Firestore DB or something else? Jul 19, 2019 at 22:05
  • Using Algolia. Firestore configurations wouldn't be done this way.
    – zee
    Jul 20, 2019 at 18:41

2 Answers 2

1

The configuration variables you set through firebase functions:config:set are (as the command implies) available only in Cloud Functions. They're not in any way propagated to client-side application by this command. In general that'd be an anti-pattern, as such configuration variables are often used for keeping trusted credentials.

If you have a use-case where the value needs to be available in the client-side application too, you have a few ways to do that:

  1. Create an additional Cloud Functions endpoint where you expose the value of the configuration variable. Typically this would be a HTTPS or Callable function, which you then call from your client-side code.

  2. Push the value into another place where your application code can read it from at the same time that you call firebase functions:config:set. This could be a configuration file of your app, or even a .dart file that you generate.

4
  • In that case, would I just hard code appIDs and APIkeys into my application and commit those to Github as well? That's obviously not recommended, so I'm wondering what the workaround is.
    – zee
    Jul 20, 2019 at 18:43
  • It depends: if the API key is meant to be a secret, you should not use it in your client at all. Jul 20, 2019 at 21:49
  • Thanks for your response. They are meant to be secret, so that's why I don't want to hard code anything into the client. Not sure how to utilize API keys in flutter.
    – zee
    Jul 21, 2019 at 16:54
  • If you want them to remain secret, it's not just about not having them in the code, it's about not using them from the client at all. You'll typically want to isolate the functionality that requires the secret key in server-side code in that case, where only you can see them, expose that code as a custom API that your app can call, and secure access to that custom API. Jul 21, 2019 at 17:03
0

I also ran into this problem and found myself on this S.O. thread. I tried following Frank van Puffelen's suggestion above.

In functions/.runtimeconfig.json:

{
  "algolia": {
    "appid": "ID",
    "apikey": "KEY"
  },
  "webmerge": {
    "key": "KEY",
    "secret": "SECRET",
    "stashkey": "STASH_KEY"
  },
}

In functions/index.ts:

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
. . .

const cors = require('cors')({origin: true})
const envObj = functions.config()

. . .

export const getEnv = functions.https.onRequest((req, resp) => {
  cors(req, resp, () => resp.status(200).send(JSON.stringify(envObj)));
});

. . .

NOTE: I used the cors package to get around CORS errors when working locally. I would get these errors when localhost:5000 (Emulator hosting) called localhost:5001 (Emulator functions).

In web_flutter/main.dart:

Future<Map<String, dynamic>> fetchEnv(String functionsURL) async {
  var response = await http.get('${functionsURL}/getEnv');
  return json.decode(response.body);
}

Future<void> main() async {
  try {
    var functionsURL = 'FUNCTIONS_URL';
    var app = fb.initializeApp(firebase app details);
    if (window.location.hostname == 'localhost') {
      app.firestore().settings(Settings(
            host: 'localhost:8080',
            ssl: false,
          ));
      functionsURL = 'http://localhost:5001';
    }

    var env = await fetchEnv(functionsURL);

    var searchClient = Algolia.init(
        applicationId: env['algolia']['appid'],
        apiKey: env['algolia']['apikey']);

    runApp(MyApp(
        repository: Repository(app.firestore(), searchClient),
        authentication: Authentication(app.auth())));
  } on fb.FirebaseJsNotLoadedException catch (e) {
    print(e);
  }
}

Once I confirmed that this was working locally, I was able to use firebase functions:config:set to set this data in the live Functions environment and deploy my updated hosting and functions with firebase deploy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.