Showing posts with label Performance. Show all posts
Showing posts with label Performance. Show all posts

Saturday, 24 January 2026

Avoiding the Pitfalls of Stopping Permission Inheritance: Performance Hotspots, Safer Patterns, and Azure-First Remediation

Stopping inherit permission (i.e., breaking permission inheritance) often seems like a quick fix for access control, but it introduces hidden operational and performance costs. This article explains why breaking inheritance in SharePoint and Azure RBAC leads to complexity, where performance issues occur, and how to remediate with .NET 8, TypeScript, and Azure-first patterns using Managed Identities and Infrastructure as Code.

The Problem

Breaking inheritance creates many one-off permission entries. Over time, this causes:

  • Permission sprawl: hard-to-audit, hard-to-revoke access scattered across items/resources.
  • Performance degradation: larger ACL evaluations, slower queries, and increased throttling risk.
  • Operational friction: brittle reviews, noisy exceptions, and confusing user experiences.

In SharePoint, many uniquely permissioned items slow list queries and complicate sharing. In Azure, assigning roles at leaf scopes (instead of using inherited assignments at management group or subscription levels) increases evaluation overhead and management burden.

Prerequisites

  • .NET 8 SDK
  • Node.js v20+
  • Azure CLI (az) and Azure Bicep
  • Contributor access to a test subscription (for deploying IaC) and Reader/Authorization permissions for audit scenarios

The Solution (Step-by-Step)

Step 1: What to avoid when stopping inheritance

  • SharePoint: Avoid per-item unique permissions for large lists; prefer groups at the site or library level, with exceptions gated by policy and approval.
  • Azure RBAC: Avoid many role assignments at the resource/resource-group level; grant least privilege at a higher scope when practical, and use groups instead of direct user assignments.

Step 2: .NET 8 Minimal API to detect RBAC hotspots (top-level statements, DI, Managed Identity)

// File: Program.cs (.NET 8, top-level statements, minimal API)
// Purpose: Audit Azure RBAC for non-inherited, leaf-level role assignments (hotspots).
// Auth: Uses DefaultAzureCredential (Managed Identity preferred in Azure).
// Note: This sample reads role assignments and surfaces "leaf" hotspots for review.

using Azure;
using Azure.Core;
using Azure.Identity;
using Azure.ResourceManager;
using Azure.ResourceManager.Authorization;
using Azure.ResourceManager.Authorization.Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

var builder = WebApplication.CreateBuilder(args);

// Register Azure clients via DI
builder.Services.AddSingleton<TokenCredential>(_ => new DefaultAzureCredential());
// ArmClient is the entry point to Resource Manager APIs
builder.Services.AddSingleton<ArmClient>(sp => new ArmClient(sp.GetRequiredService<TokenCredential>()));

var app = builder.Build();

// GET /rbac/hotspots?subscriptionId=<subId>
// Heuristic: Identify role assignments at deeper scopes (resource, resource group) that
// could be consolidated at higher scopes to reduce sprawl and evaluation overhead.
app.MapGet("/rbac/hotspots", async (string subscriptionId, ArmClient arm) =>
{
    // Acquire subscription resource
    var sub = arm.GetSubscriptionResource(new ResourceIdentifier($"/subscriptions/{subscriptionId}"));

    // List role assignments across the subscription
    var assignments = new List<RoleAssignmentData>();
    await foreach (var ra in sub.GetRoleAssignmentsAsync())
    {
        assignments.Add(ra.Data);
    }

    // Group by scope depth (subscription=1, resourceGroup=2, resource=3+)
    // Deeper scopes are more likely to be "breaks" from inheritance-like patterns.
    var hotspots = assignments
        .GroupBy(a => ScopeDepth(a.Scope))
        .OrderByDescending(g => g.Key)
        .Select(g => new
        {
            depth = g.Key,
            count = g.Count(),
            sampleScopes = g.Select(x => x.Scope).Distinct().Take(5).ToArray()
        });

    return Results.Ok(new
    {
        analyzed = assignments.Count,
        hotspots
    });

    // Simple helper to score scope depth by path segments.
    static int ScopeDepth(string scope)
    {
        // Example: /subscriptions/{id} => depth ~ 1
        // /subscriptions/{id}/resourceGroups/{rg} => depth ~ 2
        // /subscriptions/{id}/resourceGroups/{rg}/providers/... => depth >= 3
        return scope.Split('/', StringSplitOptions.RemoveEmptyEntries).Length / 2;
    }
})
.WithName("GetRbacHotspots")
.Produces<object>(200);

app.Run();

Why this helps: Large counts of deep-scope assignments often indicate broken inheritance patterns (per-resource grants). Consolidating to group-based roles at higher scopes can reduce policy evaluation work and administrative overhead.

Step 3: TypeScript Azure Function to list deep-scope role assignments with retry (Managed Identity)

// File: index.ts (Azure Functions v4, Node 20)
// Purpose: Enumerate role assignments and flag deep-scope patterns.
// Auth: ManagedIdentityCredential (no client secrets). Strict typing. Basic retry for 429.
//
// Ensure you enable a system-assigned identity on the Function App and grant it Reader on the subscription.
// package.json should include: @azure/identity, @azure/arm-authorization, zod

import { AzureFunction, Context } from "@azure/functions";
import { ManagedIdentityCredential } from "@azure/identity";
import { AuthorizationManagementClient, RoleAssignment } from "@azure/arm-authorization";
import { z } from "zod";

// Validate required environment variable via Zod (strict typing)
const EnvSchema = z.object({
  SUBSCRIPTION_ID: z.string().min(1)
});
const env = EnvSchema.parse(process.env);

const httpTrigger: AzureFunction = async function (context: Context): Promise<void> {
  // Create credential using Managed Identity (no secrets in code or env)
  const credential = new ManagedIdentityCredential();
  const authClient = new AuthorizationManagementClient(credential, env.SUBSCRIPTION_ID);

  // Simple retry wrapper for throttle-prone calls (e.g., large tenants)
  async function withRetry<T>(fn: () => Promise<T>, attempts = 5, delayMs = 1000): Promise<T> {
    let lastErr: unknown;
    for (let i = 0; i < attempts; i++) {
      try {
        return await fn();
      } catch (err: unknown) {
        const anyErr = err as { statusCode?: number };
        if (anyErr?.statusCode === 429 || anyErr?.statusCode === 503) {
          await new Promise((r) => setTimeout(r, delayMs * (i + 1))); // Exponential-ish backoff
          lastErr = err;
          continue;
        }
        throw err;
      }
    }
    throw lastErr;
  }

  // List role assignments at subscription scope
  const scope = `/subscriptions/${env.SUBSCRIPTION_ID}`;
  const assignments: RoleAssignment[] = [];

  // Use retry around list calls; the SDK returns an async iterator
  const pager = authClient.roleAssignments.listForSubscription();
  for await (const item of pager) {
    assignments.push(item);
  }

  // Score depth by scope path complexity
  const scoreDepth = (s: string): number => s.split("/").filter(Boolean).length / 2;
  const hotspots = assignments
    .map(a => ({ id: a.id!, scope: a.scope!, depth: scoreDepth(a.scope!) }))
    .filter(x => x.depth >= 3); // resource-level assignments

  context.res = {
    status: 200,
    headers: { "content-type": "application/json" },
    body: {
      analyzed: assignments.length,
      resourceLevelAssignments: hotspots.length,
      hotspotSamples: hotspots.slice(0, 10)
    }
  };
};

export default httpTrigger;

Why this helps: A quick serverless audit allows teams to discover where inheritance-like patterns are being bypassed in Azure RBAC, which is a frequent source of performance and governance friction.

Step 4: Azure Bicep to deploy a Function App with Managed Identity and least privilege

// File: main.bicep
// Purpose: Deploy a Function App with system-assigned managed identity,
// and assign Reader at the resource group scope (principle of least privilege).
// Includes a deterministic GUID for role assignment name.
//
// Note: Reader role definition ID is acdd72a7-3385-48ef-bd42-f606fba81ae7
// (Allows viewing resources, not making changes.)

@description('Location for resources')
param location string = resourceGroup().location

@description('Function App name')
param functionAppName string

@description('Storage account name (must be globally unique)')
param storageAccountName string

var roleDefinitionIdReader = '/providers/Microsoft.Authorization/roleDefinitions/acdd72a7-3385-48ef-bd42-f606fba81ae7'

// Storage (for Functions)
resource stg 'Microsoft.Storage/storageAccounts@2023-01-01' = {
  name: storageAccountName
  location: location
  sku: {
    name: 'Standard_LRS'
  }
  kind: 'StorageV2'
  properties: {
    allowBlobPublicAccess: false
    minimumTlsVersion: 'TLS1_2'
    supportsHttpsTrafficOnly: true
  }
}

// Hosting plan (Consumption)
resource plan 'Microsoft.Web/serverfarms@2022-09-01' = {
  name: '${functionAppName}-plan'
  location: location
  sku: {
    name: 'Y1'
    tier: 'Dynamic'
  }
}

// Function App with system-assigned identity
resource func 'Microsoft.Web/sites@2022-09-01' = {
  name: functionAppName
  location: location
  kind: 'functionapp'
  identity: {
    type: 'SystemAssigned'
  }
  properties: {
    serverFarmId: plan.id
    siteConfig: {
      appSettings: [
        { name: 'FUNCTIONS_WORKER_RUNTIME', value: 'node' }
        { name: 'WEBSITE_RUN_FROM_PACKAGE', value: '1' }
      ]
    }
  }
}

// Assign Reader at the resource group scope to the Function's identity
// Use a stable, deterministic GUID based on scope + principal to avoid duplicates.
resource readerAssign 'Microsoft.Authorization/roleAssignments@2022-04-01' = {
  name: guid(resourceGroup().id, func.identity.principalId, roleDefinitionIdReader)
  scope: resourceGroup()
  properties: {
    roleDefinitionId: subscriptionResourceId('Microsoft.Authorization/roleDefinitions', 'acdd72a7-3385-48ef-bd42-f606fba81ae7')
    principalId: func.identity.principalId
    principalType: 'ServicePrincipal'
  }
}

Why this helps: You deploy secure defaults and enforce least privilege by design. The deterministic GUID prevents accidental duplicate role assignments. Reader is explicitly chosen to avoid write permissions while enabling inventory and audits.

Where performance issues occur

  • SharePoint: Many items with unique permissions increase ACL checks and can slow list queries, indexing, and certain sharing operations. Batch operations on items with unique permissions are more likely to hit throttling.
  • Azure RBAC: Thousands of per-resource role assignments increase evaluation work during authorization and complicate policy and compliance scans. It also prolongs investigations during incidents.
  • Auditing and reviews: Per-user, per-resource assignments inflate review surfaces and make access recertification slow and error-prone.

Best Practices & Security

  • Use Managed Identity or Azure AD Workload Identity. Avoid client secrets for server-side workloads. Do not store secrets in environment variables. If you must handle secrets, use Azure Key Vault with RBAC and Managed Identity.
  • Prefer group-based assignments over direct user assignments. This simplifies reviews and minimizes churn.
  • Favor higher-scope role assignments with least privilege. Start at management group or subscription only when justified and narrow to Reader or custom roles that fit the minimal required actions.
  • When exceptions are necessary, document them. Add expiration and owners to each exception.
  • For SharePoint, grant permissions at the site or library level using groups. Reserve item-level breaks for rare, time-bound cases.
  • Monitor continuously. Integrate with Azure Monitor and Azure Policy to detect excessive deep-scope assignments. Create alerts on abnormal growth of role assignments or access anomalies.
  • Implement retry and backoff for API calls that can throttle (429/503), both in audits and operational tooling.
  • Standardize terminology. Use "inheritance" consistently to avoid confusion in documentation and automation.

Recommendation: If you need read-only inventory across a subscription, assign the Reader role (roleDefinitionId acdd72a7-3385-48ef-bd42-f606fba81ae7) to a Managed Identity and call Azure SDKs or ARM REST with exponential backoff.

Summary

  • Breaking inheritance increases complexity and can degrade performance; reserve it for rare, time-bound exceptions.
  • Automate audits with Managed Identity using .NET 8 and TypeScript to find deep-scope hotspots and consolidate access.
  • Ship secure-by-default with Bicep: least privilege (Reader), deterministic role assignment IDs, and continuous monitoring via Azure services.

Friday, 16 January 2026

Implementing PnP People Picker in React for SPFx: A Ready-to-Use Example with Strict TypeScript and Zod

The primary keyword pnp people picker control in react for SPfx with example sets the scope: implement a production-grade People Picker in a SharePoint Framework (SPFx) web part using React, strict TypeScript, and Zod validation. Why this matters: avoid vague selections, respect tenant boundaries and theming, and ship a fast, accessible control that your security team can approve.

The Problem

Developers often wire up People Picker quickly, then face issues with invalid selections, poor performance in large tenants, theming mismatches, and missing API permissions. The goal is a robust People Picker that validates data, performs well, and aligns with SPFx and Microsoft 365 security constraints.

Prerequisites

  • Node.js v20+
  • SPFx v1.18+ (React and TypeScript template)
  • @pnp/spfx-controls-react v3.23.0+ (PeoplePicker)
  • TypeScript strict mode enabled ("strict": true)
  • Zod v3.23.8+ for schema validation
  • Tenant admin rights to approve Microsoft Graph permissions for the package

The Solution (Step-by-Step)

1) Install dependencies and pin versions

npm install @pnp/spfx-controls-react@3.23.0 zod@3.23.8

Recommendation: pin versions to prevent accidental breaking changes in builds.

2) Configure delegated permissions (least privilege)

In config/package-solution.json, request the minimum Graph scopes needed to resolve people:

{
  "solution": {
    "webApiPermissionRequests": [
      { "resource": "Microsoft Graph", "scope": "User.ReadBasic.All" },
      { "resource": "Microsoft Graph", "scope": "People.Read" }
    ]
  }
}

After packaging and deploying, a tenant admin must approve these scopes. These are delegated permissions tied to the current user; no secrets or app-only access are required for the People Picker scenario.

3) Implement a strict, validated People Picker component

/* PeoplePickerField.tsx */
import * as React from "react";
import { useCallback, useMemo, useState } from "react";
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
import { z } from "zod";

// Define the shape we accept from People Picker selections
// The control returns IPrincipal-like objects; we validate subset we rely upon.
const PersonSchema = z.object({
  id: z.union([z.string(), z.number()]), // Graph or SP ID can be number or string
  secondaryText: z.string().nullable().optional(), // usually email or subtitle
  text: z.string().min(1), // display name
});

const SelectedPeopleSchema = z.array(PersonSchema).max(5); // enforce cardinality

export type ValidPerson = z.infer<typeof PersonSchema>;

export interface PeoplePickerFieldProps {
  context: WebPartContext; // SPFx context to ensure tenant and theme alignment
  label?: string;
  required?: boolean;
  maxPeople?: number; // override default of 5
  onChange: (people: ValidPerson[]) => void; // emits validated data only
}

// Memoized to avoid unnecessary re-renders in large forms
const PeoplePickerField: React.FC<PeoplePickerFieldProps> = ({
  context,
  label = "Assign to",
  required = false,
  maxPeople = 5,
  onChange,
}) => {
  // Internal state to show validation feedback
  const [error, setError] = useState<string | null>(null);

  // Enforce hard cap
  const personSelectionLimit = useMemo(() => Math.min(Math.max(1, maxPeople), 25), [maxPeople]);

  // Convert PeoplePicker selections through Zod
  const handleChange = useCallback((items: unknown[]) => {
    // PeoplePicker sends unknown shape; validate strictly before emitting
    const parsed = SelectedPeopleSchema.safeParse(items);
    if (!parsed.success) {
      setError("Invalid selection. Please choose valid users only.");
      onChange([]);
      return;
    }

    // Optional business rule: ensure each user has an email-like secondaryText
    const withEmail = parsed.data.filter(p => (p.secondaryText ?? "").includes("@"));
    if (withEmail.length !== parsed.data.length) {
      setError("Some selections are missing a valid email.");
      onChange([]);
      return;
    }

    setError(null);
    onChange(parsed.data);
  }, [onChange]);

  return (
    <div>
      <label>{label}{required ? " *" : ""}</label>
      {/**
       * PeoplePicker respects SPFx theme through provided context.
       * Use PrincipalType to limit search to users only, avoiding groups for clarity.
       */}
      <PeoplePicker
        context={context}
        titleText={label}
        personSelectionLimit={personSelectionLimit}
        ensureUser={true} // resolves users to the site collection to avoid auth issues
        showHiddenInUI={false}
        principalTypes={[PrincipalType.User]}
        resolveDelay={300} // debounce for performance in large tenants
        onChange={handleChange}
        required={required}
      />

      {/** Live region for accessibility */}
      <div aria-live="polite">{error ? error : ""}</div>
    </div>
  );
};

export default React.memo(PeoplePickerField);

Notes: resolveDelay reduces repeated queries while typing. principalTypes avoids unnecessary group matches unless you require them.

4) Use the field in a web part with validated submit

/* MyWebPartComponent.tsx */
import * as React from "react";
import { useCallback, useState } from "react";
import { WebPartContext } from "@microsoft/sp-webpart-base";
import PeoplePickerField, { ValidPerson } from "./PeoplePickerField";

interface MyWebPartProps { context: WebPartContext; }

const MyWebPartComponent: React.FC<MyWebPartProps> = ({ context }) => {
  const [assignees, setAssignees] = useState<ValidPerson[]>([]);
  const [submitStatus, setSubmitStatus] = useState<"idle" | "saving" | "success" | "error">("idle");

  const handlePeopleChange = useCallback((people: ValidPerson[]) => setAssignees(people), []);

  const handleSubmit = useCallback(async () => {
    try {
      setSubmitStatus("saving");
      // Example: persist only the IDs or emails to a list/Graph to avoid storing PII redundantly
      const payload = assignees.map(p => ({ id: String(p.id), email: p.secondaryText }));
      // TODO: call a secure API (e.g., SPHttpClient to SharePoint list) using current user's context
      await new Promise(r => setTimeout(r, 600)); // simulate network
      setSubmitStatus("success");
    } catch {
      setSubmitStatus("error");
    }
  }, [assignees]);

  return (
    <div>
      <h3>Create Task</h3>
      <PeoplePickerField
        context={context}
        label="Assignees"
        required={true}
        maxPeople={3}
        onChange={handlePeopleChange}
      />
      <button onClick={handleSubmit} disabled={assignees.length === 0 || submitStatus === "saving"}>
        Save
      </button>
      <div aria-live="polite">{submitStatus === "saving" ? "Saving..." : ""}</div>
      <div aria-live="polite">{submitStatus === "success" ? "Saved" : ""}</div>
      <div aria-live="polite">{submitStatus === "error" ? "Save failed" : ""}</div>
    </div>
  );
};

export default MyWebPartComponent;

5) Authentication in SPFx context

SPFx provides delegated authentication via the current user. For Microsoft Graph calls, use MSGraphClientFactory; for SharePoint calls, use SPHttpClient. You do not need to store tokens; SPFx handles tokens and consent. Avoid manual token acquisition unless implementing advanced scenarios.

6) Minimal test to validate the component contract

// PeoplePickerField.test.tsx
import React from "react";
import { render } from "@testing-library/react";
import PeoplePickerField from "./PeoplePickerField";

// Mock SPFx WebPartContext minimally for the control; provide shape your test runner needs
const mockContext = {} as unknown as any; // In real tests, provide a proper mock of the context APIs used by the control

test("renders label and enforces required", () => {
  const { getByText } = render(
    <PeoplePickerField context={mockContext} label="Assignees" required onChange={() => {}} />
  );
  expect(getByText(/Assignees/)).toBeTruthy();
});

Note: In integration tests, mount within an SPFx test harness or mock the PeoplePicker dependency. For unit tests, focus on validation logic paths invoked by onChange.

Best Practices & Security

  • Least privilege permissions. Request only User.ReadBasic.All and People.Read for resolving users. Do not request write scopes unless necessary.
  • Azure RBAC and Microsoft 365 roles. This scenario uses delegated permissions within Microsoft 365; no Azure subscription RBAC role is required. Users need a valid SharePoint license and access to the site. Tenant admin must approve Graph scopes. For directory-read scenarios beyond basics, Directory Readers role may be required by policy.
  • PII hygiene. Persist only identifiers (e.g., user IDs or emails) rather than full profiles. Avoid logging personal data. Mask PII in telemetry.
  • Performance. Use resolveDelay to debounce search. Limit personSelectionLimit to a realistic value (e.g., 3–5). Memoize the field (React.memo) and callbacks (useCallback) to reduce re-renders in complex forms.
  • Accessibility. Provide aria-live regions for validation and submit status. Ensure color contrast via SPFx theming; the PeoplePicker uses SPFx theme tokens when context is provided.
  • Theming. Always pass the SPFx context to ensure the control inherits the current site theme.
  • Error resilience. Wrap parent forms with an error boundary to display a fallback UI if a child component throws.
  • Versioning. Pin dependency versions in package.json to avoid unexpected changes. Regularly update to the latest stable to receive security fixes.
  • No server-side tech references here. Entity Framework patterns such as AsNoTracking are not applicable in SPFx client-side code.

Example package.json pins

{
  "dependencies": {
    "@pnp/spfx-controls-react": "3.23.0",
    "zod": "3.23.8"
  }
}

Optional: Error boundary pattern

import React from "react";

class ErrorBoundary extends React.Component<{}, { hasError: boolean }> {
  constructor(props: {}) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError() { return { hasError: true }; }
  render() { return this.state.hasError ? <div>Something went wrong.</div> : this.props.children; }
}

export default ErrorBoundary;

Wrap your form: ErrorBoundary around MyWebPartComponent to ensure a graceful fallback.

Summary

  • Implemented a strict, validated People Picker for SPFx with React, Zod, and tenant-aware theming via context.
  • Applied least privilege delegated permissions with admin consent, clear performance tuning, and accessibility patterns.
  • Hardened production readiness through validation-first design, memoization, testing hooks, and pinned dependencies.