Fix MSAL interaction_in_progress and redirect URI mismatch

- Refactor auth init: initialize MSAL before React mounts so MsalProvider
  handles handleRedirectPromise exactly once (no double-calls, no stale locks)
- Simplify AuthGuard to pure AuthenticatedTemplate/UnauthenticatedTemplate
- Remove trailing slash from redirect URI to match Azure AD registration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.example

@@ -4,9 +4,9 @@
 # ── 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_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_REDIRECT_URI=http://localhost:8888/lusa-Back-Planner

src/components/AuthGuard.tsx

@@ -1,11 +1,9 @@
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode } from "react";
 import {
-  MsalProvider,
   AuthenticatedTemplate,
   UnauthenticatedTemplate,
   useMsal,
 } from "@azure/msal-react";
-import { IPublicClientApplication } from "@azure/msal-browser";
 import { loginRequest } from "@/lib/msal-config";
 
 function LoginPage() {
@@ -47,33 +45,16 @@ function LoginPage() {
 }
 
 interface AuthGuardProps {
-  instance: IPublicClientApplication;
   children: ReactNode;
 }
 
-export default function AuthGuard({ instance, children }: AuthGuardProps) {
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    instance.initialize().then(() => {
-      instance.handleRedirectPromise().then(() => setIsReady(true));
-    });
-  }, [instance]);
-
-  if (!isReady) {
-    return (
-      <div className="flex h-screen items-center justify-center">
-        <div className="animate-spin h-8 w-8 rounded-full border-4 border-primary border-t-transparent" />
-      </div>
-    );
-  }
-
+export default function AuthGuard({ children }: AuthGuardProps) {
   return (
-    <MsalProvider instance={instance}>
+    <>
       <AuthenticatedTemplate>{children}</AuthenticatedTemplate>
       <UnauthenticatedTemplate>
         <LoginPage />
       </UnauthenticatedTemplate>
-    </MsalProvider>
+    </>
   );
 }

src/main.tsx

@@ -3,9 +3,16 @@ import App from "./App.tsx";
 import "./index.css";
 import AuthGuard from "./components/AuthGuard.tsx";
 import { msalInstance } from "./lib/msal-config.ts";
+import { MsalProvider } from "@azure/msal-react";
 
-createRoot(document.getElementById("root")!).render(
-  <AuthGuard instance={msalInstance}>
-    <App />
-  </AuthGuard>
-);
+// Initialize MSAL before mounting React so MsalProvider handles
+// handleRedirectPromise exactly once — no double-calls, no stale locks.
+msalInstance.initialize().then(() => {
+  createRoot(document.getElementById("root")!).render(
+    <MsalProvider instance={msalInstance}>
+      <AuthGuard>
+        <App />
+      </AuthGuard>
+    </MsalProvider>
+  );
+});