S'inscrire

Création de compte actuel sans posséder de logique d'authentificationLien vers la section

SignUpPanel compose une surface de création de compte ciblée à partir du contenu et des contrôles fournis par votre application. Utilisez-le pour les informations d'identification, les actions du fournisseur, la copie du consentement et les liens de l'étape suivante pendant que votre produit conserve la propriété de la validation, de la création de compte et de l'authentification.

Identité canoniqueLien vers la section

• Catégorie : Authentificationlimace auth.
• Bloquer : sign-up, exportation SignUpPanel.
• Source canonique : apps/marketing/content/blocks/auth/sign-up/.
• Compléter le point d'entrée: index.tsx.

Copier la sourceLien vers la section

Configurez le paquetage public de l'interface utilisateur et tokens, puis créer src/components/blocks/sign-up/index.tsx dans votre application. Utilisez le bouton Copier de l'onglet Source lorsqu'il est disponible.

Si l'accès au presse-papiers n'est pas disponible, sélectionnez le code manuellement.

L'onglet Aperçu rend le canonique réel SignUpPanel grâce à un dispositif local déterministe. Il ne crée aucun compte, ne démarre aucun flux de fournisseur et n'effectue aucune demande réseau. L'onglet Source est le fichier canonique complet inclus au moment de la compilation, pas une implémentation dupliquée.

Installer en copiant la sourceLien vers la section

Conservez le fichier complet sur le chemin d'accès appartenant à l'application ci-dessus. La copie de la source ne crée pas de routes d'authentification, de configuration de fournisseur, de comptes ou de persistance. Branchez les contrôles fournis à votre propre comportement d'application, puis validez-le dans votre application.

"use client";

import { SignUpPanel } from "./blocks/sign-up";

export function SignUpScreen() {
  return (
    <SignUpPanel
      description="Create the account your workspace will use."
      form={
        <form
          className="space-y-4"
          onSubmit={(event) => event.preventDefault()}
        >
          <label className="grid gap-2 text-sm">
            Email
            <input
              className="rounded-md border bg-background px-3 py-2"
              name="email"
              type="email"
              autoComplete="email"
            />
          </label>
          <button className="rounded-md border px-4 py-2" type="submit">
            Create account
          </button>
        </form>
      }
      consent={
        <span>
          By continuing, you accept your application's terms and privacy policy.
        </span>
      }
      footer={<a href="/sign-in">Already have an account? Sign in</a>}
    />
  );
}

Utilisation "use client" uniquement là où la mise en œuvre de votre consommateur a besoin de gestionnaires ou d'un état d'authentification du client. Le bloc canonique ne contient pas de machine d'état de création de compte.

Ce que possède l'applicationLien vers la section

form est nécessaire. Facultatif providers, error, consent, footer, title, description et className vous permettent d'adapter la composition sans déplacer les règles de produit dans PyColors.

Les contrôles et les liens du fournisseur conservent leur comportement natif car le bloc rend vos nœuds React inchangés. Gardez les messages de validation véridiques et appliquez les règles de mot de passe, de vérification, de compte en double, de consentement légal et anti-abus dans votre application / backend validée.

Notes réactives et d'accessibilitéLien vers la section

Gardez chaque champ étiqueté, conservez la sémantique de soumission de formulaire native et rendez le texte de consentement compréhensible avant que l'utilisateur ne soumette. Utilisation du contenu d'erreur role="alert"; ne le fournir que lorsqu'une erreur réelle du consommateur nécessite une attention particulière. Passez en revue le focus du clavier, les cibles tactiles, la longue copie légale et les largeurs étroites de votre application.

Propriété et mises à jourLien vers la section

Votre application possède la source copiée et ne reçoit pas de mises à jour automatiques. Examinez les modifications canoniques ultérieures délibérément et validez-les dans votre application avant leur adoption.

Limites et prochaines étapesLien vers la section

Aucune persistance de compte, configuration Auth.js, configuration OAuth, e-mail de vérification, politique de mot de passe, mutation de session, autorisation, analyse, facturation ou service de production n'est implémenté ici.

Explorez le Blocage du catalogue, utiliser Se connecter pour les utilisateurs récurrents, ou Comparer les Starters pour une fondation d'application complète.