Aller au contenu
supastack
Parcourir la documentation
WebNext.js

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /fr/docs/web/provider-keys.md (or send Accept: text/markdown).

Récupérer les clés de fournisseur restantes

Courts parcours pour les services restants : fournisseurs d'IA, Trigger.dev, stockage S3, Sentry ou PostHog, Turnstile et votre domaine.

Poser une question sur ce guide
Ouvrir dans

Comment utiliser cette page

Chaque section ci-dessous est un parcours de configuration complet : créer le compte, trouver la clé, renseigner les noms d'env, vérifier. Ne prenez que les sections des services que votre produit livre — un site sans fonctions d'IA n'aura jamais besoin de la première, et le kit continue de tourner même si vous sautez toutes les sections d'ici.

Les mêmes règles de secrets que partout : les clés d'API et les secrets de webhook restent côté serveur, seules les valeurs préfixées NEXT_PUBLIC_/EXPO_PUBLIC_ peuvent atteindre le client, les secrets de production vivent dans le coffre de secrets de l'hébergeur, et le serveur de dev ne relit l'env qu'au redémarrage.

Clés de fournisseurs d'IA

L'AI_PROVIDER du kit accepte openai, anthropic, openai-compatible et openrouter — plus fake, le remplaçant local par défaut. Choisissez-en un ; la clé du fournisseur est le seul compte nécessaire, car les ids de modèles et les prix viennent du catalogue en base de données du kit, pas de variables env.

OpenAI : platform.openai.com → API keys → Create new secret key → copiez sk-… → OPENAI_API_KEY. Anthropic : console.anthropic.com → API Keys → Create Key → sk-ant-… → ANTHROPIC_API_KEY. Les deux facturent au token — quelques dollars de crédit couvrent le développement.

OpenRouter achemine chaque modèle du catalogue via une seule clé : openrouter.ai → Keys → Create Key → sk-or-… → AI_PROVIDER=openrouter plus OPENROUTER_API_KEY ; les optionnels OPENROUTER_APP_NAME/OPENROUTER_SITE_URL envoient des en-têtes d'attribution. openai-compatible couvre tout endpoint de forme OpenAI : OPENAI_COMPATIBLE_API_KEY plus OPENAI_COMPATIBLE_BASE_URL.

Vérifiez : redémarrez, lancez une tâche d'IA et attendez une vraie réponse de modèle au lieu du fake déterministe. Une erreur de démarrage qui nomme la clé signifie que le flag du fournisseur est actif sans sa clé. Une vraie réponse a aussi besoin de JOB_PROVIDER=trigger de la section Trigger.dev ci-dessous plus un modèle activé dans le catalogue du kit — Configurer l'IA couvre ce montage.

# apps/web/.env.local — pick ONE provider
AI_PROVIDER=openai
OPENAI_API_KEY=sk-…

# or AI_PROVIDER=anthropic
# ANTHROPIC_API_KEY=sk-ant-…

# or AI_PROVIDER=openrouter
# OPENROUTER_API_KEY=sk-or-…

# or AI_PROVIDER=openai-compatible
# OPENAI_COMPATIBLE_API_KEY=…
# OPENAI_COMPATIBLE_BASE_URL=https://your-endpoint/v1

Trigger.dev

À sauter sauf si le produit a besoin de vraies exécutions de jobs en arrière-plan — JOB_PROVIDER=local met les jobs en file en mémoire sans les exécuter, ce qui convient au développement.

1. Ouvrez app.trigger.dev → Sign up → créez un projet.

2. Copiez deux valeurs : le project ref proj_… depuis les paramètres du projet ou l'URL du tableau de bord → TRIGGER_PROJECT_REF, et la secret key de la page API keys du projet (tr_dev_… pour l'environnement dev, tr_prod_… pour la production) → TRIGGER_SECRET_KEY. Les deux restent côté serveur.

3. Les tâches du kit vivent déjà dans apps/web/trigger et apps/web/trigger.config.ts lit TRIGGER_PROJECT_REF. Depuis apps/web, lancez npx trigger.dev@latest dev — il enregistre les tâches auprès de votre projet et les exécute en local avec la clé dev.

Vérifiez : la commande dev consigne les tâches enregistrées ; mettez-en une en file dans l'app et regardez-la s'exécuter dans la liste Runs du tableau de bord. Les environnements déployés lancent corepack pnpm --filter @supastack/web trigger:deploy pour publier l'ensemble des tâches.

# apps/web/.env.local
JOB_PROVIDER=trigger
TRIGGER_PROJECT_REF=proj_…
TRIGGER_SECRET_KEY=tr_dev_…   # tr_prod_… in production

# run the worker alongside the app, from apps/web:
cd apps/web
npx trigger.dev@latest dev

Stockage compatible S3 (Cloudflare R2)

À sauter sauf si le produit stocke des fichiers — STORAGE_PROVIDER=memory garde les uploads dans le processus pour le développement.

Tout bucket compatible S3 convient ; Cloudflare R2 est le choix le plus favorable au niveau gratuit. 1. Ouvrez dash.cloudflare.com → R2 Object Storage → Create bucket, nommez-le et gardez l'indication d'emplacement par défaut.

2. De retour sur la vue d'ensemble R2, ouvrez Manage R2 API Tokens → Create API token → permission Object Read & Write, limitée à ce bucket → Create. Copiez l'Access Key ID, la Secret Access Key et l'endpoint S3 affiché — https://<account-id>.r2.cloudflarestorage.com.

3. Renseignez les noms d'env ci-dessous. STORAGE_REGION=auto est la convention de R2 — le kit met us-east-1 par défaut, que R2 accepte aussi. STORAGE_FORCE_PATH_STYLE est déjà activé par défaut pour les endpoints personnalisés, ce que veut R2. Servir des fichiers publics exige en plus STORAGE_PUBLIC_BASE_URL ou un câblage CDN ; les fichiers privés n'ont besoin de rien d'autre.

Vérifiez : redémarrez et uploadez via l'app — l'objet apparaît dans le navigateur du bucket R2. Une erreur de signature ou un 403 signifie qu'il manque au token la lecture/écriture d'objets sur ce bucket ; créez un token frais avec la bonne portée.

# apps/web/.env.local
STORAGE_PROVIDER=s3
STORAGE_ENDPOINT=https://<account-id>.r2.cloudflarestorage.com
STORAGE_REGION=auto
STORAGE_BUCKET=your-bucket
STORAGE_ACCESS_KEY_ID=…          # server-only
STORAGE_SECRET_ACCESS_KEY=…      # server-only
# STORAGE_PUBLIC_BASE_URL=       # optional public-URL base

Sentry ou PostHog (optionnel)

Entièrement optionnel : chaque valeur d'observabilité est vide par défaut et le kit tourne très bien sans — ajoutez ceci quand vous voulez des rapports d'erreurs et de l'analytique en production.

Sentry pour les erreurs : sentry.io → créez un projet → choisissez la plateforme Next.js → l'écran de configuration affiche le DSN https://…@….ingest.sentry.io/… → SENTRY_DSN. Les exceptions arrivent alors dans Sentry étiquetées avec des ids de corrélation ; le niveau gratuit suffit pour démarrer.

PostHog pour l'analytique produit à la place : posthog.com → créez un projet → copiez la clé d'API du projet phc_… → NEXT_PUBLIC_POSTHOG_KEY plus NEXT_PUBLIC_POSTHOG_HOST (https://us.i.posthog.com, ou votre hôte UE). Ces deux-là sont des valeurs publiques de navigateur par conception ; SENTRY_DSN reste côté serveur. ALERT_WEBHOOK_URL poste en option des alertes d'échec vers un endpoint compatible Slack.

Vérifiez : redémarrez, levez une exception de test (ou rejouez l'événement d'exemple de Sentry) et confirmez qu'elle atterrit dans la liste Issues du projet.

# apps/web/.env.local — all optional
SENTRY_DSN=https://…@….ingest.sentry.io/…

NEXT_PUBLIC_POSTHOG_KEY=phc_…
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

# ALERT_WEBHOOK_URL=https://hooks.slack.com/services/…

Cloudflare Turnstile

Protection anti-bots pour les formulaires publics et les endpoints d'identifiants — CAPTCHA_PROVIDER=off par défaut, donc ajoutez-le avant d'ouvrir l'inscription à des inconnus. Gratuit.

1. Ouvrez dash.cloudflare.com → Turnstile → Add widget → nommez-le et listez les hostnames : localhost pour le développement plus votre vrai domaine → Create.

2. Copiez les deux valeurs : la Site Key — publique par conception, elle se rend dans le widget → NEXT_PUBLIC_TURNSTILE_SITE_KEY — et la Secret Key, que le serveur utilise pour vérifier → TURNSTILE_SECRET_KEY.

3. CAPTCHA_PROVIDER=turnstile l'active ; le démarrage échoue en nommant la clé qui manque. Le guide captcha liste exactement les surfaces que le widget protège.

Vérifiez : ouvrez /auth ou le formulaire de contact — le widget se rend ; les soumissions sans défi résolu sont rejetées. Si le widget ne se charge jamais, le hostname que vous visitez n'est pas dans la liste du widget.

# apps/web/.env.local
CAPTCHA_PROVIDER=turnstile
NEXT_PUBLIC_TURNSTILE_SITE_KEY=0x…   # public by design
TURNSTILE_SECRET_KEY=0x…             # server-only

Un domaine à vous

Un achat chez n'importe quel registrar — Cloudflare Registrar, Porkbun, Namecheap conviennent tous. Rien de tout cela ne se copie dans l'env ; le domaine apparaît dans le Services ID, le DNS de Resend, les hostnames de Turnstile et les return URL d'OAuth que vous avez configurées en chemin.

Deux façons de le pointer vers l'app : pour Cloud Run, utilisez le mapping de domaine du guide de déploiement — quelques clics de console plus les enregistrements DNS que Google liste. Ou déplacez le DNS vers les nameservers de Cloudflare (le registrar échange deux enregistrements) — optionnel, mais c'est aussi la façon propre de gérer les buckets publics R2 et les hostnames Turnstile au même endroit.

Pour poursuivre la configuration, consultez Configurer la base de données.

Questions fréquentes

14 questions

Qu'est-ce que supastack ?

supastack est une fondation modulaire pour construire des produits SaaS avec IA. Elle réunit l'infrastructure commune pour que vous puissiez vous concentrer sur les fonctionnalités propres à votre produit.

Prend-il en charge le web et le mobile ?

Oui. supastack inclut des applications Next.js et Expo comme points de départ pour des expériences web et mobile.

Quelle authentification est incluse ?

Better Auth couvre e-mail/mot de passe, OTP et connexion sociale. Les espaces de travail personnels sont provisionnés avec le compte pour que les enregistrements restent délimités dès le premier jour.

Comment l'IA est-elle prise en charge ?

supastack inclut une IA multi-fournisseurs configurable, le suivi d'usage, des budgets, et la prise en charge chiffrée de vos propres clés (BYOK).

Comment les abonnements sont-ils gérés ?

Pour les produits construits sur le kit, la facturation Stripe, les abonnements et les droits d'accès forment la base de l'accès payant. Les secrets fournisseur restent côté serveur.

Où vit le code propre à mon produit ?

Les fonctionnalités propres au produit restent dans un codebase séparé, tandis que le produit configure et intègre les modules de la fondation supastack.

Comment fonctionne la tarification de supastack ?

Le kit est un achat unique avec mises à jour à vie : Un framework à 249 $ (prix de lancement temporaire — 100 $ de réduction par rapport au prix habituel de 349 $) ou Tous les frameworks (Next.js, iOS, Android) à 499 $ (prix de lancement temporaire — 100 $ de réduction par rapport au prix habituel de 599 $), plus 75 $ par siège développeur supplémentaire. Pas d'abonnement au kit. Le paiement sur ce site livre votre clé de licence par e-mail, avec accès au dépôt via invitation GitHub.

Comment les espaces de travail délimitent mes données ?

Les enregistrements appartenant aux utilisateurs sont délimités par workspaceId. Identité, droits d'accès, usage IA, événements de facturation et entrées d'audit restent dans le périmètre de l'espace personnel.

Comment fonctionnent les jobs en arrière-plan ?

Trigger.dev est le runtime de jobs explicite. Le contrat JobRunner ne promet que enqueue, status et cancel — la sémantique de workflow reste propre à Trigger.dev et explicite.

En quoi l'e-mail diffère-t-il de la prospection ?

L'e-mail transactionnel couvre les flux produit comme les avis de fin de tâche. La prospection à froid et les campagnes relèvent du produit, hors du module e-mail de ce kit.

Comment fonctionnent les achats sur mobile ?

Le mobile inclut les achats natifs et leur restauration via RevenueCat, avec un accès vérifié par votre serveur. Configurez les comptes des boutiques et terminez les tests sur appareil avant publication. La facturation web reste séparée.

Où vivent les clés des fournisseurs IA ?

Les identifiants BYOK sont chiffrés et restent côté serveur. Les clés sont masquées dans les journaux ; l'usage et les budgets restent visibles au niveau de l'espace de travail.

Quels moyens de paiement le checkout accepte-t-il ?

Le checkout hébergé par Stripe accepte les cartes et peut aussi proposer Alipay et WeChat Pay une fois ces portefeuilles activés sur le compte Stripe — pratique pour les acheteurs en Chine. Les autorisations de portefeuille se confirment de manière asynchrone : la page de licence se met à jour dès que le paiement est validé.

Puis-je obtenir un remboursement ?

Une fois que vous avez accès au dépôt, supastack vous appartient pour toujours et ne peut donc pas être remboursé. Mais rassurez-vous : vous obtenez le code source complet avec des mises à jour à vie pour créer et déployer un nombre illimité de produits pour vous ou vos clients. Vous ne pouvez simplement pas revendre le code ni redistribuer le dépôt sous forme de kit de démarrage ou de modèle.

FR
Thème