🪄 Slide 1 — Titre & Objectif

🔐 4.1.8 — Génération d’un lien magique

🎯 Objectif : créer une UX sans friction pour les aidants

• Remplacer les logins / mots de passe par un lien magique
• Sécuriser la connexion avec un token à usage unique
• Intégrer le lien dans WhatsApp (meta Cloud API / Twilio)
• Gérer l’expiration automatiquement dans n8n
• Lire / valider le token côté Next.js Server

🚪 Slide 2 — Pourquoi éviter les logins ?

• Les aidants → non techniques, veulent aller vite
• Un login classique ⇢ perte de 40–60 % des utilisateurs
• Objectif du parcours :
  • Répondre au questionnaire senior + aidant
  • En 2 clics
  • Sans compte, sans mot de passe
• Le lien magique =
  ✔ pas de friction
  ✔ sécurisé
  ✔ adapté mobile
  ✔ cohérent avec WhatsApp-first

🧩 Slide 3 — Architecture du Magic Link

Aidant → WhatsApp → Lien magic
     ↘                  ↘
       n8n → Token → URL signée
                     ↘
               Next.js Server
                     ↘
               Session temporaire

• n8n génère un token aléatoire
• Le token est stocké avec :
  • téléphone
  • expiration
  • statut (unused/used)
• L’URL envoyée à l’aidant :
  https://webapp.com/onboarding?t=<token>
• Next.js vérifie le token et ouvre la session

🔑 Slide 4 — Token à usage unique

Caractéristiques du token :

• Longueur : 32 à 64 chars
• Type : alphanumérique + entropie élevée
• Usage : 1 seule validation
• Stockage :
  • soit dans n8n (Data Store)
  • soit via une mini base Supabase / Redis
• Champs enregistrés :

Après validation → used = true.

💬 Slide 5 — Intégration WhatsApp

• Canal principal pour les aidants
• Envoi du lien via :
  ✔ Meta Cloud API
  ✔ Twilio WhatsApp API
  ✔ Ringover (option)

Message type :

Bonjour 👋,

Cliquez ici pour finaliser votre questionnaire aidant :

https://webapp.com/onboarding?t=abc123

(Lien actif 60 minutes)

• Le token n’apparaît pas comme sensible
• Le lien est clickable directement

⏳ Slide 6 — Expiration automatique

Gestion de l’expiration dans n8n :

• Lors de la génération du token :
  expires_at = now() + 60 minutes
• Lors de la validation côté WebApp :
  • Si now > expires_at → rejet
  • Si used = true → rejet
• Cron n8n (toutes les nuits) :
  • Suppression / nettoyage des tokens expirés

Pourquoi 60 min ?

→ assez long pour un aidant, assez court pour rester safe

🖥️ Slide 7 — Lecture côté Next.js (Server Side)

Dans Next.js (route /onboarding/page.tsx ou middleware) :

Pseudo-code :

export async function GET(req) {
  const token = req.nextUrl.searchParams.get("t");

  const record = await fetchFromN8nOrDB(token);

  if (!record || record.used || record.expires_at < Date.now()) {
    return redirect("/expired");
  }

  // Marquer comme utilisé
  await markTokenAsUsed(token);

  // Créer session temporaire
  cookies().set("session", record.aidant_phone, { maxAge: 3600 });

  return <OnboardingForm />;
}

• Validation toujours server-side
• Pas de lecture token côté client
• Session limitée à 1 heure

📤 Slide 8 — Workflow n8n : génération du Magic Link

Nœuds recommandés :

1. Webhook (appel depuis WebApp ou Odoo)
2. Set (générer token avec JS random)
3. Data Store (sauver token + expiration)
4. Compose URL
5. WhatsApp Send Message (Meta API)
6. Retour : { "link": "https://webapp.com/onboarding?t=abc123" }

Bonus :

• Log des créations de tokens
• Détection tokens trop souvent demandés (anti-abus)

📥 Slide 9 — Workshop : générer ce lien

Atelier pratique :

🎯 Produire exactement ce lien :

https://webapp.com/onboarding?t=abc123

Étapes :

1. Dans n8n → nœud Function :

   return {
     token: Math.random().toString(36).slice(2) +
            Math.random().toString(36).slice(2)
   };
   

2. Stocker dans Data Store avec expiration
3. Construire URL :
   ={{"https://webapp.com/onboarding?t=" + $json.token}}
4. Envoyer dans WhatsApp
5. Tester manuellement dans navigateur

🧱 Slide 10 — Synthèse & Next Steps

Ce que vous savez maintenant :

• Pourquoi un magic link = UX idéale
• Comment générer un token sécurisé
• Comment encapsuler dans WhatsApp
• Comment valider le token côté Next.js
• Comment expirer les liens automatiquement

Prochain module (4.1.9) :

✨ Session Management & Scopes (“Vous êtes l’aidant de Jean Durand”)