Authentication

Overview

The application uses Microsoft Entra ID (formerly Azure AD B2C) for authentication via the MSAL (Microsoft Authentication Library) for React.

Flow

sequenceDiagram
    participant U as User Browser
    participant F as React Frontend
    participant M as Microsoft Entra ID
    participant A as Azure Functions API

    U->>F: Navigate to app
    F->>M: Redirect to login
    M->>U: Show login form
    U->>M: Enter credentials
    M->>F: Return ID token + access token
    F->>F: Store tokens via MSAL
    F->>A: API request + X-User-Token header
    A->>A: Validate JWT, extract claims
    A->>A: Look up user in app_users table
    A->>F: Return role-scoped data

User Table (app_users)

Column	Description
email	Microsoft account email (unique)
display_name	User's display name
role	Vendor, PO_Manager, or Admin
vendor_code	For Vendor role: linked billing_company
is_active	Account enabled/disabled

Role-Based Data Scoping

• Vendor: Only sees POs where billing_company matches their vendor_code
• PO Manager: Sees all POs
• Admin: Sees all POs + can manage users

Frontend Configuration

Auth settings are in frontend/src/authConfig.ts:

• clientId — Azure AD application registration ID
• authority — Azure AD B2C tenant authority URL
• redirectUri — Application redirect URI