Authenticating Azure-hosted apps to Azure resources with the Azure SDK for JavaScript

When an app is hosted in Azure (using a service like Azure App Service, Azure Virtual Machines, or Azure Container Instances), the recommended approach to authenticating an app to Azure resources is to use a managed identity.

A managed identity provides an identity for your app so that your app connects to other Azure resources without the need to use a secret (such as a connection string of key). Internally, Azure knows the identity of your app and what resources it's allowed to connect to. Azure uses this information to automatically obtain Microsoft Entra tokens for the app to allow it to connect to other Azure resources, all without you having to manage (create or rotate) the authentication secrets.

Managed identity types

There are two types of managed identities:

  • System-assigned managed identities - single Azure resource
  • User-assigned managed identities - multiple Azure resources

This article covers the steps to enable and use a system-assigned managed identity for an app. If you need to use a user-assigned managed identity, see the article Manage user-assigned managed identities to see how to create a user-assigned managed identity.

System-assigned managed identities for single resource

System-assigned managed identities are provided by and tied directly to an Azure resource. When you enable managed identity on an Azure resource, you get a system-assigned managed identity for that resource. It's tied to the lifecycle of the Azure resource. When the resource is deleted, Azure automatically deletes the identity for you. Since all you have to do is enable managed identity for the Azure resource hosting your code, this is the easiest type of managed identity to use.

User-assigned managed identities for multiple resources

Conceptually this identity is a standalone Azure resource. This is most frequently used when your solution has multiple workloads that run on multiple Azure resources that all need to share the same identity and same permissions. For example, if your solution had components that ran on multiple App Service and virtual machine instances and they all needed access to the same set of Azure resources, creating and using a user-assigned managed identity across those resources would make sense.

1 - System-assigned: Enable in hosted app

The first step is to enable managed identity on the Azure resource hosting your app. For example, if you're hosting a Django application using Azure App Service, you need to enable managed identity for that App Service web app. If you were using a virtual machine to host your app, you would enable your VM to use managed identity.

You can enable managed identity to be used for an Azure resource using either the Azure portal or the Azure CLI.

Instructions Screenshot
Navigate to the resource that hosts your application code in the Azure portal.

For example, you can type the name of your resource in the search box at the top of the page and navigate to it by selecting it in the dialog box.
A screenshot showing how to use the top search bar in the Azure portal to locate and navigate to a resource in Azure.
On the page for your resource, select the Identity menu item from the left-hand menu.

All Azure resources capable of supporting managed identity will have an Identity menu item even though the layout of the menu may vary slightly.
A screenshot showing the location of the Identity menu item in the left-hand menu for an Azure resource.
On the Identity page:
  1. Change the Status slider to On.
  2. Select Save.
A confirmation dialog verifies you want to enable managed identity for your service. Answer Yes to enable managed identity for the Azure resource.
A screenshot showing how to enable managed identity for an Azure resource on the resource's Identity page.

2 - Assign roles to the managed identity

Next, you need to determine what roles (permissions) your app needs and assign the managed identity to those roles in Azure. A managed identity can be assigned roles at a resource, resource group, or subscription scope. This example shows how to assign roles at the resource group scope since most applications group all their Azure resources into a single resource group.

Instructions Screenshot
Locate the resource group for your application by searching for the resource group name using the search box at the top of the Azure portal.

Navigate to your resource group by selecting the resource group name under the Resource Groups heading in the dialog box.
A screenshot showing how to use the top search bar in the Azure portal to locate and navigate to a resource group in Azure.
On the page for the resource group, select Access control (IAM) from the left-hand menu. A screenshot showing the location of the Access control (I A M ) menu item in the left-hand menu of an Azure resource group.
On the Access control (IAM) page:
  1. Select the Role assignments tab.
  2. Select + Add from the top menu and then Add role assignment from the resulting drop-down menu.
A screenshot showing how to navigate to the role assignments tab and the location of the button used to add role assignments to a resource group.
The Add role assignment page lists all of the roles that can be assigned for the resource group.
  1. Use the search box to filter the list to a more manageable size. This example shows how to filter for Storage Blob roles.
  2. Select the role that you want to assign.
    Select Next to go to the next screen.
A screenshot showing how to filter and select role assignments to be added to the resource group.
The next Add role assignment page allows you to specify what user to assign the role to.
  1. Select Managed identity under Assign access to.
  2. Select + Select members under Members
A dialog box opens on the right-hand side of the Azure portal.
A screenshot showing how to select managed identity as the type of user you want to assign the role (permission) on the add role assignments page.
In the Select managed identities dialog:
  1. The Managed identity dropdown and Select text box can be used to filter the list of managed identities in your subscription. In this example by selecting App Service, only managed identities associated with an App Service are displayed.
  2. Select the managed identity for the Azure resource hosting your application.
Choose Select at the bottom of the dialog to continue.
A screenshot showing how to use the select managed identities dialog to filter and select the managed identity to assign the role to.
The managed identity shows as selected on the Add role assignment screen.

Select Review + assign to go to the final page and then Review + assign again to complete the process.
A screenshot of the final add role assignment screen where a user needs to select the Review + Assign button to finalize the role assignment.

3 - Implement DefaultAzureCredential in your application

The DefaultAzureCredential class will automatically detect that a managed identity is being used and use the managed identity to authenticate to other Azure resources. As discussed in the Azure SDK for JavaScript authentication overview article, DefaultAzureCredential supports multiple authentication methods and determines the authentication method being used at runtime. In this way, your app can use different authentication methods in different environments without implementing environment specific code.

First, add the @azure/identity package to your application.

npm install @azure/identity

Next, for any JavaScript code that creates an Azure SDK client object in your app, you want to:

  1. Import the DefaultAzureCredential class from the @azure/identity module.
  2. Create a DefaultAzureCredential object.
  3. Pass the DefaultAzureCredential object to the Azure SDK client object constructor.

An example of this is shown in the following code segment.

// connect-with-default-azure-credential.js
import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';
import 'dotenv/config'

const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
if (!accountName) throw Error('Azure Storage accountName not found');

const blobServiceClient = new BlobServiceClient(
  `https://${accountName}.blob.core.windows.net`,
  new DefaultAzureCredential()
);

When the above code is run on your local workstation during local development, the SDK method, DefaultAzureCredential(), look in the environment variables for an application service principal or at VS Code, the Azure CLI, or Azure PowerShell for a set of developer credentials, either of which can be used to authenticate the app to Azure resources during local development. In this way, this same code can be used to authenticate your app to Azure resources during both local development and when deployed to Azure.