feat(landing): repositionner plateforme vidéo — supprimer pitch B2B SaaS

Landing reécrite : vidéos, playlists, créateurs. Supprimé : pricing, white-label, mentions SuperOAuth, PricingCard component. CTA principal → /app (explorer les vidéos).
feat(auth): PKCE client refinements + backend refresh token support
2026-03-22 16:15:02 +01:00 · 2026-03-22 16:14:55 +01:00
6 changed files with 95 additions and 185 deletions
--- a/backend/src/routes/auth.routes.ts
+++ b/backend/src/routes/auth.routes.ts
@@ -92,7 +92,7 @@ router.post("/login", async (req: Request, res: Response): Promise<void> => {
 * le valide, puis le pose en httpOnly cookie.
 */
 router.post("/session", async (req: Request, res: Response): Promise<void> => {
-  const { token } = req.body as { token?: string };
+  const { token, refreshToken } = req.body as { token?: string; refreshToken?: string };

  if (!token) {
    res.status(400).json({ success: false, error: "MISSING_TOKEN" });
@@ -126,6 +126,9 @@ router.post("/session", async (req: Request, res: Response): Promise<void> => {
    await upsertUser(data.data.user as { id: string; email: string | null; nickname: string });

    res.cookie(COOKIE_NAME, token, COOKIE_OPTIONS);
+    if (refreshToken) {
+      res.cookie(REFRESH_COOKIE_NAME, refreshToken, REFRESH_COOKIE_OPTIONS);
+    }
    res.json({ success: true, data: { user: data.data.user } });
  } catch (err) {
    logger.error("POST /auth/session — auth service unavailable", { err });
--- a/frontend/src/components/auth/LoginButton.tsx
+++ b/frontend/src/components/auth/LoginButton.tsx
@@ -3,9 +3,10 @@ import { buildAuthUrl, saveVerifier } from '../../lib/oauth';

 interface LoginButtonProps {
  className?: string;
+  provider?: string;
 }

-export default function LoginButton({ className }: LoginButtonProps) {
+export default function LoginButton({ className, provider = 'discord' }: LoginButtonProps) {
  const [loading, setLoading] = useState(false);

  async function handleClick() {
@@ -13,7 +14,7 @@ export default function LoginButton({ className }: LoginButtonProps) {
    setLoading(true);
    try {
      const redirectUri = `${window.location.origin}/callback`;
-      const { url, verifier } = await buildAuthUrl(redirectUri);
+      const { url, verifier } = await buildAuthUrl(redirectUri, provider);
      saveVerifier(verifier);
      window.location.href = url;
    } catch {
--- a/frontend/src/lib/oauth.ts
+++ b/frontend/src/lib/oauth.ts
@@ -33,6 +33,7 @@ export async function generateCodeChallenge(verifier: string): Promise<string> {

 export async function buildAuthUrl(
  redirectUri: string,
+  provider: string,
  scope = 'openid profile email',
  clientId  = OAUTH_CLIENT_ID,
 ): Promise<{ url: string; verifier: string }> {
@@ -46,6 +47,7 @@ export async function buildAuthUrl(
    redirect_uri:          redirectUri,
    scope,
    state,
+    provider,
    code_challenge:        challenge,
    code_challenge_method: 'S256',
  });
@@ -58,12 +60,20 @@ export async function buildAuthUrl(

 // --- Token exchange ---

+export interface TokenResponse {
+  access_token: string;
+  refresh_token?: string;
+  token_type: string;
+  expires_in: number;
+  scope?: string;
+}
+
 export async function exchangeCode(
  code: string,
  verifier: string,
  redirectUri: string,
  clientId = OAUTH_CLIENT_ID,
-): Promise<string> {
+): Promise<TokenResponse> {
  const response = await fetch(`${OAUTH_URL}/oauth/token`, {
    method:  'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
@@ -81,11 +91,10 @@ export async function exchangeCode(
    throw new Error(`OAuth token exchange failed (${response.status}): ${text}`);
  }

-  const data = await response.json() as { access_token?: string };
+  const data = await response.json() as TokenResponse;
  if (!data.access_token) throw new Error('No access_token in OAuth response');

-  sessionStorage.setItem(SESSION_KEY_TOKEN, data.access_token);
-  return data.access_token;
+  return data;
 }

 // --- Token accessors ---
--- a/frontend/src/pages/CallbackPage.tsx
+++ b/frontend/src/pages/CallbackPage.tsx
@@ -37,8 +37,19 @@ export default function CallbackPage() {
      const redirectUri = `${window.location.origin}/callback`;

      exchangeCode(code, verifier, redirectUri)
-        .then(() => {
-          navigate('/app', { replace: true });
+        .then((tokens) => {
+          // Pass tokens to backend to set httpOnly cookies + sync user
+          return apiFetch<SessionResponse>('/auth/session', {
+            method: 'POST',
+            body: JSON.stringify({
+              token: tokens.access_token,
+              refreshToken: tokens.refresh_token,
+            }),
+          });
+        })
+        .then((res) => {
+          setUser(res.data.user);
+          navigate('/', { replace: true });
        })
        .catch(() => setError("Échec de l'échange de code OAuth. Réessaie."));
      return;
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -1,66 +1,5 @@
 import { Link } from 'react-router-dom';

-// ─── Pricing data ─────────────────────────────────────────────────────────────
-
-interface Tier {
-  name: string;
-  price: string;
-  period: string;
-  tagline: string;
-  features: string[];
-  cta: string;
-  highlighted: boolean;
-}
-
-const TIERS: Tier[] = [
-  {
-    name: 'Starter',
-    price: '29€',
-    period: '/mois',
-    tagline: 'Pour démarrer proprement.',
-    features: [
-      '1 projet',
-      'Domaine custom',
-      'White-label basique',
-      'Support communauté',
-    ],
-    cta: 'Commencer',
-    highlighted: false,
-  },
-  {
-    name: 'Studio',
-    price: '99€',
-    period: '/mois',
-    tagline: 'Pour les studios actifs.',
-    features: [
-      '5 projets',
-      'Analytics intégrés',
-      'SuperOAuth Tier 3',
-      'White-label complet',
-      'Support email',
-    ],
-    cta: 'Choisir Studio',
-    highlighted: true,
-  },
-  {
-    name: 'Pro',
-    price: '249€',
-    period: '/mois',
-    tagline: 'Pour les opérations à fort volume.',
-    features: [
-      'Projets illimités',
-      'API access complet',
-      'Support prioritaire',
-      'SuperOAuth Tier 3',
-      'SLA 99.9%',
-    ],
-    cta: 'Choisir Pro',
-    highlighted: false,
-  },
-];
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
 export default function LandingPage() {
  return (
    <div className="flex flex-col gap-24 pb-16">
@@ -72,60 +11,55 @@ export default function LandingPage() {
        <div className="inline-flex w-fit items-center gap-2 rounded border border-od-border bg-od-surface px-3 py-1">
          <span className="h-1.5 w-1.5 rounded-full bg-od-accent" />
          <span className="font-mono text-2xs text-od-muted tracking-widest uppercase">
-            SuperOAuth Tier 3 — multi-tenant natif
+            Vidéos · Playlists · Communauté
          </span>
        </div>

        {/* Headline */}
        <h1 className="font-display text-5xl font-bold leading-[1.1] tracking-tight text-od-text">
-          La plateforme des{' '}
-          <span className="text-od-accent">studios indépendants.</span>
+          Partagez vos vidéos.{' '}
+          <span className="text-od-accent">Construisez votre audience.</span>
        </h1>

        {/* Sous-titre */}
        <p className="text-base text-od-muted leading-relaxed max-w-xl">
-          Lancez votre vitrine de contenu en quelques minutes.
-          Auth multi-tenant, domaine custom, white-label complet —
-          sans compromis sur la qualité.
+          OriginsDigital est une plateforme de partage vidéo pensée pour les créateurs.
+          Organisez votre contenu en playlists, proposez du contenu libre ou premium,
+          et faites grandir votre communauté.
        </p>

        {/* CTAs */}
        <div className="flex items-center gap-4 pt-2">
          <Link
-            to="/login"
+            to="/app"
            className="inline-flex items-center gap-2 rounded border border-od-accent bg-od-accent px-6 py-2.5 font-mono text-sm font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim"
+          >
+            Explorer les vidéos
+          </Link>
+          <Link
+            to="/login"
+            className="inline-flex items-center gap-2 rounded border border-od-border px-6 py-2.5 font-mono text-sm text-od-muted transition-all duration-150 hover:border-od-border-hi hover:text-od-text"
          >
            Se connecter
          </Link>
-          <a
-            href="#pricing"
-            className="inline-flex items-center gap-2 rounded border border-od-border px-6 py-2.5 font-mono text-sm text-od-muted transition-all duration-150 hover:border-od-border-hi hover:text-od-text"
-          >
-            Voir les tarifs
-          </a>
        </div>

-        {/* Social proof minimal */}
-        <p className="font-mono text-2xs text-od-muted pt-2">
-          Intégration SuperOAuth Tier 3 · Auth per-tenant · CNAME custom
-        </p>
-
      </section>

-      {/* ── Différenciateur ───────────────────────────────────────────────── */}
-      <section className="grid grid-cols-3 gap-4">
+      {/* ── Features ──────────────────────────────────────────────────────── */}
+      <section className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {[
          {
-            label: 'Auth multi-tenant',
-            desc: 'SuperOAuth Tier 3 intégré nativement. Per-tenant providers, isolation complète des données.',
+            label: 'Playlists organisées',
+            desc: 'Regroupez vos vidéos par thème, série ou parcours. Vos spectateurs retrouvent facilement ce qui les intéresse.',
          },
          {
-            label: 'White-label total',
-            desc: 'Logo, domaine, emails, couleurs — votre marque, pas la nôtre. CNAME custom inclus dès Starter.',
+            label: 'Contenu libre & premium',
+            desc: 'Proposez du contenu en accès libre pour attirer, et du contenu premium pour fidéliser. Vous décidez.',
          },
          {
-            label: 'Prévisible',
-            desc: 'Abonnement fixe, pas de commission, pas de per-seat. Votre croissance ne nous rémunère pas.',
+            label: 'Fait pour les créateurs',
+            desc: 'Interface épurée, recherche rapide, profil personnalisé. Le contenu au centre, pas la distraction.',
          },
        ].map(({ label, desc }) => (
          <div
@@ -139,103 +73,48 @@ export default function LandingPage() {
        ))}
      </section>

-      {/* ── Pricing ───────────────────────────────────────────────────────── */}
-      <section id="pricing" className="flex flex-col gap-8 scroll-mt-20">
-
+      {/* ── Comment ça marche ─────────────────────────────────────────────── */}
+      <section className="flex flex-col gap-8">
        <div className="flex flex-col gap-2">
-          <span className="font-mono text-2xs uppercase tracking-widest text-od-muted">Tarifs</span>
+          <span className="font-mono text-2xs uppercase tracking-widest text-od-muted">Comment ça marche</span>
          <h2 className="font-display text-3xl font-bold text-od-text tracking-tight">
-            Simple. Sans surprise.
+            Simple et direct.
          </h2>
-          <p className="text-sm text-od-muted max-w-md">
-            Abonnement mensuel sans engagement. Pas de commission sur vos revenus.
-          </p>
        </div>

-        <div className="grid grid-cols-3 gap-4">
-          {TIERS.map((tier) => (
-            <PricingCard key={tier.name} tier={tier} />
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+          {[
+            { step: '01', title: 'Connectez-vous', desc: 'Via Discord, GitHub, Google ou Twitch. Un clic, pas de formulaire.' },
+            { step: '02', title: 'Explorez', desc: 'Parcourez les vidéos libres, cherchez par thème, découvrez les playlists.' },
+            { step: '03', title: 'Accédez au premium', desc: 'Débloquez les formations complètes et le contenu exclusif.' },
+          ].map(({ step, title, desc }) => (
+            <div key={step} className="flex flex-col gap-2">
+              <span className="font-mono text-lg font-bold text-od-accent">{step}</span>
+              <p className="text-sm font-semibold text-od-text">{title}</p>
+              <p className="text-xs text-od-muted leading-relaxed">{desc}</p>
+            </div>
          ))}
        </div>
+      </section>

-        {/* Enterprise mention */}
-        <div className="flex items-center justify-between rounded border border-od-border bg-od-surface px-6 py-4">
-          <div className="flex flex-col gap-0.5">
-            <span className="text-sm font-semibold text-od-text">Enterprise</span>
-            <span className="text-xs text-od-muted">SLA, déploiement dédié, onboarding personnalisé</span>
-          </div>
-          <a
-            href="mailto:contact@originsdigital.com"
-            className="rounded border border-od-border px-4 py-2 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-all duration-150"
+      {/* ── CTA final ─────────────────────────────────────────────────────── */}
+      <section className="flex flex-col items-center gap-4 rounded border border-od-border bg-od-surface px-8 py-10 text-center">
+        <h2 className="font-display text-2xl font-bold text-od-text">
+          Prêt à découvrir ?
+        </h2>
+        <p className="text-sm text-od-muted max-w-md">
+          Pas besoin de compte pour explorer. Connectez-vous quand vous êtes prêt.
+        </p>
+        <div className="flex items-center gap-4 pt-2">
+          <Link
+            to="/app"
+            className="inline-flex items-center gap-2 rounded border border-od-accent bg-od-accent px-6 py-2.5 font-mono text-sm font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim"
          >
-            Nous contacter
-          </a>
+            Explorer les vidéos
+          </Link>
        </div>
-
      </section>

    </div>
  );
 }
-
-// ─── PricingCard ──────────────────────────────────────────────────────────────
-
-function PricingCard({ tier }: { tier: Tier }) {
-  const base =
-    'relative flex flex-col gap-5 rounded border p-6 transition-all duration-150';
-  const highlighted =
-    tier.highlighted
-      ? 'border-od-accent bg-od-surface shadow-accent-glow'
-      : 'border-od-border bg-od-surface hover:border-od-border-hi';
-
-  return (
-    <div className={`${base} ${highlighted}`}>
-
-      {tier.highlighted && (
-        <div className="absolute -top-px left-0 right-0 h-px bg-od-accent" />
-      )}
-
-      {tier.highlighted && (
-        <div className="absolute -top-3 right-4 rounded-full border border-od-accent bg-od-bg px-2 py-0.5">
-          <span className="font-mono text-2xs text-od-accent tracking-wider">Populaire</span>
-        </div>
-      )}
-
-      {/* Header */}
-      <div className="flex flex-col gap-1">
-        <span className="font-mono text-xs uppercase tracking-widest text-od-muted">{tier.name}</span>
-        <div className="flex items-baseline gap-1">
-          <span className="font-display text-4xl font-bold text-od-text">{tier.price}</span>
-          <span className="font-mono text-xs text-od-muted">{tier.period}</span>
-        </div>
-        <span className="text-xs text-od-muted">{tier.tagline}</span>
-      </div>
-
-      {/* Separator */}
-      <div className="border-t border-od-border" />
-
-      {/* Features */}
-      <ul className="flex flex-col gap-2.5 flex-1">
-        {tier.features.map((f) => (
-          <li key={f} className="flex items-start gap-2 text-xs text-od-muted">
-            <span className="mt-0.5 text-od-accent">—</span>
-            <span>{f}</span>
-          </li>
-        ))}
-      </ul>
-
-      {/* CTA */}
-      <Link
-        to="/login"
-        className={
-          tier.highlighted
-            ? 'inline-flex items-center justify-center rounded border border-od-accent bg-od-accent px-4 py-2 font-mono text-xs font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim'
-            : 'inline-flex items-center justify-center rounded border border-od-border px-4 py-2 font-mono text-xs text-od-muted transition-all duration-150 hover:border-od-accent hover:text-od-accent'
-        }
-      >
-        {tier.cta}
-      </Link>
-
-    </div>
-  );
-}
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { apiFetch } from '../lib/api';
 import { useAuthContext, type User } from '../context/AuthContext';
+import { buildAuthUrl, saveVerifier } from '../lib/oauth';

 const PROVIDERS = [
  { id: 'discord', label: 'Discord' },
@@ -15,8 +16,6 @@ export default function LoginPage() {
  const location = useLocation();
  const { setUser } = useAuthContext();
  const from = (location.state as { from?: Location })?.from?.pathname ?? '/';
-  const base = import.meta.env.VITE_SUPEROAUTH_URL;
-  const redirectUrl = encodeURIComponent(window.location.origin + '/callback');

  const [email, setEmail]         = useState('');
  const [password, setPassword]   = useState('');
@@ -24,10 +23,18 @@ export default function LoginPage() {
  const [error, setError]         = useState<string | null>(null);
  const [oauthLoading, setOauthLoading] = useState<string | null>(null);

-  function handleOAuth(providerId: string) {
+  async function handleOAuth(providerId: string) {
    if (oauthLoading) return;
    setOauthLoading(providerId);
-    window.location.href = `${base}/api/v1/oauth/${providerId}?redirectUrl=${redirectUrl}&tenantId=origins`;
+    try {
+      const redirectUri = `${window.location.origin}/callback`;
+      const { url, verifier } = await buildAuthUrl(redirectUri, providerId);
+      saveVerifier(verifier);
+      window.location.href = url;
+    } catch {
+      setOauthLoading(null);
+      setError('Impossible de démarrer la connexion OAuth.');
+    }
  }

  async function handleSubmit(e: React.FormEvent) {