Managing Secrets in Firebase App Hosting for Next.js Applications

When deploying Next.js applications to Firebase App Hosting, properly managing your environment variables and secrets is crucial for security. This guide will walk you through the process of setting up and managing secrets for your Next.js application using Firebase App Hosting's built-in secrets management capabilities.

Understanding apphosting.yaml

The apphosting.yaml file is the configuration file for Firebase App Hosting. It defines how your application is deployed and what resources it needs. One important aspect of this file is how it handles environment variables and secrets.

Here's a basic structure of an apphosting.yaml file for a Next.js application:

runConfig:
  minInstances: 0
  # maxInstances: 100
  # concurrency: 80
  # cpu: 1
  # memoryMiB: 512

env:
  - variable: NEXT_PUBLIC_FIREBASE_API_KEY
    secret: NEXT_PUBLIC_FIREBASE_API_KEY
  - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
    secret: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
  - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
    secret: NEXT_PUBLIC_FIREBASE_PROJECT_ID
  - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
    secret: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
  - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
    secret: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
  - variable: NEXT_PUBLIC_FIREBASE_APP_ID
    secret: NEXT_PUBLIC_FIREBASE_APP_ID
  - variable: NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
    secret: NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
  - variable: NEXT_PUBLIC_FIREBASE_VAPID_KEY
    secret: NEXT_PUBLIC_FIREBASE_VAPID_KEY📋

Managing Secrets with Firebase CLI

Firebase App Hosting provides a convenient way to manage secrets through the Firebase CLI. This approach is perfect for developers who want a straightforward way to set and access secrets without navigating the Google Cloud Console.

Setting Secrets

To set a secret, use the firebase apphosting:secrets:set command followed by the environment variable name:

firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_API_KEY📋

When you run this command, you'll be prompted to enter the secret value. The CLI will then store this value securely in Google Cloud Secret Manager.

You'll also be asked to configure permissions. Always respond with "yes" to ensure your App Hosting service has the necessary permissions to access these secrets.

Example Secret Configuration

Here's a typical set of Firebase configuration variables you might need to set as secrets:

firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_API_KEY
firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_PROJECT_ID
firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_APP_ID
firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
firebase apphosting:secrets:set NEXT_PUBLIC_FIREBASE_VAPID_KEY📋

Accessing Secrets

To access the contents of a secret's latest value, use:

firebase apphosting:secrets:access NEXT_PUBLIC_FIREBASE_API_KEY📋

Using Cloud Secret Manager Directly

For more advanced secret management needs, you can use Google Cloud Secret Manager directly. This gives you access to additional features such as:

• Version management
• IAM permissions at a granular level
• Automatic rotation
• Audit logging

If you choose this approach, you'll need to grant your App Hosting backend access to these secrets using:

firebase apphosting:secrets:grantaccess📋

Referencing Secrets in apphosting.yaml

Once your secrets are stored in Secret Manager, you can reference them in your apphosting.yaml file.

Best Practices for Secret Management

1. Never commit secrets to your repository:

   • Add .env files to your .gitignore
   • Use Secret Manager for all sensitive information

2. Be careful with NEXT_PUBLIC_ prefixes:

   • Any environment variable with this prefix will be exposed to the browser
   • Only use this prefix for values that are safe to be public

3. Use different secrets for different environments:

   • Create separate secrets for development, staging, and production
   • You can use the --project flag with Firebase CLI commands to target different environments

4. Regularly rotate your secrets:

   • Update sensitive secrets periodically
   • Cloud Secret Manager can help automate this process

5. Monitor access to your secrets:

   • Enable audit logging for Secret Manager
   • Regularly review who has access to your secrets

Troubleshooting

Common Issues

1. Permission errors:

   Error: Permission denied to access secret📋

   💡

   Solution: Run firebase apphosting:secrets:grantaccess to ensure your App Hosting service has the necessary permissions.

2. Secret not found:

   Error: Secret not found📋

   💡

   Solution: Make sure you've created the secret with the correct name and in the correct project.

3. Environment variables not available at runtime: Solution: Check that you've correctly referenced the secrets in your apphosting.yaml file.

Conclusion

Managing secrets in Firebase App Hosting for Next.js applications is straightforward with the built-in secrets management capabilities. By following the practices outlined in this guide, you can ensure that your application's sensitive information remains secure while still being accessible to your application.