After spending a month going through various new features of GitHub — especially GitHub Actions — it was time for me to use it in one of my open source Angular projects. However, a key concern was to hide the API key that I used to deploy it into Firebase. I required the application to work normally in my local environment while setting it up for continuous deployment once the code is checked into GitHub. All this without compromising the API key. Generally, it is considered a safe practice to secure such confidential information before pushing your code into any public repository.
Googling the setup led to a superb article on the topic. This informative guide helped me set up the basic configuration that worked locally, but unfortunately, I was unable to get it working for an automated workflow using GitHub Actions. Of course, I was finally able to make it work! So, let us go over the solution in detail.
Securing the confidential API keys present in the environments directory of an Angular project for use in GitHub Actions.
1. Setting up a .gitignore file
Ensure that the contents of the environments directory are part of the .gitignore file (on project root) so that these are not part of the code being pushed into a public repository.
2. Install Node.js packages
We need to install yargs to parse command-line arguments and dotenv to load environment variables from a .env file into process.env. Also, we will use the nativefs package (no need to install) to work with the file system.
npm i -D yargs dotenv
3. Setting up a .env file
The .env file should be created on the project root folder. It allows us to securely define the secret API keys (e.g. FIREBASE_API_KEY). You can add as many secret keys or access tokens to this file as required.
4. Setting up a setEnv.ts file
One might wonder why we wouldn’t make use of the environment.ts and environment.prod.ts files provided by default in an Angular project. This is because Angular, by default, considers these files as static and therefore they do not get compiled.
Thus, it is necessary for us to find a method to dynamically generate these files during compilation. This is where the setEnv.ts file comes into the picture. Where do we add this file? Let us create a scripts directory within src\assets to hold this file (src\assets\setEnv.ts ).
To suppress TypeScript lint suggestions, we enclose the code within:
We import the methods to be used using:
We will configure dotenv to pass all the environment variables from the .env file into process.env. Additionally, we will use yargs to read the command-line arguments passed ( — environment=prod or — environment=dev) when this file is called.
We will create a helper function that allows us to copy the dynamically generated environment variables into their respective files. In case the file does not exist, it will create a new file in the given path.
Since we added environment.ts and environment.prod.ts to the .gitignore file, these files along with the environments directory will not be available in the public repository of GitHub. Thus, every time a new automated workflow is triggered, these are created dynamically.
Finally, we dynamically generate the environment variables specific to the environment chosen that contains the secret API keys. For local development (npm run serve), the environment variables will be added to environment.ts, whereas for the production environment(npm run build), they will be added to the environment.prod.ts file.
This is what the complete .setEnv file looks like:
5. Update package.json
In order to call the setEnv.ts with specific command-line arguments, we will need to update the package.json:
We will create a config script that will execute setEnv.ts.
For local development, npm run start will run the config script along with the argument ofdev.
For production, npm run build will run the config script along with the argument of prod.
The project can now be automatically tested, built, and deployed using GitHub Actions into any of the host providers (Firebase, Netlify, Heroku, etc.). Although the environment variables are not present in the public repository, every time a workflow is triggered, these are generated dynamically.
We were able to specify the confidential API keys in the .env file from which the environment variables are dynamically generated into environment.ts and environment.prod.ts in an Angular project based on the environment chosen.
Also, since none of these files are checked into GitHub, we have not only managed to secure it but also allowed any CI or CD workflow in GitHub Actions to execute independently.
Create an endpoint on your server that will send back the API Key. Then on the client before creating the app you need to asynchronously fetch the API key from the server.
Inline the API key in the HTML. Then, on the client, you can directly create the app by reading the value from the global object.
Lambda stores environment variables securely by encrypting them at rest. You can configure Lambda to use a different encryption key, encrypt environment variable values on the client side, or set environment variables in an AWS CloudFormation template with AWS Secrets Manager.
In the "Security" section of the sidebar, select Secrets and variables, then click Actions.Click the Secrets tab.Click New repository secret.In the Name field, type a name for your secret.
To reuse variables in multiple workflows, set them at the organization, repository, or environment levels and reference them using the vars context. For more information see "Variables" and "Contexts." Reusable workflows are called directly within a job, and not from within a job step.
Environment variables can be used to pass configuration to an application when it is run. This is done by adding the definition of the environment variable to the deployment configuration for the application. To add a new environment variable use the oc set env command.
Define a custom webpack config, in which we specify the path of . env file, read the variables and load it with DefinePlugin , the plugin will then make sure variables in the code will be replaced by the loaded variables. Config Angular build process to use the custom webpack config.
Use authentication credentials securely in your code
Never hardcode authentication credentials like tokens, keys, or app-related secrets into your code. Instead, consider using a secret manager such as Azure Key Vault or HashiCorp Vault.
Here are several ways to store API keys securely: Environment variables: You can store API keys in environment variables on your machine and then access these variables from your code. This method has the advantage of keeping the keys out of your code. (They are in the environment where the code runs.)
You can create a file for each environment. export const environment = { production: true, apiUrl: 'http://my-prod-url' }; You can easily access this configuration in your code. To get environment specific configs, you can use the env name in the build.
Set environment variables in the System Control Panel
In the System Control Panel, you can add or edit existing environment variables in the User and System (Machine) scopes. Windows writes these values to the Registry so that they persist across sessions and system restarts.
Introduction: My name is Eusebia Nader, I am a encouraging, brainy, lively, nice, famous, healthy, clever person who loves writing and wants to share my knowledge and understanding with you.
We notice you're using an ad blocker
Without advertising income, we can't keep making this site awesome for you.
