Récupération de mot de passe · Documentation

Présentez le recouvrement de compte sans émettre des informations d'identification de réinitialisationLien vers la section

PasswordRecoveryPanel donne à une application une surface de récupération délimitée tout en gardant le travail sensible en dehors du bloc. Fournissez votre propre formulaire, copie d'erreur / statut, contenu d'aide et navigation dans le pied de page; votre application possède l'émission de liens de réinitialisation, la livraison de courriels, les tokens et les mises à jour de mot de passe.

Aucun comportement de récupération n'est caché à l'intérieur du Bloc

Ce composant ne génère jamais de token, envoie des e-mails, vérifie un compte, modifie un mot de passe ou redirige un utilisateur. Ces opérations restent la propriété des applications.

Identité canoniqueLien vers la section

Catégorie : Authentificationlimace auth.
Bloquer : password-recovery, exportation PasswordRecoveryPanel.
Source canonique : apps/marketing/content/blocks/auth/password-recovery/.
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/password-recovery/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.

Récupérer votre compte

Saisissez l'adresse e-mail associée à votre espace de travail.

Utilisez l'adresse que votre application reconnaît.

Aperçu interactif uniquement. Aucune requête réseau n'est effectuée.

L'onglet Aperçu rend le canonique réel PasswordRecoveryPanel grâce à un dispositif local déterministe. Il ne crée aucun token, n'envoie aucun e-mail 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. Connectez-le à votre propre terminal de récupération ou fournisseur d'authentification uniquement après la copie, puis validez-le dans votre application.

src/components/password-recovery-screen.tsx

"use client";

import { PasswordRecoveryPanel } from "./blocks/password-recovery";

export function PasswordRecoveryScreen() {
  return (
    <PasswordRecoveryPanel
      description="Enter the email associated with your account."
      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">
            Request recovery link
          </button>
        </form>
      }
      help={<span>Use the address your application recognizes.</span>}
      footer={<a href="/sign-in">Back to sign in</a>}
    />
  );
}

Utilisation "use client" uniquement dans le composant consommateur qui possède un état interactif ou des gestionnaires. Le bloc canonique reste uniquement présentatif.

Ce que possède l'applicationLien vers la section

form est nécessaire. error, status, help, footer, title, description et className sont facultatifs. Utilisation error pour une tentative de récupération réelle échouée et status pour une copie de progrès ou de succès authentique appartenant au consommateur.

Ne révélez pas si un compte existe à moins que votre politique de sécurité ne le permette explicitement. La durée de vie des tokens, la protection contre la répétition, la limitation des taux, la politique de mot de passe, la livraison des e-mails, les URL de récupération et les mises à jour de compte appartiennent à votre implémentation auth / backend.

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

Le bloc conserve une mise en page étroite lisible et des classes de thèmes sémantiques. Conservez chaque entrée étiquetée et conservez le focus visible. Utilisation du contenu d'erreur role="alert"; utilisation du contenu de statut role="status". Évitez les messages simultanés contradictoires à moins que votre application n’ait une raison claire et testez le flux réel avec le clavier et la technologie d’assistance.

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 délibérément les modifications canoniques futures, préservez les personnalisations locales et validez-les dans votre application avant leur adoption.

Limites et prochaines étapesLien vers la section

Aucune génération de token de réinitialisation de mot de passe, livraison de courrier électronique, recherche de compte, mutation de mot de passe, mise à jour de session, configuration Auth.js, autorisation, persistance, analyse ou secret de production n'est implémenté ici.

Explorez le Blocage du catalogue, retour à Se connecterou Comparer les Starters pour une fondation d'application complète.