How to configure sensitive configuration details in your Angular app without being visible to the front end user?

Often in your angular app you need to configure sensitive data like credentials.

You can store this in your code but then it will be visible to any one who loads your angular app in their browser.

You can store it in a config file under assets directory , still it might be exposed to the end user.

A safer way to store sensitive information in your angular app is to use environment variables.

You need to use “dotenv” package to accomplish this.

Here are the steps:

1.Create environment file:

Create a new file in the root directory of your Angular app called .env. This file will contain your environment variables.

2. Store your config data in .env file:

In the .env file, add your sensitive configuration data as environment variables. For example:


3. Install dotenv package:

Install the dotenv package from npm to load the environment variables from the .env file into your Angular app. Run the following command in your terminal:

npm install dotenv

4. Import dotenv in Angular app:

Import the dotenv package and load the environment variables in your main.ts file. Here’s an example:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { config } from 'dotenv';

if (environment.production) {

config(); // load environment variables from .env file

  .catch(err => console.error(err));

5. Access the variables using proccess.env keyword:

In your configuration code, access the environment variables using process.env. Here’s an example:

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';

  imports: [
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      databaseURL: process.env.FIREBASE_DATABASE_URL,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
export class FirebaseModule { }

In this example, we’re importing the environment variables from environments/environment.ts and using them to configure a custom module. Note that the environment variables are accessed using process.env and the name of the environment variable.

This way you can load your credentials without exposing them to the end user .

That’s it!





Leave a Reply

Discover more from The Full Stack Developer

Subscribe now to keep reading and get access to the full archive.

Continue reading