From 7c19fb5c37d482fc4fa0fcdfaa04647fca2af28a Mon Sep 17 00:00:00 2001 From: Manish Tanwar Date: Mon, 16 Mar 2026 16:28:47 +0530 Subject: [PATCH] add msal sso-page-error --- .env.example | 12 ++++++------ CLAUDE.md | 34 ++++++++++++++++++++++++---------- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/.env.example b/.env.example index 78cbe6d..a63346b 100644 --- a/.env.example +++ b/.env.example @@ -2,11 +2,11 @@ # All variables must use the VITE_ prefix to be accessible in the browser. # ── Server deployment ────────────────────────────────────────────────────────── -# VITE_AZURE_TENANT_ID=e519c2e6-bc6d-4fdf-8d9c-923c2f002385 -# VITE_AZURE_CLIENT_ID=9079054c-9620-4757-a256-23413042f1ef -# VITE_AZURE_REDIRECT_URI=https://ai-sandbox.oliver.solutions/lusa-back-planner/ +VITE_AZURE_TENANT_ID=e519c2e6-bc6d-4fdf-8d9c-923c2f002385 +VITE_AZURE_CLIENT_ID=9079054c-9620-4757-a256-23413042f1ef +VITE_AZURE_REDIRECT_URI=https://ai-sandbox.oliver.solutions/lusa-back-planner/ # ── Local development ────────────────────────────────────────────────────────── -VITE_AZURE_TENANT_ID=e519c2e6-bc6d-4fdf-8d9c-923c2f002385 -VITE_AZURE_CLIENT_ID=15c0c4e2-bac0-4564-a3a6-c2717f00a6d9 -VITE_AZURE_REDIRECT_URI=http://localhost:3000/ +# VITE_AZURE_TENANT_ID=e519c2e6-bc6d-4fdf-8d9c-923c2f002385 +# VITE_AZURE_CLIENT_ID=15c0c4e2-bac0-4564-a3a6-c2717f00a6d9 +# VITE_AZURE_REDIRECT_URI=http://localhost:3000/ diff --git a/CLAUDE.md b/CLAUDE.md index 0e616ed..342447d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -5,14 +5,14 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co ## Commands ```bash -npm run dev # Dev server at localhost:8080 +npm run dev # Dev server at localhost:3000 npm run build # Production build → dist/ npm run build:dev # Development build npm run preview # Preview production build npm run lint # ESLint npm run test # Vitest (single run) npm run test:watch # Vitest (watch mode) -npm run test -- src/lib/workdays.test.ts # Run a single test file +npm run test -- src/test/example.test.ts # Run a single test file ``` ## Architecture @@ -30,24 +30,38 @@ Client-side React SPA (no backend) for generating production timelines for L'Or - **`src/lib/brands.ts`** — 38 L'Oréal brand definitions - **`src/components/TimelineView.tsx`** — Timeline display, inline editing, PDF export (jsPDF + html2canvas) - **`src/components/ChangeRequestTab.tsx`** — Upload existing timeline, add update reason, re-export -- **`src/components/ui/`** — shadcn/ui primitives (do not manually edit; use shadcn CLI to add new ones) +- **`src/components/AuthGuard.tsx`** — Wraps the app; shows a login page with SSO button for unauthenticated users, handles MSAL redirect flow +- **`src/components/ui/`** — shadcn/ui primitives (do not manually edit; use `npx shadcn-ui@latest add ` to add new ones) ### Data flow -1. User uploads a PDF brief → `parse-brief.ts` extracts date/brand/lane suggestion -2. User confirms lane + deadline → `templates.ts:generateTimeline()` creates milestones by subtracting workdays from the deadline -3. `TimelineView` renders milestones and handles PDF export -4. Change requests: upload existing timeline PDF → parser extracts milestones → user selects update reason → new PDF exported +1. User lands on app → `AuthGuard` checks MSAL session; unauthenticated users see a login page with "Sign in with Microsoft" button +2. After SSO, user uploads a PDF brief → `parse-brief.ts` extracts date/brand/lane suggestion +3. User confirms lane + deadline → `templates.ts:generateTimeline()` creates milestones by subtracting workdays from the deadline +4. `TimelineView` renders milestones and handles PDF export +5. Change requests: upload existing timeline PDF → parser extracts milestones → user selects update reason → new PDF exported + +### Component tree + +`main.tsx` renders `AuthGuard` → `MsalProvider` → `App` → `BrowserRouter` → Routes. Auth wraps _outside_ the router, so all routes require authentication. New routes go in `App.tsx` above the catch-all `*` route. ### Authentication (MSAL / Azure AD SSO) -- `src/lib/msal-config.ts` exports `msalInstance` and `loginRequest`; `src/components/AuthGuard.tsx` wraps the app and handles redirect flow -- Required `.env` variables: +- `src/lib/msal-config.ts` exports `msalInstance` and `loginRequest`; all config is read from env vars at module load time +- `AuthGuard` calls `instance.initialize()` then `handleRedirectPromise()` before rendering; does **not** auto-redirect — it renders a login page and the user clicks to initiate the redirect +- Required `.env` variables (must use `VITE_` prefix): - `VITE_AZURE_TENANT_ID` - `VITE_AZURE_CLIENT_ID` - `VITE_AZURE_REDIRECT_URI` - Cache strategy: `sessionStorage`; login scope: `User.Read` -- Base path in `vite.config.ts` is `/lusa-back-planner/` — must match deployment URL +- Two environments (see `.env.example` for full values): + - **Local**: `VITE_AZURE_CLIENT_ID=15c0c4e2-...`, redirect `http://localhost:3000/` + - **Server**: `VITE_AZURE_CLIENT_ID=9079054c-...`, redirect `https://ai-sandbox.oliver.solutions/lusa-back-planner/` +- Base path in `vite.config.ts` is `/lusa-back-planner/` in production, `/` in dev — the redirect URI registered in Azure AD must match exactly + +### Deployment + +Static site deployed to Apache on Ubuntu. Production build outputs to `dist/`. Hosted at `https://ai-sandbox.oliver.solutions/lusa-back-planner/` as a subdirectory with `FallbackResource` for SPA routing. See `README.md` for full Apache config. ### Conventions