Environment configuration in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase with the correct environment configuration.

Firebase

const firebaseConfig = {
  apiKey: "[1]",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

Drag options to blanks, or click blank then click option'

Afirebase.apiKey

Bprocess.env.FIREBASE_API_KEY

Cconfig.apiKey

Denv.FIREBASE_KEY

Attempts:

3 left

💡 Hint

Common Mistakes

Hardcoding the API key directly in the code.

Using incorrect variable names like firebase.apiKey.

Use process.env.FIREBASE_API_KEY to securely access the API key from environment variables.

2fill in blank

medium

Complete the code to load environment variables from a .env file using Firebase CLI.

Firebase

firebase functions:config:get > .runtimeconfig.json

const functions = require('firebase-functions');
const config = functions.config();

console.log(config.[1]);

Drag options to blanks, or click blank then click option'

Afirebase_api_key

BapiKey

Capi_key

Dapikey

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase keys like apiKey which Firebase does not recognize.

Using incorrect key names that do not match the config.

Firebase environment config keys are usually lowercase with underscores, like api_key.

3fill in blank

hard

Fix the error in accessing the Firebase environment variable in this code snippet.

Firebase

const apiKey = process.env.[1];
if (!apiKey) {
  throw new Error('Missing Firebase API key');
}

Drag options to blanks, or click blank then click option'

AFIREBASE_APIKEY

BfirebaseApiKey

Cfirebase_api_key

DFIREBASE_API_KEY

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or camelCase names for environment variables.

Missing underscores in the variable name.

The environment variable name must exactly match FIREBASE_API_KEY to be found.

4fill in blank

hard

Fill both blanks to correctly set and access Firebase environment variables in functions.

Firebase

firebase functions:config:set [1]="your_api_key"

const apiKey = functions.config().[2];

Drag options to blanks, or click blank then click option'

Afirebase.api_key

Bfirebase_api_key

Cfirebase.apiKey

Dfirebase_apiKey

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing camelCase and underscore styles.

Using dot notation in the key name when setting config.

Use the same key firebase_api_key when setting and accessing environment variables.

5fill in blank

hard

Fill all three blanks to securely use Firebase environment variables in your Cloud Function.

Firebase

exports.myFunction = functions.https.onRequest((req, res) => {
  const apiKey = functions.config().[1];
  if (!apiKey) {
    res.status(500).send('[2]');
    return;
  }
  res.send(`API Key is: [3]`);
});

Drag options to blanks, or click blank then click option'

Afirebase_api_key

BMissing API key in environment configuration

C${apiKey}

Dapi_key

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect key names.

Not handling missing keys properly.

Not using template literals for variable interpolation.

Use firebase_api_key to access the key, send a clear error message if missing, and use template literals to display the key.

Practice

1. What is the main purpose of environment configuration in Firebase functions?

easy

A. To create new Firebase projects

B. To write the main logic of the function

C. To deploy the Firebase project

D. To store settings outside the code for security and flexibility

Solution

1. Step 1: Understand environment configuration role

   Environment configuration holds settings like API keys or URLs outside the code to keep them safe and easy to change.

2. Step 2: Compare options with this role

   Only To store settings outside the code for security and flexibility describes storing settings outside code for security and flexibility, which matches the purpose.

3. Final Answer:

   To store settings outside the code for security and flexibility -> Option D

4. Quick Check:

   Environment config = store settings outside code [OK]

Hint: Environment config = safe settings outside code [OK]

Common Mistakes:

• Confusing environment config with function logic
• Thinking environment config deploys projects
• Mixing environment config with project creation

2. Which command correctly sets an environment variable named api.key with value 12345 in Firebase functions?

easy

A. firebase config:set api.key 12345

B. firebase functions:config:set api.key=12345

C. firebase functions:set-config api.key=12345

D. firebase functions:config add api.key 12345

Solution

1. Step 1: Recall correct syntax for setting config

   The correct command uses 'firebase functions:config:set' followed by key=value pairs.

2. Step 2: Match options to syntax

   Only firebase functions:config:set api.key=12345 matches the exact syntax: 'firebase functions:config:set api.key=12345'. Others have wrong commands or missing colons.

3. Final Answer:

   firebase functions:config:set api.key=12345 -> Option B

4. Quick Check:

   Set config = functions:config:set key=value [OK]

Hint: Use 'functions:config:set key=value' to set env vars [OK]

Common Mistakes:

• Omitting the colon after 'functions'
• Using spaces instead of '=' between key and value
• Using wrong command verbs like 'add' or 'set-config'

3. Given the following commands run in order:
firebase functions:config:set service.api_key="abc123"
firebase deploy --only functions

What will functions.config().service.api_key return inside your function?

medium

A. service.api_key

B. undefined

C. "abc123"

D. null

Solution

1. Step 1: Understand setting and deploying config

   Setting 'service.api_key' with value 'abc123' and then deploying functions makes the config available inside functions.

2. Step 2: Accessing config in function

   Accessing 'functions.config().service.api_key' returns the string value set, which is 'abc123'.

3. Final Answer:

   "abc123" -> Option C

4. Quick Check:

   Config value = "abc123" after deploy [OK]

Hint: Deploy after setting config to access values [OK]

Common Mistakes:

• Forgetting to redeploy functions after setting config
• Expecting config to be available without deploy
• Confusing key names or accessing wrong path

4. You set an environment variable with firebase functions:config:set db.url="https://mydb.com" but inside your function functions.config().db.url returns undefined. What is the most likely cause?

medium

A. You forgot to redeploy the functions after setting the config

B. The config key name is invalid

C. You need to restart the Firebase CLI

D. The value must be a number, not a string

Solution

1. Step 1: Identify cause of undefined config

   Config values only update inside functions after redeploying them.

2. Step 2: Check other options

   Key names can be strings, no CLI restart needed, and values can be strings. So these are not causes.

3. Final Answer:

   You forgot to redeploy the functions after setting the config -> Option A

4. Quick Check:

   Redeploy needed after config change [OK]

Hint: Always redeploy functions after config changes [OK]

Common Mistakes:

• Assuming config updates instantly without deploy
• Restarting CLI unnecessarily
• Thinking config keys must be numbers

5. You want to store two environment variables for your Firebase functions: api.key with value key123 and api.secret with value secret456. Which command correctly sets both at once?

hard

A. firebase functions:config:set api.key=key123 api.secret=secret456

B. firebase functions:config:set api.key=key123; api.secret=secret456

C. firebase functions:config:set api.key=key123, api.secret=secret456

D. firebase functions:config:set api.key=key123 && api.secret=secret456

Solution

1. Step 1: Recall syntax for multiple config keys

   Multiple keys are set by listing them separated by spaces, each as key=value pairs.

2. Step 2: Evaluate options

   Only firebase functions:config:set api.key=key123 api.secret=secret456 uses spaces correctly. Others use semicolon, comma, or && which are invalid here.

3. Final Answer:

   firebase functions:config:set api.key=key123 api.secret=secret456 -> Option A

4. Quick Check:

   Multiple keys set with spaces [OK]

Hint: Separate multiple keys with spaces, not commas or semicolons [OK]

Common Mistakes:

• Using commas or semicolons instead of spaces
• Trying to chain commands with &&
• Setting keys one at a time unnecessarily