Connexion Facebook / LinkedIn en OAuth depuis le backoffice

Les jetons se posaient à la main dans docker-compose. Un écran Backend ›
Réseaux sociaux permet désormais de coller les identifiants de l'application,
cliquer Connecter, choisir la page, et ne plus y revenir.

- Table `social_accounts` : identifiants, jetons et cible par réseau. Tous les
  secrets sont chiffrés en AES-256-GCM (`src/lib/crypto.ts`), clé
  `SOCIAL_TOKEN_KEY` avec repli sur `AUTH_SECRET`.
- Routes `api/social/[network]/{connect,callback}` : `state` anti-CSRF en cookie
  httpOnly, échange du code, récupération des pages administrées. Aucun jeton ne
  transite par une URL — les cibles sont relistées côté serveur au moment de la
  sélection.
- Facebook : jeton utilisateur longue durée puis jeton de PAGE, qui n'expire
  pas. LinkedIn : jeton 60 jours, rafraîchi automatiquement si l'application a
  obtenu les jetons de rafraîchissement programmatiques.
- Faute de quoi le backoffice affiche la date d'expiration, un bandeau sur le
  tableau de bord à J-7 et un bouton Reconnecter.
- `social.ts` lit les identifiants via `social-accounts.ts` : base d'abord,
  variables d'environnement ensuite. Les installations existantes continuent de
  fonctionner sans modification.
- Le secret d'application n'est jamais renvoyé au navigateur : champ vide =
  valeur conservée.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QXNXRC4j5VLfKvpyyisrnb

src/app/backend/page.tsx

@@ -4,7 +4,8 @@ import { desc, eq } from "drizzle-orm";
 import { auth } from "@/auth";
 import { db } from "@/db";
 import { activityLog, contactMessages, members, membershipRequests, promotions } from "@/db/schema";
-import { isStaff } from "@/lib/rbac";
+import { can, isStaff } from "@/lib/rbac";
+import { expiryStatus, getSocialAccounts, SOCIAL_LABELS } from "@/lib/social-accounts";
 
 export const dynamic = "force-dynamic";
 
@@ -49,6 +50,15 @@ export default async function DashboardPage() {
 
   const pendingCount = pendingPromos.length;
 
+  // Jetons réseaux à renouveler : sans alerte, on ne découvre l'expiration
+  // qu'au moment où une publication échoue.
+  const expiringNetworks = can(session?.user.role, "manageSettings")
+    ? (await getSocialAccounts())
+        .filter((a) => a.accessToken && a.targetId)
+        .map((a) => ({ network: a.network, status: expiryStatus(a.expiresAt) }))
+        .filter((a) => a.status === "soon" || a.status === "expired")
+    : [];
+
   function timeAgo(date: Date) {
     const diff = Date.now() - new Date(date).getTime();
     const h = Math.floor(diff / 3_600_000);
@@ -60,6 +70,34 @@ export default async function DashboardPage() {
 
   return (
     <div>
+      {expiringNetworks.length > 0 && (
+        <Link
+          href="/backend/reseaux"
+          style={{
+            display: "block",
+            textDecoration: "none",
+            background: "#fbeede",
+            border: "1px solid #ecd8b8",
+            color: "#9a6638",
+            borderRadius: 12,
+            padding: "13px 16px",
+            marginBottom: 20,
+            fontSize: 13.5,
+            lineHeight: 1.6,
+          }}
+        >
+          {expiringNetworks.map((n) => (
+            <div key={n.network}>
+              <strong>{SOCIAL_LABELS[n.network]}</strong>{" "}
+              {n.status === "expired"
+                ? "— le jeton a expiré, les publications échoueront."
+                : "— le jeton expire dans moins de 7 jours."}{" "}
+              Reconnecter le compte →
+            </div>
+          ))}
+        </Link>
+      )}
+
       <div className="grid grid-4" style={{ marginBottom: 26 }}>
         <StatCard label="Adhérents actifs" value={activeMembers.length} hint="sur le réseau" valueColor="#13324F" hintColor="#1f8a5b" />
         <StatCard label="Promotions en ligne" value={livePromos.length} hint="visibles sur le site" />