Campo de senha no React Native: ocultar, mostrar e autofill
Guia de campo de senha no React Native
Campo de senha no React Native: mostrar/ocultar, autofill, força | We.Inc
Crie um campo de senha no React Native: secureTextEntry, um botão de mostrar e ocultar, autoComplete e textContentType para gerenciadores de senha, mais um medidor de força para testar.
Transforme um TextInput em campo de senha com secureTextEntry, que mascara cada caractere e não pode ser combinado com multiline. Adicione um botão Pressable de olho que alterna essa prop para mostrar e ocultar. Para gerenciadores de senha, defina autoComplete="password" nas telas de login ou "new-password" no cadastro, e o textContentType correspondente no iOS.
Props para campos de senha de login e de cadastro
Prop
Campo de login
Campo de cadastro
secureTextEntry
true (até ser revelado)
true (até ser revelado)
autoComplete
"password"
"new-password"
textContentType (iOS)
"password"
"newPassword"
passwordRules (iOS)
não é necessário
regras opcionais para senhas geradas
autoCapitalize
"none"
"none"
autoCorrect
Teste o campo abaixo: digite uma senha, use o botão de revelar e veja o medidor reagir. Alterne entre login e cadastro para ver quais props de autofill cada tela deve ter; a lógica do medidor é a mesma função curta que você pode colar no seu app.
Um booleano no state, hidden, começa como true e alimenta secureTextEntry.
O Pressable de olho fica ao lado do campo e alterna hidden a cada toque.
O accessibilityLabel dele alterna entre Mostrar senha e Ocultar senha para que a ação fique sempre clara.
A função de força pontua o comprimento e a variedade de caracteres e devolve um rótulo para a barra abaixo do campo.
Desative autoCorrect e defina autoCapitalize como none, para que o teclado nunca reescreva uma senha.
Use new-password nas telas de cadastro e de redefinição; isso diz ao sistema para oferecer uma senha gerada em vez de uma salva.
Deixe o botão de revelar grande o bastante para tocar e fora da área de texto, para que ele nunca cubra os últimos caracteres.
Trate qualquer medidor no cliente apenas como uma dica. O comprimento é o que mais importa, e o servidor decide o que aceita.
Nunca registre o valor do campo em logs nem o envie para analytics durante a depuração.
Perguntas frequentes
Como esconder uma senha no React Native?
Defina secureTextEntry no TextInput. A documentação diz que ele oculta o texto para manter as senhas seguras, tem false como padrão e não funciona com multiline definido como true.
Como adicionar um botão de mostrar senha?
Mantenha um booleano hidden no state, passe-o para secureTextEntry e renderize ao lado do campo um Pressable que o alterna. Dê um rótulo ao botão para que os leitores de tela anunciem o que tocar nele vai fazer.
Por que o iOS não oferece uma senha forte no cadastro?
Defina textContentType="newPassword" no campo. Com esse valor você também pode passar passwordRules, escritas na sintaxe de regras de senha da Apple, para que a senha gerada atenda aos seus requisitos.
Qual valor de autoComplete um campo de senha deve usar?
"password" onde a pessoa digita uma senha existente e "new-password" onde ela cria uma. Os dois estão entre os valores de autoComplete multiplataforma.
Autofill nas duas plataformas
autoComplete é a dica que as duas plataformas leem, enquanto textContentType é exclusivo do iOS e liga o campo ao keychain do aparelho. Definir os dois não custa nada e cobre mais gerenciadores de senha.
Combine o campo de senha com um campo de nome de usuário ou e-mail que tenha autoComplete="username" ou "email", para que o gerenciador saiba a qual conta a senha pertence.
O que o medidor de força mede
O medidor desta página conta o comprimento e os tipos de caracteres usados: minúsculas, maiúsculas, dígitos e símbolos. É um empurrãozinho rápido, não uma auditoria, e ele não consegue identificar uma senha comum ou já vazada.
Frases-senha longas pontuam bem aqui, porque três dos quatro pontos vêm do comprimento e só um da mistura de tipos de caracteres. Combine o medidor com uma verificação de comprimento mínimo na sua validação.
Código do campo de senha
PasswordInput com botão de revelar
Passe isNew nas telas de cadastro. O rótulo do botão sempre descreve o que o próximo toque vai fazer.
Função de pontuação de força
Devolve de 1 a 4 para qualquer string não vazia. Associe o número a um rótulo e a uma largura de barra.