Generated banner for Azure Identity TS
Generated logo for Azure Identity TS

Azure Identity TS

MicrosoftOfficialCreated by Microsoft

  • Skill
  • Tool integration
  • Cloud and DevOps
  • MIT
  • No issues found

From the author

Authenticate to Azure services using Azure Identity library for JavaScript (@azure/identity). Use when configuring authentication with DefaultAzureCredential, managed identity, service principals, or interactive browser login.
— the description by Microsoft

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The azure-identity-ts skill provides a comprehensive guide for implementing authentication in JavaScript and TypeScript applications using the @azure/identity library. It covers various credential types, including DefaultAzureCredential for seamless local-to-production transitions, Managed Identity for Azure-hosted resources, and Service Principal authentication for automated environments. The skill also details browser-based authentication patterns, custom credential chains, and best practices for secure token management.

What it does

  • Provides implementation patterns for DefaultAzureCredential to simplify multi-environment authentication.
  • Demonstrates how to configure Managed Identity for secure, secret-free access in Azure environments.
  • Explains service principal authentication using both client secrets and certificates.
  • Covers interactive browser-based login flows for web applications.
  • Shows how to create custom credential chains for specific fallback requirements.
  • Includes guidance on debugging authentication issues and managing token providers.

When to use it

  • When you need to authenticate your Node.js or browser-based application to Azure services.
  • When you want to follow security best practices by avoiding hardcoded credentials.
  • When deploying applications to Azure resources that support Managed Identity.
  • When you need to support multiple authentication methods across local development and production environments.

Advantages

  • Standardized authentication approach across all Azure SDK clients.
  • Supports a wide range of identity scenarios from local dev to enterprise production.
  • Reduces secret management overhead by leveraging Managed Identity.
  • Provides built-in support for token caching and automatic refresh.

Usage examples

“How do I authenticate a BlobServiceClient using DefaultAzureCredential?”
The agent will provide a code snippet showing the import of DefaultAzureCredential and its injection into the BlobServiceClient constructor.
“Show me how to use a user-assigned managed identity in my code.”
The agent will provide the ManagedIdentityCredential configuration using the client ID or resource ID of the user-assigned identity.
“How do I set up interactive login for a web app?”
The agent will explain the use of InteractiveBrowserCredential, including the necessary app registration requirements and configuration options.
“What is the best way to authenticate in a CI/CD pipeline?”
The agent will recommend using ClientSecretCredential or WorkloadIdentityCredential, providing the necessary environment variable setup.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/microsoft/azure-identity-ts/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip azure-identity-ts.zip -d .agents/skills

Documentation by Microsoft

Azure Identity library for TypeScript

Authentication library for Azure SDK clients using Microsoft Entra ID.

Installation

npm install @azure/identity

# For Visual Studio Code credential support
npm install @azure/identity-vscode

Environment Variables

Service Principal (Secret)
AZURE_TENANT_ID=<tenant-id>
AZURE_CLIENT_ID=<client-id>
AZURE_CLIENT_SECRET=<client-secret>
AZURE_TOKEN_CREDENTIALS=prod # Required only if DefaultAzureCredential is used in production
Service Principal (Certificate)
AZURE_TENANT_ID=<tenant-id>
AZURE_CLIENT_ID=<client-id>
AZURE_CLIENT_CERTIFICATE_PATH=/path/to/cert.pem
AZURE_CLIENT_CERTIFICATE_PASSWORD=<optional-password>
Workload Identity (Kubernetes)
AZURE_TENANT_ID=<tenant-id>
AZURE_CLIENT_ID=<client-id>
AZURE_FEDERATED_TOKEN_FILE=/var/run/secrets/tokens/azure-identity
import { DefaultAzureCredential, ManagedIdentityCredential } from "@azure/identity";

// Local dev: DefaultAzureCredential. Production: set AZURE_TOKEN_CREDENTIALS=prod or AZURE_TOKEN_CREDENTIALS=<specific_credential>
const credential = new DefaultAzureCredential({requiredEnvVars: ["AZURE_TOKEN_CREDENTIALS"]});
// Or use a specific credential directly in production:
// See https://learn.microsoft.com/javascript/api/overview/azure/identity-readme?view=azure-node-latest#credential-classes
// const credential = new ManagedIdentityCredential();

// Use with any Azure SDK client
import { BlobServiceClient } from "@azure/storage-blob";
const blobClient = new BlobServiceClient(
  "https://<account>.blob.core.windows.net",
  credential
);

See DefaultAzureCredential overview for the current credential chain order and defaults.

Managed Identity

System-Assigned
import { ManagedIdentityCredential } from "@azure/identity";

const credential = new ManagedIdentityCredential();
User-Assigned (by Client ID)
const credential = new ManagedIdentityCredential({
  clientId: "<user-assigned-client-id>"
});
User-Assigned (by Resource ID)
const credential = new ManagedIdentityCredential({
  resourceId: "/subscriptions/<sub>/resourceGroups/<rg>/providers/Microsoft.ManagedIdentity/userAssignedIdentities/<name>"
});
User-Assigned (by Object ID)
const credential = new ManagedIdentityCredential({
  objectId: "<user-assigned-object-id>"
});

Service Principal

Client Secret
import { ClientSecretCredential } from "@azure/identity";

const credential = new ClientSecretCredential(
  "<tenant-id>",
  "<client-id>",
  "<client-secret>"
);
Client Certificate
import { ClientCertificateCredential } from "@azure/identity";

const credential = new ClientCertificateCredential(
  "<tenant-id>",
  "<client-id>",
  { certificatePath: "/path/to/cert.pem" }
);

// With password
const credentialWithPwd = new ClientCertificateCredential(
  "<tenant-id>",
  "<client-id>",
  { 
    certificatePath: "/path/to/cert.pem",
    certificatePassword: "<password>"
  }
);

Interactive Authentication

Browser-Based Login
import { InteractiveBrowserCredential } from "@azure/identity";

const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  loginHint: "[email protected]"
});
Device Code Flow
import { DeviceCodeCredential } from "@azure/identity";

const credential = new DeviceCodeCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  userPromptCallback: (info) => {
    console.log(info.message);
    // "To sign in, use a web browser to open..."
  }
});

Custom Credential Chain

import { 
  ChainedTokenCredential,
  ManagedIdentityCredential,
  AzureCliCredential
} from "@azure/identity";

// Try managed identity first, fall back to CLI
const credential = new ChainedTokenCredential(
  new ManagedIdentityCredential(),
  new AzureCliCredential()
);

Developer Credentials

Visual Studio Code
import { useIdentityPlugin, VisualStudioCodeCredential } from "@azure/identity";
import { vsCodePlugin } from "@azure/identity-vscode";

useIdentityPlugin(vsCodePlugin);

const credential = new VisualStudioCodeCredential();
Azure CLI
import { AzureCliCredential } from "@azure/identity";

const credential = new AzureCliCredential();
// Uses: az login
Azure Developer CLI
import { AzureDeveloperCliCredential } from "@azure/identity";

const credential = new AzureDeveloperCliCredential();
// Uses: azd auth login
Azure PowerShell
import { AzurePowerShellCredential } from "@azure/identity";

const credential = new AzurePowerShellCredential();
// Uses: Connect-AzAccount

Sovereign Clouds

import { ClientSecretCredential, AzureAuthorityHosts } from "@azure/identity";

// Azure Government
const credential = new ClientSecretCredential(
  "<tenant>", "<client>", "<secret>",
  { authorityHost: AzureAuthorityHosts.AzureGovernment }
);

// Azure China
const credentialChina = new ClientSecretCredential(
  "<tenant>", "<client>", "<secret>",
  { authorityHost: AzureAuthorityHosts.AzureChina }
);

Bearer Token Provider

import { DefaultAzureCredential, getBearerTokenProvider } from "@azure/identity";

const credential = new DefaultAzureCredential({requiredEnvVars: ["AZURE_TOKEN_CREDENTIALS"]});

// Create a function that returns tokens
const getAccessToken = getBearerTokenProvider(
  credential,
  "https://cognitiveservices.azure.com/.default"
);

// Use with APIs that need bearer tokens
const token = await getAccessToken();

Key Types

import type { 
  TokenCredential, 
  AccessToken, 
  GetTokenOptions 
} from "@azure/core-auth";

import {
  DefaultAzureCredential,
  DefaultAzureCredentialOptions,
  ManagedIdentityCredential,
  ClientSecretCredential,
  ClientCertificateCredential,
  InteractiveBrowserCredential,
  ChainedTokenCredential,
  AzureCliCredential,
  AzurePowerShellCredential,
  AzureDeveloperCliCredential,
  DeviceCodeCredential,
  AzureAuthorityHosts
} from "@azure/identity";

Custom Credential Implementation

import type { TokenCredential, AccessToken, GetTokenOptions } from "@azure/core-auth";

class CustomCredential implements TokenCredential {
  async getToken(
    scopes: string | string[],
    options?: GetTokenOptions
  ): Promise<AccessToken | null> {
    // Custom token acquisition logic
    return {
      token: "<access-token>",
      expiresOnTimestamp: Date.now() + 3600000
    };
  }
}

Debugging

import { setLogLevel, AzureLogger } from "@azure/logger";

setLogLevel("verbose");

// Custom log handler
AzureLogger.log = (...args) => {
  console.log("[Azure]", ...args);
};

Best Practices

  1. Use DefaultAzureCredential for local development; use ManagedIdentityCredential or WorkloadIdentityCredential for production

  2. Never hardcode credentials - Use environment variables or managed identity

  3. Prefer managed identity - No secrets to manage in production

  4. Scope credentials appropriately - Use user-assigned identity for multi-tenant scenarios

  5. Handle token refresh - Azure SDK handles this automatically

  6. Use ChainedTokenCredential - For custom fallback scenarios

Files

references/browser-auth.md

Browser Authentication Reference

Browser-based authentication for Azure services using the @azure/identity TypeScript SDK.

Overview

Browser applications require special credential types that handle OAuth redirects and popup windows. This reference covers InteractiveBrowserCredential, BrowserCustomizationOptions, and SPA authentication patterns.

Installation

npm install @azure/identity

Note: Browser credentials require a bundler (Vite, webpack, etc.) and won't work in Node.js.

InteractiveBrowserCredential

The primary credential for browser applications.

import { InteractiveBrowserCredential } from "@azure/identity";

const credential = new InteractiveBrowserCredential({
  clientId: "<your-app-client-id>",
  tenantId: "<your-tenant-id>",
});

// Use with Azure SDK clients
import { BlobServiceClient } from "@azure/storage-blob";
const blobClient = new BlobServiceClient(
  "https://myaccount.blob.core.windows.net",
  credential
);

App Registration Requirements

Your Azure AD app registration needs:

  1. Platform: Single-page application (SPA)

  2. Redirect URIs:

    • http://localhost:3000 (development)

    • https://yourapp.com (production)

  3. API Permissions: Configure based on services you're accessing

  4. Implicit grant: Access tokens (for MSAL.js implicit flow)

Authentication Modes

Popup Mode (Default)
import { InteractiveBrowserCredential } from "@azure/identity";

const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  // Popup is default - no loginStyle needed
});

// Triggers popup on first getToken call
const token = await credential.getToken("https://storage.azure.com/.default");
Redirect Mode
import { InteractiveBrowserCredential } from "@azure/identity";

const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  loginStyle: "redirect",
  redirectUri: window.location.origin, // Must match app registration
});

// Redirects to Azure AD, then back to your app
const token = await credential.getToken("https://storage.azure.com/.default");
Handling Redirect Response
import { InteractiveBrowserCredential } from "@azure/identity";

// On app load, check for redirect response
const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  loginStyle: "redirect",
  redirectUri: window.location.origin,
});

// This will handle the response if returning from redirect
try {
  const token = await credential.getToken("https://storage.azure.com/.default");
  console.log("Authenticated successfully");
} catch (error) {
  console.error("Authentication failed:", error);
}

Configuration Options

interface InteractiveBrowserCredentialNodeOptions {
  /** Application client ID */
  clientId: string;
  
  /** Azure AD tenant ID */
  tenantId?: string;
  
  /** Redirect URI (must match app registration) */
  redirectUri?: string;
  
  /** Login style: "popup" or "redirect" */
  loginStyle?: "popup" | "redirect";
  
  /** Pre-fill username hint */
  loginHint?: string;
  
  /** Force re-authentication */
  disableAutomaticAuthentication?: boolean;
  
  /** Authority host for sovereign clouds */
  authorityHost?: string;
  
  /** Custom browser customization */
  browserCustomizationOptions?: BrowserCustomizationOptions;
}

Login Hint

Pre-fill the username to skip account selection:

const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  loginHint: "[email protected]", // Pre-fills email
});

Token Caching

The credential automatically caches tokens in browser storage:

const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
});

// First call - triggers interactive login
await credential.getToken("https://storage.azure.com/.default");

// Subsequent calls - uses cached token (no prompt)
await credential.getToken("https://storage.azure.com/.default");

Silent Authentication

Attempt silent auth first, fall back to interactive:

import { InteractiveBrowserCredential } from "@azure/identity";

const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  disableAutomaticAuthentication: true, // Don't auto-prompt
});

async function getTokenSilentlyOrInteractive(scope: string): Promise<string> {
  try {
    // Try silent first
    const token = await credential.getToken(scope);
    return token.token;
  } catch (error) {
    // Silent failed - trigger interactive
    const token = await credential.authenticate(scope);
    return token.token;
  }
}

Multi-Tenant Applications

const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "common", // Allow any Azure AD tenant
  // Or "organizations" for work/school accounts only
  // Or "consumers" for personal Microsoft accounts only
});

React Integration Example

// auth.ts
import { InteractiveBrowserCredential } from "@azure/identity";

let credentialInstance: InteractiveBrowserCredential | null = null;

export function getCredential(): InteractiveBrowserCredential {
  if (!credentialInstance) {
    credentialInstance = new InteractiveBrowserCredential({
      clientId: import.meta.env.VITE_AZURE_CLIENT_ID,
      tenantId: import.meta.env.VITE_AZURE_TENANT_ID,
      redirectUri: window.location.origin,
    });
  }
  return credentialInstance;
}

export async function login(): Promise<void> {
  const credential = getCredential();
  await credential.authenticate(["https://storage.azure.com/.default"]);
}

// App.tsx
import { useState } from "react";
import { BlobServiceClient } from "@azure/storage-blob";
import { getCredential, login } from "./auth";

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  const handleLogin = async () => {
    try {
      await login();
      setIsAuthenticated(true);
    } catch (error) {
      console.error("Login failed:", error);
    }
  };
  
  const listBlobs = async () => {
    const credential = getCredential();
    const client = new BlobServiceClient(
      "https://myaccount.blob.core.windows.net",
      credential
    );
    
    for await (const container of client.listContainers()) {
      console.log(container.name);
    }
  };
  
  return (
    <div>
      {!isAuthenticated ? (
        <button onClick={handleLogin}>Login with Azure</button>
      ) : (
        <button onClick={listBlobs}>List Blobs</button>
      )}
    </div>
  );
}

Error Handling

import { 
  InteractiveBrowserCredential,
  AuthenticationRequiredError,
  CredentialUnavailableError
} from "@azure/identity";

const credential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
});

try {
  const token = await credential.getToken("https://storage.azure.com/.default");
} catch (error) {
  if (error instanceof AuthenticationRequiredError) {
    // User needs to authenticate
    console.log("Please sign in");
    await credential.authenticate(["https://storage.azure.com/.default"]);
  } else if (error instanceof CredentialUnavailableError) {
    // Credential not usable in this environment
    console.error("Browser authentication not available");
  } else {
    // Other error (network, consent denied, etc.)
    console.error("Authentication error:", error);
  }
}

Logout

The credential doesn't provide direct logout. Use MSAL.js or redirect to logout URL:

function logout() {
  const logoutUrl = new URL(
    `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/logout`
  );
  logoutUrl.searchParams.set("post_logout_redirect_uri", window.location.origin);
  
  window.location.href = logoutUrl.toString();
}

Sovereign Clouds

import { 
  InteractiveBrowserCredential, 
  AzureAuthorityHosts 
} from "@azure/identity";

// Azure Government
const govCredential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  authorityHost: AzureAuthorityHosts.AzureGovernment,
});

// Azure China
const chinaCredential = new InteractiveBrowserCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  authorityHost: AzureAuthorityHosts.AzureChina,
});

DeviceCodeCredential (Alternative)

For environments without browser capability (CLI tools, IoT):

import { DeviceCodeCredential } from "@azure/identity";

const credential = new DeviceCodeCredential({
  clientId: "<client-id>",
  tenantId: "<tenant-id>",
  userPromptCallback: (info) => {
    // Display to user
    console.log(info.message);
    // "To sign in, use a web browser to open the page
    //  https://microsoft.com/devicelogin and enter the code ABC123"
  },
});

const token = await credential.getToken("https://storage.azure.com/.default");

CORS Configuration

Azure services need CORS configured for browser access:

Azure Storage:

import { BlobServiceClient } from "@azure/storage-blob";

// Configure CORS via Azure Portal or CLI:
// az storage cors add --services b --methods GET,PUT,POST,DELETE,HEAD \
//   --origins "http://localhost:3000" --allowed-headers "*" \
//   --exposed-headers "*" --max-age 3600 --account-name <account>

Best Practices

  1. Use popup for UX — Better user experience than redirect

  2. Handle redirect on load — Check for redirect response on app initialization

  3. Cache the credential instance — Don't create new instances repeatedly

  4. Configure CORS — Required for browser-to-Azure communication

  5. Use environment variables — Don't hardcode client IDs

  6. Handle authentication errors — Provide clear feedback to users

  7. Implement logout — Clear session and redirect to Azure logout

  8. Test both flows — Popup may be blocked; redirect is fallback

Security Considerations

  • Never expose client secrets in browser code

  • Use SPA platform type in app registration (PKCE)

  • Validate tokens server-side for sensitive operations

  • Configure appropriate redirect URIs

  • Use secure (HTTPS) redirect URIs in production

See Also

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Microsoft
Publisher
Microsoft (Official)
Source
microsoft/skills · .github/plugins/azure-sdk-typescript/skills/azure-identity-ts · commit 0696600
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Microsoft or Microsoft.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download azure-identity-ts.zip