Are Firebase functions a safe place to store API keys for a React App? As an example, see the following template for an axios API call in a Firebase Cloud function:

cloud function template

edit: added text code snippet. The question whether or not it is secure to store the API key directly in this snippet, given it's a firebase cloud function.

exports.getAlphaData = functions.https.onRequest((request, response) => {    

    const fetchAlphaData = async () => {        

        // Axios Call
        const result = await axios(
            ';symbol=SPY&XXXXXX',
        );

        // Expressjs Respond        
        response.send(result.data);

    };

    fetchAlphaData();

});

If this function were defined in the React App that would expose my API keys. React official docs among other sources say never use .env files for sensitive data, so I am setting aside that method for the keys as well. Where is the best place for a raw API key to actually reside within a full stack app?

Are Firebase functions a safe place to store API keys for a React App? As an example, see the following template for an axios API call in a Firebase Cloud function:

cloud function template

edit: added text code snippet. The question whether or not it is secure to store the API key directly in this snippet, given it's a firebase cloud function.

exports.getAlphaData = functions.https.onRequest((request, response) => {    

    const fetchAlphaData = async () => {        

        // Axios Call
        const result = await axios(
            'https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=SPY&XXXXXX',
        );

        // Expressjs Respond        
        response.send(result.data);

    };

    fetchAlphaData();

});

If this function were defined in the React App that would expose my API keys. React official docs among other sources say never use .env files for sensitive data, so I am setting aside that method for the keys as well. Where is the best place for a raw API key to actually reside within a full stack app?

• javascript
• reactjs
• firebase
• google-cloud-functions

Share Improve this question Follow edited Dec 3, 2020 at 18:32 Doug Stevenson 319k3636 gold badges456456 silver badges473473 bronze badges asked Dec 3, 2020 at 14:31 JacobJacob 3311 silver badge44 bronze badges 2

• 1 On Stack Overflow, please don't show pictures of text and code. Copy the text into the question itself and format it so that it's easy to read, copy, and search. You can edit the question to correct this using the edit link at the bottom. – Doug Stevenson Commented Dec 3, 2020 at 16:36
• Added as requested – Jacob Commented Dec 3, 2020 at 18:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Firebase can use Google Cloud Platform Services, you can integrate GCP Secret Manager on your functions with this service you can store your raw keys (these will be encrypted) and retrieved by your code function, this carries the benefit that you can restrict the access via Cloud IAM and service accounts.

This can help you to define which members of your projects or which service accounts can access to the API keys(secrets)

The permissions over the secrets can be configured so that even developers cannot see production environment keys, by assigning access permissions to secrets, but allowing that the function can get the secret (because the service account associated to your function can read the secret).

In this document you can find a code example about how to use GCP Secret Manager

Yes, API keys are safe in Firebase Cloud Functions as this code is run on the server side and never showed to the users.

You could also store the keys in your DB (Firestore, Real Time DB) under strict access control and query it at runtime for the key, so that you then could even publish your code on GitHub and it wouldn't have the API key directly hardcoded in the code.

Update:

Probably the best thing is to use this service: https://cloud.google./functions/docs/configuring/secrets

Firebase made it very easy to store and access secrets. Cloud Functions for Firebase integrates with Google Cloud Secret Manager:

https://firebase.google./docs/functions/config-env#secret-manager

1. From the root of your local project directory, run the following mand:

firebase functions:secrets:set SECRET_NAME

2. Enter a value for SECRET_NAME.

   The CLI echoes a success message and warns that you must deploy functions for the change to take effect.

3. Before deploying, make sure your functions code allows the function to access the secret using the runWith parameter:

exports.processPayment = functions
  // Make the secret available to this function
  .runWith({ secrets: ["SECRET_NAME"] })
  .onCall((data, context) => {
    const myBillingService = initializeBillingService(
      // reference the secret value
      process.env.SECRET_NAME
    );
    // Process the payment
  });