Azure Key Vault secrets value reading from Angular Code

When working with TypeScript in an Angular application, you may come across a situation where you need to securely store and retrieve sensitive information, such as API keys or connection strings. Azure Key Vault provides a secure and centralized solution for managing these secrets. In this blog post, we will explore how to read secret values from Azure Key Vault in your Angular code.

Prerequisites

Before we begin, make sure you have the following:

An Azure subscription
An Azure Key Vault instance
An Angular project set up

Step 1: Install Dependencies

To interact with Azure Key Vault from your Angular code, you will need to install the following npm packages:

npm install @azure/keyvault-secrets @azure/identity

Step 2: Configure Azure Key Vault

Next, you need to configure your Azure Key Vault to allow access from your Angular application. Follow these steps:

Go to the Azure portal and navigate to your Key Vault instance.
Under “Settings”, select “Access policies”.
Click on the “+ Add Access Policy” button.
Choose the appropriate options for your scenario (e.g., secret permissions).
Save the changes.

Step 3: Set up Authentication

In order to authenticate with Azure Key Vault, you will need to provide your application with the necessary credentials. The easiest way to do this is by using the DefaultAzureCredential class from the @azure/identity package. This class automatically picks the appropriate authentication method based on the environment.

import { DefaultAzureCredential } from '@azure/identity';

const credential = new DefaultAzureCredential();

Step 4: Retrieve Secret Values

Now that you have set up authentication, you can start retrieving secret values from Azure Key Vault. Use the SecretClient class from the @azure/keyvault-secrets package to interact with the Key Vault API.

import { SecretClient } from '@azure/keyvault-secrets';

const vaultUrl = 'https://your-key-vault-name.vault.azure.net';
const secretName = 'your-secret-name';

const client = new SecretClient(vaultUrl, credential);

async function getSecretValue() {
  const secret = await client.getSecret(secretName);
  return secret.value;
}

getSecretValue().then(value => {
  console.log(value);
});

In the above code snippet, replace your-key-vault-name with the name of your Key Vault instance and your-secret-name with the name of the secret you want to retrieve.

Alternative Solution: Using Environment Variables

If you prefer not to directly retrieve secret values from Azure Key Vault in your Angular code, you can use environment variables as an alternative solution. Set the secret values as environment variables in your deployment environment and access them in your Angular code using the process.env object.

const secretValue = process.env.YOUR_SECRET_NAME;

In the above code snippet, replace YOUR_SECRET_NAME with the name of your environment variable.

Conclusion

By following the steps outlined in this blog post, you can securely read secret values from Azure Key Vault in your Angular code. Whether you choose to directly retrieve secrets from Key Vault or use environment variables, Azure Key Vault provides a robust and secure solution for managing sensitive information in your applications.

Feel free to reach out to us if you have any questions or need further assistance. Happy coding!

Azure Key Vault secrets value reading from Angular Code