Interactive authentication enables user sign-in scenarios through various flows including browser-based authentication, device code flows, and username/password authentication. These credentials are ideal for applications that require user interaction and consent.
Authenticate users through web browser interactions. This is the primary authentication method for web applications and desktop applications that can launch a browser.
/**
* Enables authentication to Microsoft Entra ID inside of the web browser
* using the interactive authentication flow, either via redirect or popup
*/
class InteractiveBrowserCredential implements TokenCredential {
constructor(options?: InteractiveBrowserCredentialNodeOptions);
constructor(options?: InteractiveBrowserCredentialInBrowserOptions);
getToken(scopes: string | string[], options?: GetTokenOptions): Promise<AccessToken>;
}
interface InteractiveBrowserCredentialNodeOptions extends InteractiveCredentialOptions {
/**
* The redirect URI where the authentication response will be sent
*/
redirectUri?: string;
/**
* The port for the local server (Node.js only)
*/
loginHint?: string;
/**
* Customizes the browser behavior
*/
browserCustomizationOptions?: BrowserCustomizationOptions;
/**
* Controls how the browser login is displayed
*/
loginStyle?: BrowserLoginStyle;
}
interface InteractiveBrowserCredentialInBrowserOptions extends InteractiveCredentialOptions {
/**
* The redirect URI configured in your app registration
*/
redirectUri: string;
/**
* Customizes the browser behavior
*/
browserCustomizationOptions?: BrowserCustomizationOptions;
/**
* Controls how the browser login is displayed
*/
loginStyle?: BrowserLoginStyle;
}
enum BrowserLoginStyle {
redirect = "redirect",
popup = "popup"
}
interface BrowserCustomizationOptions {
/**
* Override the success message shown after authentication
*/
successMessage?: string;
/**
* Override the error message shown after failed authentication
*/
errorMessage?: string;
}Usage Examples:
import { InteractiveBrowserCredential, BrowserLoginStyle } from "@azure/identity";
// Basic interactive browser authentication (Node.js)
const credential = new InteractiveBrowserCredential({
clientId: "12345678-1234-1234-1234-123456789012",
tenantId: "12345678-1234-1234-1234-123456789012"
});
// Browser environment with redirect
const browserCredential = new InteractiveBrowserCredential({
clientId: "12345678-1234-1234-1234-123456789012",
redirectUri: "http://localhost:3000/auth/callback",
loginStyle: BrowserLoginStyle.redirect
});
// Browser environment with popup
const popupCredential = new InteractiveBrowserCredential({
clientId: "12345678-1234-1234-1234-123456789012",
redirectUri: "http://localhost:3000/auth/callback",
loginStyle: BrowserLoginStyle.popup
});
// With custom browser messages
const customCredential = new InteractiveBrowserCredential({
clientId: "12345678-1234-1234-1234-123456789012",
browserCustomizationOptions: {
successMessage: "Authentication successful! You can close this window.",
errorMessage: "Authentication failed. Please try again."
}
});
// Get token
const token = await credential.getToken("https://graph.microsoft.com/.default");Authenticate on devices that don't have a web browser or have input constraints. Users authenticate on a separate device using a code.
/**
* Enables authentication to Microsoft Entra ID using a device code
* that the user can enter into https://microsoft.com/devicelogin
*/
class DeviceCodeCredential implements TokenCredential {
constructor(options?: DeviceCodeCredentialOptions);
getToken(scopes: string | string[], options?: GetTokenOptions): Promise<AccessToken>;
}
interface DeviceCodeCredentialOptions extends TokenCredentialOptions {
/**
* The client ID of your Microsoft Entra application
*/
clientId: string;
/**
* The tenant ID or domain name where the application is registered
*/
tenantId?: string;
/**
* A callback to handle the device code information
*/
userPromptCallback?: DeviceCodePromptCallback;
/**
* Disable automatic opening of the device code URL
*/
disableAutomaticAuthentication?: boolean;
}
/**
* Defines the signature of a callback function for handling device code prompts
* @param info - Device code information to display to the user
*/
type DeviceCodePromptCallback = (info: DeviceCodeInfo) => void;
interface DeviceCodeInfo {
/**
* The device code that the user needs to enter
*/
userCode: string;
/**
* The URL where the user should enter the device code
*/
verificationUri: string;
/**
* Message to display to the user
*/
message: string;
/**
* Time when the device code expires
*/
expiresOn: Date;
}Usage Examples:
import { DeviceCodeCredential } from "@azure/identity";
// Basic device code authentication with default prompt
const credential = new DeviceCodeCredential({
clientId: "12345678-1234-1234-1234-123456789012",
tenantId: "12345678-1234-1234-1234-123456789012"
});
// Custom device code prompt handling
const credentialWithCallback = new DeviceCodeCredential({
clientId: "12345678-1234-1234-1234-123456789012",
userPromptCallback: (info) => {
console.log(`Please visit ${info.verificationUri} and enter code: ${info.userCode}`);
console.log(`Code expires at: ${info.expiresOn}`);
}
});
// Disable automatic browser opening
const manualCredential = new DeviceCodeCredential({
clientId: "12345678-1234-1234-1234-123456789012",
disableAutomaticAuthentication: true,
userPromptCallback: (info) => {
console.log("Manual authentication required:");
console.log(info.message);
}
});
// Get token (this will trigger the device code flow)
const token = await credential.getToken("https://graph.microsoft.com/.default");Authenticate using OAuth2 authorization code flow. Typically used in web applications where you can control the authorization code acquisition.
/**
* Enables authentication to Microsoft Entra ID using an authorization code
* that was obtained from the authorization code endpoint
*/
class AuthorizationCodeCredential implements TokenCredential {
constructor(
tenantId: string,
clientId: string,
authorizationCode: string,
redirectUri: string,
options?: AuthorizationCodeCredentialOptions
);
getToken(scopes: string | string[], options?: GetTokenOptions): Promise<AccessToken>;
}
interface AuthorizationCodeCredentialOptions extends TokenCredentialOptions {
/**
* The client secret of your Microsoft Entra application (confidential clients only)
*/
clientSecret?: string;
}Usage Examples:
import { AuthorizationCodeCredential } from "@azure/identity";
// Public client (no client secret)
const publicCredential = new AuthorizationCodeCredential(
"12345678-1234-1234-1234-123456789012", // tenant ID
"12345678-1234-1234-1234-123456789012", // client ID
"authorization-code-from-callback", // authorization code
"http://localhost:3000/auth/callback" // redirect URI
);
// Confidential client (with client secret)
const confidentialCredential = new AuthorizationCodeCredential(
tenantId,
clientId,
authorizationCode,
redirectUri,
{
clientSecret: "your-client-secret"
}
);
// Get token
const token = await credential.getToken("https://graph.microsoft.com/.default");Authenticate using username and password credentials. This flow is not recommended for most scenarios due to security concerns but may be required for legacy applications.
/**
* Enables authentication to Microsoft Entra ID with a user's
* username and password. This credential requires a high degree of
* trust so you should only use it when other, more secure credential
* types can't be used.
*/
class UsernamePasswordCredential implements TokenCredential {
constructor(
tenantId: string,
clientId: string,
username: string,
password: string,
options?: UsernamePasswordCredentialOptions
);
getToken(scopes: string | string[], options?: GetTokenOptions): Promise<AccessToken>;
}
interface UsernamePasswordCredentialOptions extends TokenCredentialOptions {
/**
* Allows specification of additional tenant IDs for multi-tenant authentication
*/
additionallyAllowedTenants?: string[];
/**
* Disable instance discovery for sovereign clouds
*/
disableInstanceDiscovery?: boolean;
}Usage Examples:
import { UsernamePasswordCredential } from "@azure/identity";
// Basic username/password authentication
const credential = new UsernamePasswordCredential(
"12345678-1234-1234-1234-123456789012", // tenant ID
"12345678-1234-1234-1234-123456789012", // client ID
"user@domain.com", // username
"password123" // password
);
// With additional configuration
const credentialWithOptions = new UsernamePasswordCredential(
tenantId,
clientId,
username,
password,
{
additionallyAllowedTenants: ["*"],
authorityHost: "https://login.microsoftonline.com"
}
);
// Get token
const token = await credential.getToken("https://graph.microsoft.com/.default");interface InteractiveCredentialOptions extends TokenCredentialOptions {
/**
* The client ID of your Microsoft Entra application
*/
clientId: string;
/**
* The tenant ID or domain name where the application is registered
*/
tenantId?: string;
/**
* Hint for the username during authentication
*/
loginHint?: string;
/**
* Claims challenge for Conditional Access
*/
claims?: string;
/**
* Disable automatic authentication and require explicit consent
*/
disableAutomaticAuthentication?: boolean;
}In browser environments, InteractiveBrowserCredential uses MSAL.js under the hood:
// Browser environment requires proper app registration configuration
const credential = new InteractiveBrowserCredential({
clientId: "your-spa-client-id", // Must be configured as SPA in Azure AD
redirectUri: window.location.origin + "/auth/callback"
});Ensure proper CORS configuration for browser applications:
// Your redirect URI must be registered in Azure AD app registration
const credential = new InteractiveBrowserCredential({
clientId: "12345678-1234-1234-1234-123456789012",
redirectUri: "https://yourdomain.com/auth/callback",
tenantId: "12345678-1234-1234-1234-123456789012"
});Always validate redirect URIs to prevent authorization code interception:
// Ensure redirect URI matches exactly what's registered in Azure AD
const credential = new InteractiveBrowserCredential({
clientId: "your-client-id",
redirectUri: "https://yourdomain.com/auth/callback" // Must match registration
});Authorization Code with PKCE is automatically used for enhanced security:
// PKCE is automatically enabled for public clients
const credential = new AuthorizationCodeCredential(
tenantId,
clientId,
authorizationCode,
redirectUri
// No client secret = PKCE is used
);