Firebase Functions and API Keys

Question

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?

Answer 1

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