How can I securely manage API keys in an Angular app with Firebase and GitLab CI/CD?

When building a client‐side app (like Angular) that runs in the browser, any values you embed (even via CI/CD variables) end up observable to the client. This is inherent to client‑side JavaScript, so you cannot truly “hide” secrets there.

Here are recommended approaches:

1. Move Sensitive Operations to a Secure Backend

Instead of including sensitive keys in your Angular bundle, create a secure backend (for example, using Firebase Cloud Functions or Cloud Run). Your client‑side code can send requests to this backend, which then uses the secrets to perform the desired operations. This way, the secrets remain on the server side and are not bundled into the client code.

2. Use Firebase Security Rules and App Check

If you’re using Firebase services, note that API keys for Firebase are generally safe to include in client code because they are not used for access control. Instead, protect your data using Firebase Security Rules. And if you need to ensure that only your app instances can access your backend, consider using Firebase App Check.

3. Use Secret Management on the Server Side

For any operation that requires truly sensitive keys (for example, secret API tokens for non‑Firebase services), store these keys securely in your backend environment. If you’re using Firebase Hosting backends, you can leverage Cloud Secret Manager and reference those secrets from your server code. This keeps them off the client side entirely.

Summary

• Do not store secrets in your Angular environment files or embed them through CI/CD: They’ll be included in the bundle.
• Keep sensitive logic and keys on a backend: Communicate with that backend using secure calls.
• Leverage Firebase Security Rules and App Check: For scenarios that involve Firebase services.

Using these strategies will ensure that sensitive API keys and tokens remain secure and off the client bundle.