feat(tiktok): publier les reels sur les comptes TikTok des magasins

Ajoute la gestion multi-comptes TikTok et permet d'envoyer la même vidéo
sur plusieurs pages Facebook ET plusieurs comptes TikTok en une seule
publication.

Un compte TikTok vit dans social_pages comme une page Facebook : il hérite
donc des permissions par utilisateur, de la planification et du calendrier.

Trois particularités de l'API TikTok structurent l'implémentation :
- pas de jeton saisi à la main : chaque compte passe par OAuth, et
  l'access token (24h) est renouvelé via le refresh token (1 an) avant
  chaque publication ;
- la publication est asynchrone : l'upload rend un publish_id, et un
  poller récupère l'identifiant définitif du post ;
- creator_info doit être interrogé avant chaque envoi pour ne demander
  qu'un niveau de confidentialité réellement autorisé sur le compte.

Serveur :
- service TikTok (OAuth, creator_info, upload FILE_UPLOAD par chunks,
  suivi de statut) et routes de connexion/configuration
- schéma : platform 'tiktok', refresh token et scopes sur social_pages,
  publish_id/publish_status sur scheduled_posts, table tiktok_config
- routage par plateforme dans les deux flux de reels et le planificateur
- cron de suivi des publications, token manager et analytics adaptés

Client :
- connexion et reconnexion des comptes TikTok depuis « Pages gérées »
- sélection combinée pages Facebook / comptes TikTok à la publication
- configuration de l'application TikTok dans les paramètres (admin)

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

client/src/components/calendar-list-view.tsx

@@ -1,7 +1,7 @@
 import { format, isSameDay, parseISO } from "date-fns";
 import { fr } from "date-fns/locale";
 import { Edit, Trash2, ChevronDown, ChevronUp, Eye, Image, Smartphone } from "lucide-react";
-import { SiFacebook, SiInstagram } from "react-icons/si";
+import { SiFacebook, SiInstagram, SiTiktok } from "react-icons/si";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
 
@@ -159,7 +159,7 @@ export default function CalendarListView({ scheduledPosts, onEditPost, onDeleteP
                     const isPublished = !!post.publishedAt;
                     const pageName = post.page?.pageName || 'Page inconnue';
                     const platform = post.page?.platform || 'facebook';
-                    const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
+                    const PlatformIcon = platform === 'instagram' ? SiInstagram : platform === 'tiktok' ? SiTiktok : SiFacebook;
 
                     return (
                       <div

client/src/components/calendar-view.tsx

@@ -6,7 +6,7 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import type { ScheduledPost } from "@shared/schema";
-import { SiFacebook, SiInstagram } from "react-icons/si";
+import { SiFacebook, SiInstagram, SiTiktok } from "react-icons/si";
 import EditScheduledPostDialog from "./edit-scheduled-post-dialog";
 import CalendarListView from "./calendar-list-view";
 import { useMediaQuery } from "@/hooks/use-media-query";
@@ -261,7 +261,7 @@ export default function CalendarView() {
                         const isPublished = !!post.publishedAt;
                         const pageName = post.page?.pageName || 'Page inconnue';
                         const platform = post.page?.platform || 'facebook';
-                        const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
+                        const PlatformIcon = platform === 'instagram' ? SiInstagram : platform === 'tiktok' ? SiTiktok : SiFacebook;
 
                         return (
                           <div
@@ -340,7 +340,7 @@ export default function CalendarView() {
                                 const isPublished = !!post.publishedAt;
                                 const pageName = post.page?.pageName || 'Page inconnue';
                                 const platform = post.page?.platform || 'facebook';
-                                const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
+                                const PlatformIcon = platform === 'instagram' ? SiInstagram : platform === 'tiktok' ? SiTiktok : SiFacebook;
 
                                 return (
                                   <div

client/src/components/managed-pages.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Users } from "lucide-react";
-import { SiFacebook, SiInstagram } from "react-icons/si";
+import { SiFacebook, SiInstagram, SiTiktok } from "react-icons/si";
 
 export default function ManagedPages() {
   const { data: pages, isLoading } = useQuery({
@@ -48,10 +48,12 @@ export default function ManagedPages() {
                 <div className="flex items-start justify-between mb-5">
                   <div className={`
                     w-14 h-14 rounded-xl flex items-center justify-center shadow-md
-                    ${page.platform === "facebook" ? "bg-[#1877F2]/10" : "bg-[#E4405F]/10"}
+                    ${page.platform === "facebook" ? "bg-[#1877F2]/10" : page.platform === "tiktok" ? "bg-foreground/10" : "bg-[#E4405F]/10"}
                   `}>
                     {page.platform === "facebook" ? (
                       <SiFacebook className="text-[#1877F2] text-2xl" />
+                    ) : page.platform === "tiktok" ? (
+                      <SiTiktok className="text-foreground text-2xl" />
                     ) : (
                       <SiInstagram className="text-[#E4405F] text-2xl" />
                     )}
@@ -65,7 +67,7 @@ export default function ManagedPages() {
                 </div>
                 <h4 className="font-semibold text-foreground text-lg mb-2">{page.pageName}</h4>
                 <p className="text-sm text-muted-foreground mb-4 font-medium">
-                  {page.platform === "facebook" ? "Facebook Page" : "Instagram Business"}
+                  {page.platform === "facebook" ? "Facebook Page" : page.platform === "tiktok" ? "Compte TikTok" : "Instagram Business"}
                 </p>
                 <div className="flex items-center justify-between pt-4 border-t border-border/50">
                   <div className="flex items-center gap-2">

client/src/components/recent-publications.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Facebook, Instagram, Clock, CheckCircle2, XCircle, Eye, Image as ImageIcon, Smartphone, Clapperboard } from "lucide-react";
+import { SiTiktok } from "react-icons/si";
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import type { ScheduledPost, SocialPage, Post, Media } from "@shared/schema";
@@ -162,10 +163,14 @@ export default function RecentPublications() {
                 {/* Platform icon */}
                 <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${scheduledPost.page?.platform === 'facebook'
                   ? 'bg-blue-500'
-                  : 'bg-gradient-to-br from-purple-500 to-pink-500'
+                  : scheduledPost.page?.platform === 'tiktok'
+                    ? 'bg-black'
+                    : 'bg-gradient-to-br from-purple-500 to-pink-500'
                   }`}>
                   {scheduledPost.page?.platform === 'facebook' ? (
                     <Facebook className="w-5 h-5 text-white" />
+                  ) : scheduledPost.page?.platform === 'tiktok' ? (
+                    <SiTiktok className="w-5 h-5 text-white" />
                   ) : (
                     <Instagram className="w-5 h-5 text-white" />
                   )}

client/src/pages/mobile/new-post.tsx

@@ -119,9 +119,12 @@ export default function NewPostMobile() {
   const [postType, setPostType] = useState<'feed' | 'story' | 'both'>('feed');
   const [previewModalOpen, setPreviewModalOpen] = useState(false);
 
-  const { data: pages = [] } = useQuery<SocialPage[]>({
+  // Ce composeur gère les publications feed/story : TikTok n'accepte que des
+  // vidéos et se pilote depuis la création de reel.
+  const { data: allPages = [] } = useQuery<SocialPage[]>({
     queryKey: ['/api/pages'],
   });
+  const pages = allPages.filter(p => p.platform !== 'tiktok');
 
   const { data: allMedia = [] } = useQuery<Media[]>({
     queryKey: ['/api/media'],

client/src/pages/mobile/new-reel.tsx

@@ -18,6 +18,7 @@ import { Slider } from "@/components/ui/slider";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient, handleUnauthorized } from "@/lib/queryClient";
 import type { SocialPage, Media } from "@shared/schema";
+import { SiFacebook, SiTiktok } from "react-icons/si";
 import { DateTimePicker } from "@/components/datetime-picker";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -114,6 +115,24 @@ export default function MobileNewReel() {
         queryKey: ['/api/pages'],
     });
 
+    // Destinations acceptant une vidéo verticale
+    const facebookPages = pages.filter(p => p.platform === 'facebook');
+    const tiktokAccounts = pages.filter(p => p.platform === 'tiktok');
+
+    const renderTargetCheckbox = (page: SocialPage) => (
+        <div key={page.id} className="flex items-center space-x-3 bg-secondary/20 p-3 rounded-lg">
+            <Checkbox
+                id={page.id}
+                checked={selectedPages.includes(page.id)}
+                onCheckedChange={(checked) => {
+                    if (checked) setSelectedPages([...selectedPages, page.id]);
+                    else setSelectedPages(selectedPages.filter(id => id !== page.id));
+                }}
+            />
+            <label htmlFor={page.id} className="font-medium flex-1">{page.pageName}</label>
+        </div>
+    );
+
     const { data: allMedia = [] } = useQuery<Media[]>({
         queryKey: ['/api/media'],
     });
@@ -585,20 +604,32 @@ export default function MobileNewReel() {
                             <CardHeader className="pb-3">
                                 <CardTitle className="text-base">Diffusion</CardTitle>
                             </CardHeader>
-                            <CardContent className="space-y-3">
-                                {pages.filter(p => p.platform === 'facebook').map((page) => (
-                                    <div key={page.id} className="flex items-center space-x-3 bg-secondary/20 p-3 rounded-lg">
-                                        <Checkbox
-                                            id={page.id}
-                                            checked={selectedPages.includes(page.id)}
-                                            onCheckedChange={(checked) => {
-                                                if (checked) setSelectedPages([...selectedPages, page.id]);
-                                                else setSelectedPages(selectedPages.filter(id => id !== page.id));
-                                            }}
-                                        />
-                                        <label htmlFor={page.id} className="font-medium flex-1">{page.pageName}</label>
+                            <CardContent className="space-y-4">
+                                {facebookPages.length === 0 && tiktokAccounts.length === 0 && (
+                                    <p className="text-sm text-muted-foreground">
+                                        Aucune page Facebook ni compte TikTok connecté.
+                                    </p>
+                                )}
+
+                                {facebookPages.length > 0 && (
+                                    <div className="space-y-3">
+                                        <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                            <SiFacebook className="w-4 h-4 text-[#1877F2]" />
+                                            Pages Facebook
+                                        </div>
+                                        {facebookPages.map(renderTargetCheckbox)}
                                     </div>
-                                ))}
+                                )}
+
+                                {tiktokAccounts.length > 0 && (
+                                    <div className="space-y-3">
+                                        <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                            <SiTiktok className="w-4 h-4" />
+                                            Comptes TikTok
+                                        </div>
+                                        {tiktokAccounts.map(renderTargetCheckbox)}
+                                    </div>
+                                )}
                             </CardContent>
                         </Card>
 

client/src/pages/mobile/pages.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { Plus, Facebook, Instagram, Trash2, RefreshCw, Edit, Bug, Code, Calendar, AlertTriangle } from "lucide-react";
+import { SiTiktok } from "react-icons/si";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Button } from "@/components/ui/button";
@@ -66,12 +67,73 @@ function getTokenExpirationStatus(expiresAt: string | null | undefined) {
   }
 }
 
+/**
+ * Un compte TikTok n'a pas de "token de page" à surveiller : ce qui compte est la
+ * validité de l'autorisation, portée par le refresh token (1 an).
+ */
+function getConnectionExpiry(page: SocialPage): string | null {
+  const date = page.platform === 'tiktok' ? page.refreshTokenExpiresAt : page.tokenExpiresAt;
+  return date ? new Date(date).toISOString() : null;
+}
+
+/**
+ * Lance l'autorisation TikTok. La connexion se fait par navigation complète du
+ * navigateur (et non en fetch) puisqu'elle passe par le site de TikTok.
+ */
+function ConnectTiktokButton() {
+  const { toast } = useToast();
+
+  const { data: config } = useQuery<{ configured: boolean }>({
+    queryKey: ['/api/tiktok/config'],
+  });
+
+  const handleClick = () => {
+    if (config && !config.configured) {
+      toast({
+        title: "TikTok n'est pas configuré",
+        description: "Renseignez le client key et le client secret de votre application TikTok dans les paramètres.",
+        variant: "destructive",
+      });
+      return;
+    }
+    window.location.href = '/api/tiktok/connect';
+  };
+
+  return (
+    <Button
+      variant="outline"
+      className="w-full min-h-[48px]"
+      onClick={handleClick}
+      data-testid="button-connect-tiktok"
+    >
+      <SiTiktok className="w-5 h-5 mr-2" />
+      Connecter un compte TikTok
+    </Button>
+  );
+}
+
 export default function PagesManagementMobile() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingPage, setEditingPage] = useState<SocialPage | null>(null);
   const { toast } = useToast();
 
+  // Retour du flux d'autorisation TikTok (/api/tiktok/callback redirige ici)
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const result = params.get('tiktok');
+    if (!result) return;
+
+    toast({
+      title: result === 'success' ? 'Compte TikTok connecté' : 'Connexion TikTok impossible',
+      description: params.get('message') || undefined,
+      variant: result === 'success' ? undefined : 'destructive',
+    });
+
+    queryClient.invalidateQueries({ queryKey: ['/api/pages'] });
+    window.history.replaceState({}, '', window.location.pathname);
+  }, [toast]);
+
   const { data: pages = [], isLoading } = useQuery<SocialPage[]>({
     queryKey: ['/api/pages'],
   });
@@ -119,10 +181,11 @@ export default function PagesManagementMobile() {
           <div className="space-y-2">
             <h1 className="text-2xl font-bold text-foreground">Pages gérées</h1>
             <p className="text-sm text-muted-foreground">
-              Connectez et gérez vos pages Facebook et Instagram
+              Connectez et gérez vos pages Facebook, Instagram et vos comptes TikTok
             </p>
           </div>
 
+          <ConnectTiktokButton />
           <AddPageDialog open={dialogOpen} onOpenChange={setDialogOpen} />
           <EditPageDialog page={editingPage} onOpenChange={(open) => !open && setEditingPage(null)} />
 
@@ -181,6 +244,10 @@ export default function PagesManagementMobile() {
                           <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
                             <Facebook className="w-6 h-6 text-white" />
                           </div>
+                        ) : page.platform === 'tiktok' ? (
+                          <div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
+                            <SiTiktok className="w-6 h-6 text-white" />
+                          </div>
                         ) : (
                           <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center flex-shrink-0">
                             <Instagram className="w-6 h-6 text-white" />
@@ -202,20 +269,21 @@ export default function PagesManagementMobile() {
 
                     {/* Token expiration status */}
                     {(() => {
-                      const expirationStatus = getTokenExpirationStatus(
-                        page.tokenExpiresAt ? new Date(page.tokenExpiresAt).toISOString() : null
-                      );
+                      const expiresAt = getConnectionExpiry(page);
+                      const expirationStatus = getTokenExpirationStatus(expiresAt);
                       return (
                         <div className={`flex items-center gap-2 text-xs px-3 py-3 rounded-lg ${expirationStatus.bgColor}`}>
                           <Calendar className="w-4 h-4 flex-shrink-0" />
                           <div className="flex-1 min-w-0">
-                            <div className="font-medium">Expiration du token</div>
+                            <div className="font-medium">
+                              {page.platform === 'tiktok' ? 'Expiration de la connexion' : 'Expiration du token'}
+                            </div>
                             <div className={`${expirationStatus.color} font-semibold`}>
                               {expirationStatus.message}
                             </div>
-                            {page.tokenExpiresAt && (
+                            {expiresAt && (
                               <div className="text-muted-foreground mt-0.5">
-                                {format(new Date(page.tokenExpiresAt), "d MMMM yyyy", { locale: fr })}
+                                {format(new Date(expiresAt), "d MMMM yyyy", { locale: fr })}
                               </div>
                             )}
                           </div>
@@ -227,15 +295,27 @@ export default function PagesManagementMobile() {
                     })()}
 
                     <div className="flex items-center gap-2 pt-2">
-                      <Button
-                        variant="outline"
-                        className="flex-1 min-h-[44px]"
-                        onClick={() => setEditingPage(page)}
-                        data-testid={`button-edit-page-${page.id}`}
-                      >
-                        <Edit className="w-4 h-4 mr-2" />
-                        Modifier
-                      </Button>
+                      {page.platform === 'tiktok' ? (
+                        <Button
+                          variant="outline"
+                          className="flex-1 min-h-[44px]"
+                          onClick={() => { window.location.href = '/api/tiktok/connect'; }}
+                          data-testid={`button-reconnect-page-${page.id}`}
+                        >
+                          <RefreshCw className="w-4 h-4 mr-2" />
+                          Reconnecter
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="outline"
+                          className="flex-1 min-h-[44px]"
+                          onClick={() => setEditingPage(page)}
+                          data-testid={`button-edit-page-${page.id}`}
+                        >
+                          <Edit className="w-4 h-4 mr-2" />
+                          Modifier
+                        </Button>
+                      )}
                       <Button
                         variant="destructive"
                         className="flex-1 min-h-[44px]"

client/src/pages/mobile/remotion-video.tsx

@@ -15,6 +15,7 @@ import { DateTimePicker } from "@/components/datetime-picker";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { apiRequest, queryClient, handleUnauthorized } from "@/lib/queryClient";
 import type { Media, SocialPage } from "@shared/schema";
+import { SiFacebook, SiTiktok } from "react-icons/si";
 
 interface AudioTrack { id: string; title: string; fileName: string; url: string; duration: number; }
 
@@ -68,6 +69,23 @@ export default function MobileRemotionVideoPage() {
   const { data: socialPages = [] } = useQuery<SocialPage[]>({ queryKey: ['/api/pages'] });
 
   const facebookPages = socialPages.filter(p => p.platform === 'facebook');
+  const tiktokAccounts = socialPages.filter(p => p.platform === 'tiktok');
+
+  const renderTargetCheckbox = (page: SocialPage) => (
+    <div key={page.id} className="flex items-center gap-3">
+      <Checkbox
+        id={`page-${page.id}`}
+        checked={selectedPageIds.includes(page.id)}
+        onCheckedChange={checked =>
+          setSelectedPageIds(prev => checked ? [...prev, page.id] : prev.filter(id => id !== page.id))
+        }
+      />
+      <label htmlFor={`page-${page.id}`} className="text-sm font-medium cursor-pointer">
+        {page.pageName}
+      </label>
+    </div>
+  );
+
   const imageMediaList = allMedia.filter(m => m.type === 'image').slice(0, 20);
 
   const generateTextMutation = useMutation({
@@ -430,31 +448,36 @@ export default function MobileRemotionVideoPage() {
           </CardContent>
         </Card>
 
-        {/* 4. Page Facebook */}
+        {/* 4. Destinations */}
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-base flex items-center gap-2"><Send className="w-4 h-4" /> 4. Page Facebook</CardTitle>
+            <CardTitle className="text-base flex items-center gap-2"><Send className="w-4 h-4" /> 4. Destinations</CardTitle>
           </CardHeader>
           <CardContent className="space-y-2">
-            {facebookPages.length === 0 ? (
-              <p className="text-xs text-muted-foreground">Aucune page Facebook connectée.</p>
+            {facebookPages.length === 0 && tiktokAccounts.length === 0 ? (
+              <p className="text-xs text-muted-foreground">Aucune page Facebook ni compte TikTok connecté.</p>
             ) : (
-              facebookPages.map(page => (
-                <div key={page.id} className="flex items-center gap-3">
-                  <Checkbox
-                    id={`page-${page.id}`}
-                    checked={selectedPageIds.includes(page.id)}
-                    onCheckedChange={checked =>
-                      setSelectedPageIds(prev =>
-                        checked ? [...prev, page.id] : prev.filter(id => id !== page.id)
-                      )
-                    }
-                  />
-                  <label htmlFor={`page-${page.id}`} className="text-sm font-medium cursor-pointer">
-                    {page.pageName}
-                  </label>
-                </div>
-              ))
+              <>
+                {facebookPages.length > 0 && (
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      <SiFacebook className="w-4 h-4 text-[#1877F2]" />
+                      Pages Facebook
+                    </div>
+                    {facebookPages.map(renderTargetCheckbox)}
+                  </div>
+                )}
+
+                {tiktokAccounts.length > 0 && (
+                  <div className="space-y-2 pt-2">
+                    <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      <SiTiktok className="w-4 h-4" />
+                      Comptes TikTok
+                    </div>
+                    {tiktokAccounts.map(renderTargetCheckbox)}
+                  </div>
+                )}
+              </>
             )}
           </CardContent>
         </Card>
@@ -484,7 +507,7 @@ export default function MobileRemotionVideoPage() {
                   <p className="text-xs text-muted-foreground">Sélectionnez une page ci-dessus.</p>
                 ) : (
                   <p className="text-xs text-primary font-medium">
-                    Pages : {facebookPages.filter(p => selectedPageIds.includes(p.id)).map(p => p.pageName).join(', ')}
+                    Destinations : {[...facebookPages, ...tiktokAccounts].filter(p => selectedPageIds.includes(p.id)).map(p => p.pageName).join(', ')}
                   </p>
                 )}
                 <Textarea rows={2} placeholder="Description (optionnel)" value={publishDescription}

client/src/pages/new-post.tsx

@@ -116,9 +116,12 @@ export default function NewPost() {
   const [postType, setPostType] = useState<'feed' | 'story' | 'both'>('feed');
   const [previewModalOpen, setPreviewModalOpen] = useState(false);
 
-  const { data: pages = [] } = useQuery<SocialPage[]>({
+  // Ce composeur gère les publications feed/story : TikTok n'accepte que des
+  // vidéos et se pilote depuis la création de reel.
+  const { data: allPages = [] } = useQuery<SocialPage[]>({
     queryKey: ['/api/pages'],
   });
+  const pages = allPages.filter(p => p.platform !== 'tiktok');
 
   const { data: allMedia = [] } = useQuery<Media[]>({
     queryKey: ['/api/media'],

client/src/pages/new-reel.tsx

@@ -27,6 +27,7 @@ import {
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient, handleUnauthorized } from "@/lib/queryClient";
 import type { SocialPage, Media } from "@shared/schema";
+import { SiFacebook, SiTiktok } from "react-icons/si";
 import { MediaThumbnail } from "@/components/media-thumbnail";
 import { DateTimePicker } from "@/components/datetime-picker";
 
@@ -133,6 +134,32 @@ export default function NewReel() {
         queryKey: ['/api/pages'],
     });
 
+    // Destinations acceptant une vidéo verticale
+    const facebookPages = pages.filter(p => p.platform === 'facebook');
+    const tiktokAccounts = pages.filter(p => p.platform === 'tiktok');
+
+    const renderTargetCheckbox = (page: SocialPage) => (
+        <div key={page.id} className="flex items-center space-x-2">
+            <Checkbox
+                id={`page-${page.id}`}
+                checked={selectedPages.includes(page.id)}
+                onCheckedChange={(checked) => {
+                    if (checked) {
+                        setSelectedPages([...selectedPages, page.id]);
+                    } else {
+                        setSelectedPages(selectedPages.filter(id => id !== page.id));
+                    }
+                }}
+            />
+            <label
+                htmlFor={`page-${page.id}`}
+                className="text-sm font-medium leading-none flex-1"
+            >
+                {page.pageName}
+            </label>
+        </div>
+    );
+
     // Récupérer les vidéos disponibles
     const { data: allMedia = [] } = useQuery<Media[]>({
         queryKey: ['/api/media'],
@@ -918,42 +945,42 @@ export default function NewReel() {
                                 <>
                                     <Card className="rounded-2xl border-border/50 shadow-lg">
                                         <CardHeader>
-                                            <CardTitle>Pages cibles</CardTitle>
-                                            <CardDescription>Sélectionnez les pages où publier</CardDescription>
+                                            <CardTitle>Destinations</CardTitle>
+                                            <CardDescription>
+                                                La même vidéo peut partir sur plusieurs pages Facebook et plusieurs comptes TikTok
+                                            </CardDescription>
                                         </CardHeader>
                                         <CardContent>
-                                            {pages.filter(p => p.platform === 'facebook').length === 0 ? (
+                                            {facebookPages.length === 0 && tiktokAccounts.length === 0 ? (
                                                 <div className="text-center py-8">
                                                     <p className="text-muted-foreground mb-2">
-                                                        Aucune page Facebook connectée
+                                                        Aucune page Facebook ni compte TikTok connecté
                                                     </p>
                                                     <Button variant="link" onClick={() => navigate('/pages')}>
                                                         Ajouter des pages
                                                     </Button>
                                                 </div>
                                             ) : (
-                                                <div className="space-y-3">
-                                                    {pages.filter(p => p.platform === 'facebook').map((page) => (
-                                                        <div key={page.id} className="flex items-center space-x-2">
-                                                            <Checkbox
-                                                                id={`page-${page.id}`}
-                                                                checked={selectedPages.includes(page.id)}
-                                                                onCheckedChange={(checked) => {
-                                                                    if (checked) {
-                                                                        setSelectedPages([...selectedPages, page.id]);
-                                                                    } else {
-                                                                        setSelectedPages(selectedPages.filter(id => id !== page.id));
-                                                                    }
-                                                                }}
-                                                            />
-                                                            <label
-                                                                htmlFor={`page-${page.id}`}
-                                                                className="text-sm font-medium leading-none flex-1"
-                                                            >
-                                                                {page.pageName}
-                                                            </label>
+                                                <div className="space-y-5">
+                                                    {facebookPages.length > 0 && (
+                                                        <div className="space-y-3">
+                                                            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                                                <SiFacebook className="w-4 h-4 text-[#1877F2]" />
+                                                                Pages Facebook
+                                                            </div>
+                                                            {facebookPages.map(renderTargetCheckbox)}
                                                         </div>
-                                                    ))}
+                                                    )}
+
+                                                    {tiktokAccounts.length > 0 && (
+                                                        <div className="space-y-3">
+                                                            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                                                <SiTiktok className="w-4 h-4" />
+                                                                Comptes TikTok
+                                                            </div>
+                                                            {tiktokAccounts.map(renderTargetCheckbox)}
+                                                        </div>
+                                                    )}
                                                 </div>
                                             )}
                                         </CardContent>

client/src/pages/pages.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { Plus, Facebook, Instagram, Trash2, RefreshCw, Edit, Bug, Code, Calendar, AlertTriangle } from "lucide-react";
+import { SiTiktok } from "react-icons/si";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Button } from "@/components/ui/button";
@@ -66,12 +67,37 @@ function getTokenExpirationStatus(expiresAt: string | null | undefined) {
   }
 }
 
+/**
+ * Un compte TikTok n'a pas de "token de page" à surveiller : ce qui compte est la
+ * validité de l'autorisation, portée par le refresh token (1 an).
+ */
+function getConnectionExpiry(page: SocialPage): string | null {
+  const date = page.platform === 'tiktok' ? page.refreshTokenExpiresAt : page.tokenExpiresAt;
+  return date ? new Date(date).toISOString() : null;
+}
+
 export default function PagesManagement() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingPage, setEditingPage] = useState<SocialPage | null>(null);
   const { toast } = useToast();
 
+  // Retour du flux d'autorisation TikTok (/api/tiktok/callback redirige ici)
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const result = params.get('tiktok');
+    if (!result) return;
+
+    toast({
+      title: result === 'success' ? 'Compte TikTok connecté' : 'Connexion TikTok impossible',
+      description: params.get('message') || undefined,
+      variant: result === 'success' ? undefined : 'destructive',
+    });
+
+    queryClient.invalidateQueries({ queryKey: ['/api/pages'] });
+    window.history.replaceState({}, '', window.location.pathname);
+  }, [toast]);
+
   const { data: pages = [], isLoading } = useQuery<SocialPage[]>({
     queryKey: ['/api/pages'],
   });
@@ -119,10 +145,13 @@ export default function PagesManagement() {
             <div>
               <h1 className="text-3xl font-bold text-foreground">Pages gérées</h1>
               <p className="text-muted-foreground mt-2">
-                Connectez et gérez vos pages Facebook et Instagram
+                Connectez et gérez vos pages Facebook, Instagram et vos comptes TikTok
               </p>
             </div>
-            <AddPageDialog open={dialogOpen} onOpenChange={setDialogOpen} />
+            <div className="flex items-center gap-3">
+              <ConnectTiktokButton />
+              <AddPageDialog open={dialogOpen} onOpenChange={setDialogOpen} />
+            </div>
             <EditPageDialog page={editingPage} onOpenChange={(open) => !open && setEditingPage(null)} />
           </div>
 
@@ -194,6 +223,10 @@ export default function PagesManagement() {
                           <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
                             <Facebook className="w-6 h-6 text-white" />
                           </div>
+                        ) : page.platform === 'tiktok' ? (
+                          <div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center">
+                            <SiTiktok className="w-6 h-6 text-white" />
+                          </div>
                         ) : (
                           <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
                             <Instagram className="w-6 h-6 text-white" />
@@ -215,20 +248,21 @@ export default function PagesManagement() {
                     
                     {/* Token expiration status */}
                     {(() => {
-                      const expirationStatus = getTokenExpirationStatus(
-                        page.tokenExpiresAt ? new Date(page.tokenExpiresAt).toISOString() : null
-                      );
+                      const expiresAt = getConnectionExpiry(page);
+                      const expirationStatus = getTokenExpirationStatus(expiresAt);
                       return (
                         <div className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg ${expirationStatus.bgColor}`}>
                           <Calendar className="w-4 h-4" />
                           <div className="flex-1">
-                            <div className="font-medium">Expiration du token</div>
+                            <div className="font-medium">
+                              {page.platform === 'tiktok' ? 'Expiration de la connexion' : 'Expiration du token'}
+                            </div>
                             <div className={`${expirationStatus.color} font-semibold`}>
                               {expirationStatus.message}
                             </div>
-                            {page.tokenExpiresAt && (
+                            {expiresAt && (
                               <div className="text-muted-foreground mt-0.5">
-                                {format(new Date(page.tokenExpiresAt), "d MMMM yyyy", { locale: fr })}
+                                {format(new Date(expiresAt), "d MMMM yyyy", { locale: fr })}
                               </div>
                             )}
                           </div>
@@ -240,14 +274,27 @@ export default function PagesManagement() {
                     })()}
 
                     <div className="flex items-center justify-end gap-2 pt-2">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => setEditingPage(page)}
-                        data-testid={`button-edit-page-${page.id}`}
-                      >
-                        <Edit className="w-4 h-4" />
-                      </Button>
+                      {page.platform === 'tiktok' ? (
+                        // Un token TikTok ne se saisit pas : on repasse par l'autorisation
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => { window.location.href = '/api/tiktok/connect'; }}
+                          data-testid={`button-reconnect-page-${page.id}`}
+                        >
+                          <RefreshCw className="w-4 h-4 mr-2" />
+                          Reconnecter
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => setEditingPage(page)}
+                          data-testid={`button-edit-page-${page.id}`}
+                        >
+                          <Edit className="w-4 h-4" />
+                        </Button>
+                      )}
                       <Button
                         variant="ghost"
                         size="icon"
@@ -269,6 +316,37 @@ export default function PagesManagement() {
   );
 }
 
+/**
+ * Lance l'autorisation TikTok. La connexion se fait par navigation complète du
+ * navigateur (et non en fetch) puisqu'elle passe par le site de TikTok.
+ */
+function ConnectTiktokButton() {
+  const { toast } = useToast();
+
+  const { data: config } = useQuery<{ configured: boolean }>({
+    queryKey: ['/api/tiktok/config'],
+  });
+
+  const handleClick = () => {
+    if (config && !config.configured) {
+      toast({
+        title: "TikTok n'est pas configuré",
+        description: "Renseignez le client key et le client secret de votre application TikTok dans les paramètres.",
+        variant: "destructive",
+      });
+      return;
+    }
+    window.location.href = '/api/tiktok/connect';
+  };
+
+  return (
+    <Button variant="outline" onClick={handleClick} data-testid="button-connect-tiktok">
+      <SiTiktok className="w-4 h-4 mr-2" />
+      Connecter un compte TikTok
+    </Button>
+  );
+}
+
 function AddPageDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
   const [platform, setPlatform] = useState<'facebook' | 'instagram'>('facebook');
   const [pageName, setPageName] = useState('');

client/src/pages/remotion-video.tsx

@@ -14,6 +14,7 @@ import { Switch } from "@/components/ui/switch";
 import { Checkbox } from "@/components/ui/checkbox";
 import { DateTimePicker } from "@/components/datetime-picker";
 import type { Media, SocialPage } from "@shared/schema";
+import { SiFacebook, SiTiktok } from "react-icons/si";
 
 
 interface AudioTrack {
@@ -67,6 +68,22 @@ export default function RemotionVideoPage() {
   const { data: socialPages = [] } = useQuery<SocialPage[]>({ queryKey: ['/api/pages'] });
 
   const facebookPages = socialPages.filter(p => p.platform === 'facebook');
+  const tiktokAccounts = socialPages.filter(p => p.platform === 'tiktok');
+
+  const renderTargetCheckbox = (page: SocialPage) => (
+    <div key={page.id} className="flex items-center gap-3">
+      <Checkbox
+        id={`pre-${page.id}`}
+        checked={selectedPageIds.includes(page.id)}
+        onCheckedChange={checked =>
+          setSelectedPageIds(prev => checked ? [...prev, page.id] : prev.filter(id => id !== page.id))
+        }
+      />
+      <label htmlFor={`pre-${page.id}`} className="text-sm font-medium cursor-pointer">
+        {page.pageName}
+      </label>
+    </div>
+  );
   const imageMediaList = allMedia.filter(m => m.type === 'image').slice(0, 20);
   const totalSelected = images.length + selectedLibraryImages.length;
 
@@ -376,30 +393,37 @@ export default function RemotionVideoPage() {
         </CardContent>
       </Card>
 
-      {/* 4. Page Facebook */}
+      {/* 4. Destinations */}
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><Send className="w-4 h-4" /> 4. Page Facebook</CardTitle>
-          <CardDescription>Sélectionnez la page cible (son nom apparaîtra en fin de vidéo).</CardDescription>
+          <CardDescription>Pages Facebook et comptes TikTok cibles (le nom de la première destination apparaîtra en fin de vidéo).</CardDescription>
         </CardHeader>
         <CardContent className="space-y-2">
-          {facebookPages.length === 0 ? (
-            <p className="text-sm text-muted-foreground">Aucune page Facebook connectée.</p>
+          {facebookPages.length === 0 && tiktokAccounts.length === 0 ? (
+            <p className="text-sm text-muted-foreground">Aucune page Facebook ni compte TikTok connecté.</p>
           ) : (
-            facebookPages.map(page => (
-              <div key={page.id} className="flex items-center gap-3">
-                <Checkbox
-                  id={`pre-${page.id}`}
-                  checked={selectedPageIds.includes(page.id)}
-                  onCheckedChange={checked =>
-                    setSelectedPageIds(prev => checked ? [...prev, page.id] : prev.filter(id => id !== page.id))
-                  }
-                />
-                <label htmlFor={`pre-${page.id}`} className="text-sm font-medium cursor-pointer">
-                  {page.pageName}
-                </label>
-              </div>
-            ))
+            <>
+              {facebookPages.length > 0 && (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    <SiFacebook className="w-4 h-4 text-[#1877F2]" />
+                    Pages Facebook
+                  </div>
+                  {facebookPages.map(renderTargetCheckbox)}
+                </div>
+              )}
+
+              {tiktokAccounts.length > 0 && (
+                <div className="space-y-2 pt-2">
+                  <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    <SiTiktok className="w-4 h-4" />
+                    Comptes TikTok
+                  </div>
+                  {tiktokAccounts.map(renderTargetCheckbox)}
+                </div>
+              )}
+            </>
           )}
         </CardContent>
       </Card>
@@ -432,7 +456,7 @@ export default function RemotionVideoPage() {
                 <p className="text-sm text-muted-foreground">Sélectionnez une page ci-dessus avant de générer.</p>
               ) : (
                 <p className="text-sm text-primary font-medium">
-                  Pages : {facebookPages.filter(p => selectedPageIds.includes(p.id)).map(p => p.pageName).join(', ')}
+                  Destinations : {[...facebookPages, ...tiktokAccounts].filter(p => selectedPageIds.includes(p.id)).map(p => p.pageName).join(', ')}
                 </p>
               )}
               <Textarea rows={2} placeholder="Description (optionnel)" value={publishDescription}

client/src/pages/settings.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { ModelCombobox } from "@/components/model-combobox";
+import { SiTiktok } from "react-icons/si";
 
 export default function Settings() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -31,6 +32,8 @@ export default function Settings() {
   const [ffmpegApiKey, setFfmpegApiKey] = useState("");
   const [externalApiKey, setExternalApiKey] = useState("");
   const [geminiApiKey, setGeminiApiKey] = useState("");
+  const [tiktokClientKey, setTiktokClientKey] = useState("");
+  const [tiktokClientSecret, setTiktokClientSecret] = useState("");
   const { toast } = useToast();
 
   const { data: session } = useQuery<{ id: string; username: string; role: string }>({
@@ -56,6 +59,15 @@ export default function Settings() {
     queryKey: ['/api/ffmpeg/config'],
   });
 
+  const { data: tiktokConfig } = useQuery<{
+    configured: boolean;
+    clientKey: string;
+    hasClientSecret: boolean;
+    redirectUri: string;
+  }>({
+    queryKey: ['/api/tiktok/config'],
+  });
+
   const { data: externalApiConfig } = useQuery({
     queryKey: ['/api/settings/external-api'],
     enabled: isAdmin,
@@ -92,6 +104,13 @@ export default function Settings() {
     }
   }, [ffmpegConfig]);
 
+  useEffect(() => {
+    if (tiktokConfig) {
+      // Le client secret n'est jamais renvoyé par l'API : il reste vide
+      setTiktokClientKey(tiktokConfig.clientKey || "");
+    }
+  }, [tiktokConfig]);
+
   useEffect(() => {
     if (geminiConfig) {
       // Don't pre-fill - user must enter key manually
@@ -264,6 +283,29 @@ export default function Settings() {
     },
   });
 
+  const saveTiktokMutation = useMutation({
+    mutationFn: () => {
+      const payload: any = { clientKey: tiktokClientKey.trim() };
+      // Le secret n'est envoyé que s'il est saisi : sinon on conserve l'existant
+      if (tiktokClientSecret.trim() !== "") {
+        payload.clientSecret = tiktokClientSecret.trim();
+      }
+      return apiRequest('PUT', '/api/tiktok/config', payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['/api/tiktok/config'] });
+      setTiktokClientSecret("");
+      toast({ title: "Configuration TikTok enregistrée", description: "Vous pouvez maintenant connecter les comptes TikTok de vos magasins" });
+    },
+    onError: async (error: any) => {
+      toast({
+        title: "Erreur",
+        description: error?.message || "Impossible d'enregistrer la configuration TikTok",
+        variant: "destructive",
+      });
+    },
+  });
+
   const deleteExternalApiMutation = useMutation({
     mutationFn: () => apiRequest('DELETE', '/api/settings/external-api', {}),
     onSuccess: () => {
@@ -760,6 +802,71 @@ export default function Settings() {
               </Card>
             )}
 
+            {isAdmin && (
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
+                  <CardTitle className="flex items-center gap-2">
+                    <SiTiktok className="w-5 h-5" />
+                    TikTok
+                  </CardTitle>
+                  <CardDescription>
+                    Identifiants de votre application TikTok (developers.tiktok.com). Ils servent à
+                    connecter les comptes TikTok de chaque magasin depuis la page « Pages gérées ».
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {tiktokConfig?.configured && (
+                    <div className="rounded-lg bg-muted p-3 flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
+                      <Key className="w-4 h-4" />
+                      <span>Application TikTok configurée</span>
+                    </div>
+                  )}
+
+                  <div className="space-y-2">
+                    <Label htmlFor="tiktokClientKey">Client key</Label>
+                    <Input
+                      id="tiktokClientKey"
+                      value={tiktokClientKey}
+                      onChange={(e) => setTiktokClientKey(e.target.value)}
+                      placeholder="awxxxxxxxxxxxxxx"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="tiktokClientSecret">
+                      {tiktokConfig?.hasClientSecret ? "Nouveau client secret (laisser vide pour conserver l'actuel)" : "Client secret"}
+                    </Label>
+                    <Input
+                      id="tiktokClientSecret"
+                      type="password"
+                      value={tiktokClientSecret}
+                      onChange={(e) => setTiktokClientSecret(e.target.value)}
+                      placeholder="••••••••••••••••"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>URL de redirection à déclarer chez TikTok</Label>
+                    <code className="block text-xs bg-muted px-3 py-2 rounded break-all">
+                      {tiktokConfig?.redirectUri || `${window.location.origin}/api/tiktok/callback`}
+                    </code>
+                    <p className="text-xs text-muted-foreground">
+                      Tant que l'application n'a pas passé l'audit TikTok, les vidéos publiées
+                      restent privées (visibles du seul propriétaire du compte).
+                    </p>
+                  </div>
+
+                  <Button
+                    onClick={() => saveTiktokMutation.mutate()}
+                    disabled={saveTiktokMutation.isPending || !tiktokClientKey.trim()}
+                    className="w-full"
+                  >
+                    {saveTiktokMutation.isPending ? "Enregistrement..." : "Enregistrer"}
+                  </Button>
+                </CardContent>
+              </Card>
+            )}
+
             <Card className="rounded-2xl border-border/50 shadow-lg">
               <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">