Como criar uma lista de verificação de senha com Next.js

As senhas são importantes e você deve fazer tudo o que puder para garantir que sejam seguras. Uma lista de verificação de senha pode fazer parte da sua abordagem.

No mundo de hoje, a segurança online é mais importante do que nunca. Com tantas contas online para controlar, é essencial ter uma senha forte e exclusiva para cada uma.

Se você estiver construindo um site, é ainda mais importante garantir que as senhas sejam tão seguras quanto possível. Você pode apresentar uma lista de verificação aos usuários do seu site e garantir que a senha atenda aos seus requisitos antes de aceitá-la.

Aprenda como implementar uma lista de verificação de senha usando Next.js.

Por que usar uma lista de verificação de senha?

Há muitos motivos pelos quais você pode querer usar uma lista de verificação de senha.

Primeiro, pode ajudá-lo a garantir que as senhas dos seus usuários sejam fortes e exclusivas. Ao ter uma lista de verificação de requisitos, você pode ter certeza de que cada senha atende a um determinado padrão.

Seus usuários podem não agradecer por isso, mas você estará fazendo um favor a eles. Ao encorajar senhas fortes, você diminuirá a probabilidade de um hacker obter acesso às contas de um dos seus usuários.

Em segundo lugar, uma lista de verificação de senhas pode ajudar a transmitir uma sensação de segurança. Ao publicar requisitos, você está dizendo aos seus usuários que leva a segurança da senha a sério.

Você deve estar ciente, entretanto, de que uma lista de verificação de senha não é uma solução milagrosa para problemas de senha. Na verdade, se você tornar suas senhas muito restritivas, poderá tornar mais fácil para os hackers restringirem suas opções e usarem uma senha com força bruta. Em última análise, as senhas seguras e exclusivas que os usuários armazenam em um gerenciador de senhas são as melhores.

Como criar uma lista de verificação de senha

Existem duas maneiras de criar uma lista de verificação de senha em Next.js. Você pode usar os recursos integrados ou um módulo externo.

O que você precisa

Para criar uma lista de verificação de senha em Next.js, você precisará do seguinte:

• Node.js instalado
• Um editor de texto
• Um projeto Next.js

Método 1: usando recursos integrados

Next.js vem com recursos integrados como ganchos e contexto. Existem diferentes tipos de ganchos que você pode usar para criar uma lista de verificação de senha.

Primeiro, crie um novo arquivo em seu aplicativo Next.js e nomeie-o como passwordChecklist.js. Neste arquivo, você pode inserir a senha dos usuários e verificar se a senha atende aos requisitos.

import React, { useState } from 'react'
 
function PasswordChecklist() {
  const [password, setPassword] = useState('')
  const [error, setError] = useState(false)
 
  function handleChange(e) {
    setPassword(e.target.value)
  }
 
  function handleSubmit(e) {
    e.preventDefault()
 
    // Password requirements
    const requirements = [
      // Must be at least 8 characters
      password.length >= 8,
      // Must contain at least 1 uppercase letter
      /[A-Z]/.test(password),
      // Must contain at least 1 lowercase letter
      /[a-z]/.test(password),
      // Must contain at least 1 number
      /\d/.test(password)
    ]
 
    // If all requirements are met, password is valid
    const isValid = requirements.every(Boolean)
    if (isValid) {
      alert('Password is valid!')
    } else {
      setError(true)
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
      {error && <p>Password is not valid!</p>}
    </form>
  )
}
 
export default PasswordChecklist

No código acima, primeiro você precisa inserir a senha dos usuários. Você pode fazer isso usando o gancho useState. Este gancho permite criar uma variável de estado e uma função para atualizar essa variável. Neste caso, a variável de estado é password e a função para atualizá-la é setPassword.

Em seguida, você precisa criar uma função para lidar com o envio do formulário. Esta função evitará a ação padrão do formulário (que é enviar o formulário) e verificará se a senha atende aos requisitos.

Os requisitos de senha são que ela deve:

• ter pelo menos oito caracteres
• contém pelo menos uma letra maiúscula
• conter pelo menos uma letra minúscula
• contém pelo menos um número

Você pode usar o método every para verificar se uma senha atende a todos os requisitos. Se isso acontecer, a senha é válida. Caso contrário, o código exibirá uma mensagem de erro.

Método 3: usando o módulo react-password-checklist

Outra maneira de criar uma lista de verificação de senha em Next.js é usando o módulo react-password-checklist. Este módulo é fácil de usar e vem com muitos recursos.

Primeiro, instale o módulo usando o seguinte comando:

npm install react-password-checklist --save

Em seguida, importe o módulo em seu arquivo passwordChecklist.js:

import React, {useState} from "react"
import PasswordChecklist from "react-password-checklist"
 
const App = () => {
   const [password, setPassword] = useState("")
 
   return (
       <form>
           <label>Password:</label>
           <input type="password" onChange={e => setPassword(e.target.value)}/>
 
           <PasswordChecklist
               rules={["minLength","specialChar","number","capital"]}
               minLength={5}
               value={password}
           />
       </form>
   )
}
 
export default App

Este código passa os adereços minLength, specialChar, number e capital para o componente PasswordChecklist. O componente usará esses adereços para verificar se a senha atende aos requisitos.

Você também pode adicionar mensagens traduzidas ao componente passando a propriedade messages. Essas strings substituem os erros padrão para que você possa usá-las em outros idiomas ou variações.

import React, {useState} from "react"
import PasswordChecklist from "react-password-checklist"
 
const App = () => {
   const [password, setPassword] = useState("")
 
   return (
       <form>
           <label>Password:</label>
           <input type="password" onChange={e => setPassword(e.target.value)}/>
 
           <PasswordChecklist
               rules={["minLength", "specialChar", "number", "capital"]}
               minLength={5}
               value={password}
              messages={{
                  minLength: "La contrase&ntilde;a tiene m&aacute;s de 8 caracteres.",
                   specialChar: "La contrase&ntilde;a tiene caracteres especially.",
                   number: "La contrase&ntilde;a tiene un n&uacute;mero.",
                   capital: "La contrase&ntilde;a tiene una letra may&uacute;scula.",
                   match: "Las contrase&ntilde;as coinciden.",
               }}
           />
       </form>
   )
}
 
export default App

No código acima, a propriedade messages armazena mensagens de erro alternativas. O componente exibirá essas mensagens quando a senha não atender aos requisitos.

Este método é mais conveniente porque você não precisa escrever o código para verificar se a senha atende aos requisitos. Existem também muitos outros benefícios em usar este módulo, como:

• Exibindo a força da senha: react-password-checklist pode exibir a força da senha para que os usuários possam ver o quão forte é sua senha.
• Exibindo a mensagem de erro: react-password-checklist também pode exibir a mensagem de erro se a senha não for válida.
• Estilo: você não precisa adicionar nenhum estilo extra à lista de verificação. O módulo fornece estilo padrão que você pode usar em seu aplicativo. Se quiser adicionar algum estilo adicional, você pode usar CSS normal ou outras estruturas de estilo, como CSS tailwind.

Melhore a segurança do usuário com uma lista de verificação de senha

Uma senha forte é a chave para a segurança online. É importante ter uma senha forte e exclusiva para cada conta online. Ao usar uma lista de verificação de senha, você pode ter certeza de que cada senha atende a um determinado padrão.

Os usuários do seu aplicativo também apreciarão poder ver a força da senha. Dessa forma, eles podem ter certeza de que suas senhas são fortes o suficiente. Isso melhorará a experiência do usuário do seu aplicativo e também a segurança dos usuários do seu aplicativo. Da mesma forma, você também pode validar os formulários em seu aplicativo Next.js.