Replit Auth vs. Clerk Auth — Avec Replit Auth, les utilisateurs se connectent avec des comptes Replit et voient des pages de connexion aux couleurs de Replit. Avec Clerk Auth (cette page), votre application dispose de son propre tenant d’authentification avec une personnalisation de marque entièrement configurable et des comptes utilisateurs indépendants de Replit. Choisissez Clerk Auth lorsque vous souhaitez apposer votre propre marque sur l’expérience de connexion ou avez besoin de comptes utilisateurs distincts de Replit.
Replit Auth vs. Clerk Auth en un coup d’œil
| Replit Auth | Clerk Auth | |
|---|---|---|
| Comptes utilisateurs | Les utilisateurs se connectent avec un compte Replit | Les utilisateurs créent des comptes dans votre application (sans compte Replit) |
| Marque | Page de connexion aux couleurs de Replit | Entièrement personnalisable — nom, icône et couleurs de votre application |
| Identifiants SSO | Utilise les applications OAuth partagées de Replit | Apportez vos propres identifiants OAuth par fournisseur |
| Environnements | Environnement unique | Environnements Development et Production séparés |
| Parrainages | Les inscriptions comptent pour les parrainages Replit | Pas d’intégration de parrainage Replit |
| Idéal pour | Configuration rapide, applications où la marque Replit est acceptable | Applications avec marque personnalisée, produits professionnels/commerciaux |
Prise en main
Pour ajouter Clerk Auth à votre application, incluez-le dans votre invite Agent :Fonctionnement de Clerk Auth avec Replit
Lorsqu’Agent configure Clerk Auth pour votre application, il :- Crée un tenant Clerk dédié — Votre application dispose de sa propre application Clerk avec des environnements Development et Production séparés
- Provisionne les identifiants — Les clés API et les secrets sont stockés en tant que variables d’environnement
- Configure un proxy — L’authentification fonctionne de manière transparente sur votre domaine publié
- Configure les routes de connexion et d’inscription — Des composants React Clerk préconfigurés sont ajoutés à votre application
- Ajoute un middleware côté serveur — Vos routes API sont protégées par le middleware Express de Clerk
Fonctionnalités clés
Clerk Auth offre à votre application :- Comptes utilisateurs indépendants — Les utilisateurs de votre application ne sont pas des utilisateurs Replit ; ils n’existent que dans le tenant Clerk de votre application
- Page de connexion configurable — Définissez le nom et l’icône de votre application, et choisissez les fournisseurs de connexion à afficher
- SSO personnalisé à votre marque — Fournissez vos propres identifiants OAuth par fournisseur afin que le flux de connexion affiche le nom et la marque de votre application plutôt que des valeurs génériques
- Authentification par e-mail et mot de passe — Inscription et connexion intégrées avec vérification par e-mail
- Connexion sociale (SSO) — Permettez aux utilisateurs de se connecter avec Google, GitHub, Apple ou X (Twitter)
- Gestion des utilisateurs — Affichez, recherchez et modérez les utilisateurs depuis le volet Auth
- Gestion des sessions — Jetons de session sécurisés gérés automatiquement
- Environnements Development et Production — Testez l’authentification en développement avant de passer en production
Gestion des utilisateurs
Le volet Auth de votre Workspace vous offre une vue complète de vos utilisateurs authentifiés. Comme Clerk Auth crée un espace utilisateur séparé pour votre application, les utilisateurs listés ici sont des comptes dans votre application — pas des comptes Replit.
- Afficher tous les utilisateurs avec des détails tels que l’e-mail, le nom, la dernière connexion et la date de création du compte
- Rechercher et filtrer pour trouver des utilisateurs spécifiques
- Bannir ou débannir des utilisateurs pour contrôler l’accès à votre application
- Trier les utilisateurs selon différents critères
- Changer d’environnement — Basculez entre Development et Production pour gérer les utilisateurs dans chaque environnement
Configuration de votre page de connexion
Depuis l’onglet Configure du volet Auth, vous pouvez contrôler les fournisseurs de connexion qui apparaissent sur votre page de connexion et définir le nom et l’icône de votre application.
- Nom de l’application — Affiché sur l’écran de connexion
- Icône de l’application — Le logo de votre marque sur l’écran de connexion
- Méthodes de connexion — Activer ou désactiver des fournisseurs de connexion spécifiques (Google, GitHub, Apple, X, E-mail)
- Environnement — Basculer entre les paramètres Development et Production
Configuration des fournisseurs SSO
Clerk Auth prend en charge Google, GitHub, Apple et X comme fournisseurs de connexion sociale. Depuis l’onglet Configure du volet Auth, vous contrôlez quels fournisseurs apparaissent sur votre page de connexion et — en Production — si chaque fournisseur utilise les identifiants OAuth gérés par Replit ou vos propres identifiants personnalisés pour une connexion aux couleurs de votre marque.Configuration générale
Ouvrez le volet Auth dans votre Workspace et sélectionnez l’onglet Configure. La section SSO providers liste tous les fournisseurs pris en charge avec un interrupteur et une icône Edit à côté de chacun.- Changer d’environnement — Basculez entre Development et Production en haut de la liste des fournisseurs SSO et configurez les fournisseurs pour chaque environnement séparément.
- Activer ou désactiver un fournisseur — Utilisez l’interrupteur pour contrôler si le fournisseur apparaît sur votre page de connexion. Les fournisseurs désactivés sont masqués pour les utilisateurs.
- Configurer les identifiants OAuth du fournisseur en Production - Voir la section suivante.
Configuration des identifiants OAuth pour un fournisseur SSO
Par défaut, les fournisseurs utilisent des identifiants gérés par Replit — la connexion fonctionne immédiatement, mais l’écran de consentement OAuth affiche la marque Replit. Passez aux identifiants personnalisés pour utiliser votre propre client OAuth depuis la console développeur du fournisseur afin que l’écran de consentement affiche le nom et la marque de votre application.- Dans l’onglet Configure, sélectionnez l’environnement Production.
- Sélectionnez l’icône Edit à côté du fournisseur que vous souhaitez configurer.
- Les identifiants gérés par Replit sont utilisés par défaut.
- Sélectionnez Custom credentials. Le panneau se développe pour afficher les champs d’identifiants et une liste de contrôle Provider setup avec les valeurs que vous devez enregistrer côté fournisseur.
- Suivez les instructions pour terminer la configuration. Les instructions contiennent des liens directs vers la console et les documentations d’aide pertinentes. Vous pouvez également trouver ces documentations sous Ressources supplémentaires pour votre fournisseur.
- Remplissez toutes les valeurs d’identifiants requises.
- Dans la console développeur du fournisseur, enregistrez chaque entrée listée sous la liste de contrôle Provider setup dans le portail développeur du fournisseur. Utilisez les icônes de copie pour copier chaque valeur exactement, et cochez les éléments au fur et à mesure ou sélectionnez Mark all as done lorsque vous avez terminé.
- Sélectionnez Save changes.
Revérification de la configuration après des changements de domaine
Les opérations liées au domaine — telles que la liaison d’un nouveau domaine externe ou l’achat d’un domaine via Replit — peuvent modifier les URL de rappel de redirection et les origines JavaScript de votre application. Dans ce cas, tout fournisseur configuré avec des identifiants personnalisés peut nécessiter l’enregistrement des nouvelles valeurs dans sa console développeur. Après un changement de domaine, retournez dans l’onglet Configure et parcourez la liste SSO providers pour repérer les rappels de configuration. Une icône d’avertissement et un indicateur setup steps remaining à côté d’un fournisseur signifient que sa liste de contrôle Provider setup contient de nouveaux éléments à compléter.
Configuration du domaine pour la vérification par e-mail
Si votre application propose une inscription par e-mail et mot de passe, Clerk envoie un code de vérification à la boîte de réception de chaque nouvel utilisateur. La configuration de votre domaine pour la livraison des e-mails garantit que ces codes arrivent depuis l’URL de votre application plutôt que d’être retardés ou bloqués par les filtres anti-spam.Quand cette configuration est nécessaire
Vous devez uniquement configurer des enregistrements DNS lorsque votre application lie un domaine externe géré par un autre fournisseur (par exemple, un domaine enregistré avec Cloudflare, GoDaddy, Namecheap ou similaire). Aucune configuration n’est requise si votre application est servie depuis :- Un sous-domaine
.replit.app - Un domaine acheté via Replit
Ajouter des enregistrements DNS pour l’envoi d’e-mails
Pour autoriser votre application à envoyer des e-mails de vérification depuis votre domaine externe, ajoutez un ensemble d’enregistrements DNS chez votre fournisseur de domaine.- Dans votre Workspace, ouvrez Publishing.
- Sélectionnez Domains.
- Trouvez votre domaine externe lié et sélectionnez Manage.
- Sous Authentication DNS setup required, copiez les enregistrements CNAME affichés par Replit — ce sont les enregistrements dont Clerk a besoin pour envoyer des e-mails de vérification depuis votre domaine.
- Connectez-vous à votre fournisseur DNS (Cloudflare, GoDaddy, Namecheap, etc.) et ajoutez chaque enregistrement exactement tel qu’affiché.
Dépannage
- E-mails de vérification non reçus — Confirmez que chaque enregistrement a été ajouté exactement tel qu’affiché dans le panneau Manage, y compris les points finaux requis par votre fournisseur DNS. Vérifiez le dossier spam du destinataire.
- Enregistrements toujours non détectés — Attendez la propagation DNS (jusqu’à 48 heures) et revérifiez le panneau Manage pour tout enregistrement encore signalé comme manquant.
Bonnes pratiques de sécurité
- Toujours valider côté serveur — Vérifiez l’authentification dans vos routes API, pas seulement dans l’interface utilisateur
- Utiliser des variables d’environnement — Ne codez jamais en dur les clés ou les secrets dans votre code
- Garder le middleware proxy en premier — Le proxy Clerk doit être monté avant les parseurs de corps dans votre application Express
- Ne pas rediriger la page d’accueil vers la connexion — Gardez votre page d’accueil accessible aux visiteurs non authentifiés
Ressources supplémentaires
- Configurer Google SSO — Configurer des identifiants Google OAuth personnalisés
- Configurer GitHub SSO — Configurer des identifiants GitHub OAuth personnalisés
- Configurer Apple SSO — Configurer des identifiants Sign in with Apple personnalisés
- Configurer X (Twitter) SSO — Configurer des identifiants X OAuth personnalisés