Champ mot de passe React Native : masquer, afficher et remplissage automatique
Guide du champ mot de passe React Native
Champ mot de passe React Native : afficher/masquer, autofill, force | We.Inc
Créez un champ mot de passe React Native : secureTextEntry, un bouton afficher et masquer, autoComplete et textContentType pour les gestionnaires de mots de passe, et un indicateur de force à essayer.
Transformez un TextInput en champ mot de passe avec secureTextEntry, qui masque chaque caractère et ne peut pas être combiné avec multiline. Ajoutez un bouton œil Pressable qui inverse cette prop pour afficher ou masquer. Pour les gestionnaires de mots de passe, définissez autoComplete="password" sur les écrans de connexion ou "new-password" sur l'inscription, ainsi que le textContentType iOS correspondant.
Props des champs mot de passe de connexion et d'inscription
Prop
Champ de connexion
Champ d'inscription
secureTextEntry
true (jusqu'à l'affichage)
true (jusqu'à l'affichage)
autoComplete
"password"
"new-password"
textContentType (iOS)
"password"
"newPassword"
passwordRules (iOS)
inutile
règles facultatives pour les mots de passe générés
autoCapitalize
"none"
"none"
autoCorrect
Essayez le champ ci-dessous : saisissez un mot de passe, actionnez le bouton d'affichage et regardez l'indicateur réagir. Basculez entre connexion et inscription pour voir quelles props de remplissage automatique chaque écran doit porter ; la logique de l'indicateur est la même courte fonction que vous pouvez coller dans votre app.
Un booléen hidden dans le state commence à true et alimente secureTextEntry.
Le Pressable en forme d'œil se trouve à côté du champ et inverse hidden à chaque appui.
Son accessibilityLabel alterne entre Afficher le mot de passe et Masquer le mot de passe pour que l'action soit toujours claire.
La fonction de force évalue la longueur et la variété des caractères, et renvoie un libellé pour la barre sous le champ.
Désactivez autoCorrect et réglez autoCapitalize sur none, pour que le clavier ne réécrive jamais un mot de passe.
Utilisez new-password sur les écrans d'inscription et de réinitialisation : cela indique au système de proposer un mot de passe généré plutôt qu'un mot de passe enregistré.
Gardez le bouton d'affichage assez grand pour être touché facilement et en dehors de la zone de texte, pour qu'il ne masque jamais les derniers caractères.
Considérez tout indicateur côté client comme une simple indication. La longueur compte le plus, et c'est le serveur qui décide de ce qu'il accepte.
Ne journalisez jamais la valeur du champ et ne l'envoyez jamais à vos outils d'analytics pendant le débogage.
Questions fréquentes
Comment masquer un mot de passe en React Native ?
Définissez secureTextEntry sur le TextInput. La documentation indique qu'il masque le texte pour protéger les mots de passe, qu'il vaut false par défaut et qu'il ne fonctionne pas quand multiline vaut true.
Comment ajouter un bouton pour afficher le mot de passe ?
Gardez un booléen hidden dans le state, passez-le à secureTextEntry et affichez à côté du champ un Pressable qui l'inverse. Donnez un libellé au bouton pour que les lecteurs d'écran annoncent l'effet d'un appui.
Pourquoi iOS ne propose-t-il pas de mot de passe fort à l'inscription ?
Définissez textContentType="newPassword" sur le champ. Avec cette valeur, vous pouvez aussi passer passwordRules, écrit dans la syntaxe de règles de mots de passe d'Apple, pour que le mot de passe généré respecte vos exigences.
Quelle valeur autoComplete un champ mot de passe doit-il utiliser ?
"password" là où l'on saisit un mot de passe existant et "new-password" là où l'on en crée un. Les deux figurent parmi les valeurs autoComplete multiplateformes.
Le remplissage automatique sur les deux plateformes
autoComplete est l'indication que lisent les deux plateformes, tandis que textContentType est propre à iOS et relie le champ au trousseau de l'appareil. Définir les deux ne coûte rien et couvre davantage de gestionnaires de mots de passe.
Associez le champ mot de passe à un champ identifiant ou e-mail portant autoComplete="username" ou "email", pour que le gestionnaire sache à quel compte appartient le mot de passe.
Ce que mesure l'indicateur de force
L'indicateur de cette page compte la longueur et les types de caractères utilisés : minuscules, majuscules, chiffres et symboles. C'est un coup de pouce rapide, pas un audit, et il ne peut pas repérer un mot de passe courant ou déjà divulgué.
Les longues phrases de passe obtiennent un bon score ici, car trois des quatre points viennent de la longueur et un seul de la variété des types de caractères. Associez l'indicateur à une vérification de longueur minimale dans votre validation.
Code du champ mot de passe
PasswordInput avec un bouton d'affichage
Passez isNew pour les écrans d'inscription. Le libellé du bouton décrit toujours ce que fera le prochain appui.
Fonction de score de force
Renvoie 1 à 4 pour toute chaîne non vide. Associez le nombre à un libellé et à une largeur de barre.