Como Validar Dados de Forma Segura com Zod ☀️

1. Entendo a funcionalidade do ZOD

Zod é uma biblioteca de validação de dados para TypeScript que permite definir schemas de forma simples e tipada. Com ele, é possível validar desde valores primitivos, como strings e números, até estruturas complexas, como objetos e arrays, garantindo segurança e consistência nos dados da aplicação.

const formSchema = z
  .object({
     username: z.string().min(5).max(12).trim(),
     email: z.email().min(5).trim().trim(),
     password: z.string().min(7),
     confirmPassword: z.string().min(7),
   })
  .refine(
     (data) => data.confirmPassword === data.password,
     "As senhas não se coencidem"
   );

2. Instalando o ZOD no projeto

Antes de começarmos, precisamos instalar o Zod em nosso projeto. Para isso, basta executar o seguinte comando: yarn add zod. Com a instalação concluída, o Zod já estará disponível em nosso ambiente, permitindo que criemos nosso primeiro schema de validação🔥

import { z } from "zod"

3. Definindo um Schema

Para valdiarmos os dados, primeiro devemos definir um Schema. Um Schema representa tipos, desde de uma String até um Array ou Objetos.

• Primeiro caso de uso: vamos considerar uma situação em que precisamos validar o nome de usuário (username) em nossa aplicação. Ou seja, o usuário poderá inserir seu nome de usuário ao se cadastrar, e queremos garantir que esse valor atenda a certos critérios, por exemplo, possuir um tamanho mínimo, máximo e estar no formato esperado.

import { z } from "zod"

const usernameSchema = z.string()
.min(5, "O username deve conter no mínimo 5 caracteres")
.max(12, "O username deve conter no máximo 5 caracteres")

Como podemos ver, para criar nosso primeiro schema de validação, utilizamos o método .string() do objeto z, responsável por indicar que o valor esperado deve ser uma string.

Para definir um valor mínimo de caracteres, utilizamos o método .min(), que recebe dois parâmetros:

1. O número mínimo de caracteres permitidos;
2. A mensagem de erro exibida caso a validação falhe;

• Segundo caso de uso: vamos considerar uma situação em que estamos recebendo um payload contendo os dados necessários para o cadastro de um novo usuário em nossa plataforma.

const formSchema = z
  .object({
     username: z.string().min(5).max(12).trim(),
     email: z.email().min(5).trim().trim(),
     password: z.string().min(7),
     confirmPassword: z.string().min(7),
   })
  .refine(
     (data) => data.confirmPassword === data.password,
     "As senhas não se coencidem"
   );

Neste caso de uso específico, precisamos comparar as duas senhas (password e confirmPassword). Caso elas não coincidam, deve ser retornada uma mensagem de erro informando:
"As senhas não coincidem"

Ou seja, será necessário criar uma validação personalizada, que não está disponível por padrão no Zod. Para isso iremos utilizar o método .refine()

• .REFINE()

O método .refine() nos permite criar validações personalizadas em um schema.
Ele recebe dois parâmetros principais:

1. Uma função de callback responsável pela validação. Deve retornar um valor booleano, indicando se a condição é válida (true) ou não (false);
2. Mensagem de erro se a validação for falsa

4. Validando os dados

Para validar os dados, podemos utilizar o método .parse, passando como argumento o objeto (ou qualquer outro tipo de dado) que desejamos validar.

Com o .parse, se o objeto for válido, o método retorna exatamente o que foi passado como argumento. Se for inválido, ele lança um erro do tipo ZodError.

const form = {
    username: "RuanDevJs",
    email: "[e-mail]",
    password: "Password@0777",
    confirmPassword: "Password@0777",
};

const data = formSchema.parse(form);
console.log(`Bem vindo ${data.username}`)

• .safeParse()

Para evitar a necessidade de tratar erros manualmente, podemos utilizar o método .safeParse(), que já faz esse tratamento internamente e nos retorna um objeto com três propriedades:

• success: um booleano que indica se o objeto é válido ou não
• error: uma instância de ZodError (presente apenas quando a validação falha)
• data: os dados validados (presente apenas quando a validação é bem-sucedida)

const data = formSchema.safeParse(form);

console.log("Resultado da validação: ", data.success);
console.log("Retorno da validação: ", data.data);
console.error("Erro da validação: ", data.error);