Checkpoint: Connexion Microsoft 365 (Azure AD OAuth2) : migration DB azureAdId, helpers backend, route callback, bouton Login, page AzureCallback, tests OK

client/src/App.tsx

@@ -14,6 +14,7 @@ import UsersAdmin from "./pages/UsersAdmin";
 import ImportLogs from "./pages/ImportLogs";
 import BoiteAIdees from "@/pages/BoiteAIdees";
 import RssFeeds from "@/pages/RssFeeds";
+import AzureCallback from "@/pages/AzureCallback";
 import { Loader2 } from "lucide-react";
 
 // ─── Guard d'authentification ─────────────────────────────────────────────────
@@ -125,6 +126,7 @@ function Router() {
   return (
     <Switch>
       <Route path="/login" component={Login} />
+      <Route path="/azure-callback" component={AzureCallback} />
       <Route path="/">
         <Redirect to="/veille" />
       </Route>

client/src/contexts/LocalAuthContext.tsx

@@ -14,6 +14,7 @@ interface LocalAuthContextType {
   loading: boolean;
   login: (identifier: string, password: string) => Promise<void>;
   logout: () => Promise<void>;
+  hydrateUser: (user: LocalUser) => void;
   isAuthenticated: boolean;
 }
 
@@ -57,6 +58,11 @@ export function LocalAuthProvider({ children }: { children: ReactNode }) {
     localStorage.removeItem(LOCAL_USER_KEY);
   };
 
+  const hydrateUser = (u: LocalUser) => {
+    setUser(u);
+    localStorage.setItem(LOCAL_USER_KEY, JSON.stringify(u));
+  };
+
   return (
     <LocalAuthContext.Provider
       value={{
@@ -64,6 +70,7 @@ export function LocalAuthProvider({ children }: { children: ReactNode }) {
         loading,
         login,
         logout,
+        hydrateUser,
         isAuthenticated: !!user,
       }}
     >

client/src/pages/AzureCallback.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import { useLocation } from "wouter";
+import { useLocalAuth } from "@/contexts/LocalAuthContext";
+import { Loader2 } from "lucide-react";
+
+/**
+ * Page intermédiaire appelée après le callback Azure AD.
+ * Elle récupère les infos user depuis le query param, hydrate LocalAuthContext
+ * (localStorage + state), puis redirige vers /veille.
+ */
+export default function AzureCallback() {
+  const [, navigate] = useLocation();
+  const { hydrateUser } = useLocalAuth();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const userParam = params.get("user");
+
+    if (userParam) {
+      try {
+        const user = JSON.parse(decodeURIComponent(userParam));
+        hydrateUser(user);
+        navigate("/veille");
+      } catch {
+        navigate("/login?error=" + encodeURIComponent("Erreur lors de la connexion Microsoft"));
+      }
+    } else {
+      navigate("/login?error=" + encodeURIComponent("Réponse Azure invalide"));
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center">
+      <div className="flex flex-col items-center gap-4 text-muted-foreground">
+        <Loader2 className="h-8 w-8 animate-spin" />
+        <p className="text-sm">Connexion Microsoft en cours…</p>
+      </div>
+    </div>
+  );
+}

client/src/pages/Login.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useLocation } from "wouter";
 import { useLocalAuth } from "@/contexts/LocalAuthContext";
+import { trpc } from "@/lib/trpc";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -11,14 +12,40 @@ import { toast } from "sonner";
 const ITINOVA_LOGO = "https://d2xsxph8kpxj0f.cloudfront.net/310519663070627318/VepzDyqR8YkJNcqpZ729Bw/itinova-logo_8e653b24.jpg";
 const SANTINOVA_LOGO = "https://d2xsxph8kpxj0f.cloudfront.net/310519663070627318/VepzDyqR8YkJNcqpZ729Bw/santinova-logo_b8de54c4.webp";
 
+function MicrosoftLogo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" width="18" height="18">
+      <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
+      <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
+      <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
+      <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
+    </svg>
+  );
+}
+
 export default function Login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [azureLoading, setAzureLoading] = useState(false);
   const { login } = useLocalAuth();
   const [, navigate] = useLocation();
 
+  const azureAvailableQuery = trpc.auth.isAzureAdAvailable.useQuery();
+  const azureLoginQuery = trpc.auth.getAzureLoginUrl.useQuery(undefined, { enabled: false, retry: false });
+  const azureAvailable = azureAvailableQuery.data?.available ?? false;
+
+  // Afficher les erreurs depuis query param (callback Azure)
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const error = params.get("error");
+    if (error) {
+      toast.error(decodeURIComponent(error));
+      window.history.replaceState({}, "", "/login");
+    }
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!email || !password) return;
@@ -34,6 +61,22 @@ export default function Login() {
     }
   };
 
+  const handleMicrosoftLogin = async () => {
+    setAzureLoading(true);
+    try {
+      const result = await azureLoginQuery.refetch();
+      if (result.data?.url) {
+        window.location.href = result.data.url;
+      } else {
+        toast.error("Impossible d'obtenir l'URL de connexion Microsoft");
+        setAzureLoading(false);
+      }
+    } catch {
+      toast.error("Erreur lors de la connexion Microsoft");
+      setAzureLoading(false);
+    }
+  };
+
   return (
     <div className="min-h-screen bg-background flex items-center justify-center p-4">
       {/* Décoration de fond */}
@@ -67,6 +110,34 @@ export default function Login() {
             </CardDescription>
           </CardHeader>
           <CardContent>
+            {/* Bouton Microsoft 365 — affiché uniquement si Azure AD est configuré */}
+            {azureAvailable && (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full flex items-center gap-3 border-slate-300 bg-white hover:bg-slate-50 text-slate-700 font-medium mb-4"
+                  onClick={handleMicrosoftLogin}
+                  disabled={azureLoading}
+                >
+                  {azureLoading ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <MicrosoftLogo />
+                  )}
+                  Se connecter avec Microsoft 365
+                </Button>
+                <div className="relative mb-4">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t border-slate-200" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-card px-2 text-muted-foreground">ou</span>
+                  </div>
+                </div>
+              </>
+            )}
+
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="space-y-2">
                 <Label htmlFor="email">Identifiant ou e-mail</Label>