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/setup-oauth.md (or send Accept: text/markdown).

Configurer la connexion OAuth

Google, Apple, GitHub, Microsoft et Twitter — un drapeau plus une paire client chacun.

Créer et vérifier un compte réel

L'authentification signifie prouver qui utilise l'application. Démarrez Postgres et exécutez d'abord les migrations à l'aide du guide de base de données, puis laissez le serveur Web en cours d'exécution. Ouvrez http://localhost:3000/auth,, choisissez inscription par e-mail/mot de passe, entrez votre nom, votre e-mail et votre mot de passe, puis soumettez. Conservez EMAIL_PROVIDER=local pour ce premier test.

Lorsqu'un flux demande un code de courrier électronique, ouvrez http://localhost:3000/mail-preview dans un autre onglet du navigateur, recherchez le message le plus récent pour cette adresse et recopiez son code dans le formulaire de connexion. Demandez un nouveau code s’il expire. Ces messages restent dans la boîte d'envoi locale ; vérifier à plusieurs reprises une boîte de réception externe ne les trouvera pas. Déconnectez-vous, puis reconnectez-vous pour confirmer que le compte sauvegardé par la base de données fonctionne.

Si l'inscription signale une connexion à la base de données ou une erreur de table manquante, terminez la configuration de la base de données au lieu d'activer la connexion sociale. Les boutons Google, GitHub, Apple, X et Microsoft nécessitent leur propre application fournisseur et leurs propres paramètres de rappel ; activez-en un uniquement une fois son guide du fournisseur terminé. Better Auth est le moteur par défaut livré et ne nécessite pas de compte d'authentification payant pour la connexion par courrier électronique local.

Choisir les méthodes de connexion activées

La base comprend la connexion par e-mail et mot de passe, les codes OTP et l’authentification sociale configurable. Better Auth gère l’identité et les sessions, tandis que l’application compose la configuration des fournisseurs et l’envoi transactionnel des codes OTP.

Activez uniquement les fournisseurs sociaux que vous avez configurés. Les secrets client des fournisseurs et le secret d’authentification restent côté serveur.

Relier l’identité à un espace de travail

Les gestionnaires authentifiés résolvent l’état de la session avant d’accéder aux données de l’espace de travail. La création d’un espace de travail doit rester idempotente afin que la répétition d’un hook de cycle de vie ne crée pas de doublons dans les enregistrements de propriété.

Vérifier le comportement des sessions

Testez la connexion, les codes OTP invalides ou expirés, leur utilisation unique, la déconnexion et le refus des accès anonymes. Les tests avec adaptateur mémoire couvrent la sémantique des gestionnaires ; la persistance en base de données en production et les vrais rappels des fournisseurs nécessitent une validation distincte.

Configuration et paramètres

1. Définissez AUTH_SECRET sur au moins 32 caractères aléatoires — openssl rand -hex 32 fait l'affaire.

2. Dans la console développeur de chaque fournisseur, créez une app OAuth et enregistrez l'URL de callback : {APP_URL}/api/auth/callback/<provider> sous Better Auth (l'AUTH_PROVIDER par défaut). Utilisez des apps séparées pour le local et la production là où le fournisseur n'accepte qu'un seul callback — docs/github-auth-setup.md détaille le flux GitHub de bout en bout.

3. Basculez le drapeau du fournisseur et définissez sa paire client — AUTH_GOOGLE_ENABLED plus GOOGLE_CLIENT_ID et GOOGLE_CLIENT_SECRET, et le trio correspondant pour Apple, GitHub, Microsoft ou Twitter. Activer un drapeau sans ses identifiants fait échouer le démarrage en nommant la variable manquante.

4. Microsoft est le seul callback qui diffère selon le moteur : /api/auth/callback/microsoft sous Better Auth, /api/auth/callback/microsoft-entra-id sous Auth.js.

AUTH_SECRET=<at-least-32-random-characters>
AUTH_PASSKEY_ENABLED=true
EARLY_ACCESS_INVITE_ONLY=false

AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=…
GOOGLE_CLIENT_SECRET=…

AUTH_GITHUB_ENABLED=true
GITHUB_CLIENT_ID=…
GITHUB_CLIENT_SECRET=…

# AUTH_APPLE_ENABLED / AUTH_MICROSOFT_ENABLED / AUTH_TWITTER_ENABLED
# follow the same pattern:
# MICROSOFT_CLIENT_ID=…  MICROSOFT_CLIENT_SECRET=…
# TWITTER_CLIENT_ID=…    TWITTER_CLIENT_SECRET=…

# Workspace connected accounts (Settings → Connections):
# CONNECTED_X_CLIENT_ID=          CONNECTED_X_CLIENT_SECRET=
# CONNECTED_GOOGLE_CLIENT_ID=     CONNECTED_GOOGLE_CLIENT_SECRET=
# CONNECTED_MICROSOFT_CLIENT_ID=  CONNECTED_MICROSOFT_CLIENT_SECRET=

# Callbacks to register (Better Auth):
#   {APP_URL}/api/auth/callback/google
#   {APP_URL}/api/auth/callback/apple
#   {APP_URL}/api/auth/callback/github
#   {APP_URL}/api/auth/callback/twitter
#   {APP_URL}/api/auth/callback/microsoft   (Auth.js: microsoft-entra-id)

Processus d’implémentation

Les comptes externes de workspace sont une surface différente : les paires CONNECTED_X_*, CONNECTED_GOOGLE_* et CONNECTED_MICROSOFT_* alimentent Paramètres → Connexions, et leurs callbacks vivent sous {APP_URL}/api/accounts/{x|google|microsoft}/callback. Un client id vide laisse le flux de connexion de ce fournisseur désactivé — n'y réutilisez pas les identifiants de l'app de connexion.

Les secrets client des fournisseurs restent réservés au serveur, exactement comme AUTH_SECRET — jamais dans des variables NEXT_PUBLIC_ ou EXPO_PUBLIC_.

Connexion fonctionnelle ? Continuez vers Configurer l'IA.

Vérification et dépannage

Testez une première connexion, une session de retour, un écran de consentement annulé et un fournisseur désactivé. Un callback mal enregistré est l'échec habituel — l'URL enregistrée doit correspondre exactement à APP_URL et à l'id de callback du moteur, et l'app a besoin d'un redémarrage après un changement d'env.

Pour poursuivre la configuration, consultez Configurer l'IA.

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