Como consumir API de CPF em SvelteKit com load functions e form actions

src/
    lib/
    server/
    cpfhub.ts # Servico de consulta (server-only)
    routes/
    consulta-cpf/
    +page.svelte # Interface do formulario
    +page.server.ts # Load function e form actions

// src/lib/server/cpfhub.ts
import { CPFHUB_API_KEY } from "$env/static/private";

interface CPFData {
    cpf: string;
    name: string;
    nameUpper: string;
    gender: string;
    birthDate: string;
    day: number;
    month: number;
    year: number;
}

interface CPFResponse {
    success: boolean;
    data?: CPFData;
}

export async function consultarCPF(cpf: string): Promise<CPFResponse> {
    const cpfLimpo = cpf.replace(/\D/g, "");

    if (cpfLimpo.length !== 11) {
    throw new Error("CPF deve conter 11 digitos");
    }

    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 10000);

    try {
    const response = await fetch(
    `https://api.cpfhub.io/cpf/${cpfLimpo}`,
    {
    method: "GET",
    headers: {
    "x-api-key": CPFHUB_API_KEY,
    "Accept": "application/json"
    },
    signal: controller.signal
    }
    );

    clearTimeout(timeout);

    if (!response.ok) {
    throw new Error(`API retornou status ${response.status}`);
    }

    return await response.json();
    } catch (error) {
    clearTimeout(timeout);
    if (error instanceof Error && error.name === "AbortError") {
    throw new Error("Timeout na consulta de CPF");
    }
    throw error;
    }
}

// src/routes/consulta-cpf/+page.server.ts
import type { Actions, PageServerLoad } from "./$types";
import { fail } from "@sveltejs/kit";
import { consultarCPF } from "$lib/server/cpfhub";

export const load: PageServerLoad = async () => {
    return {
    titulo: "Consulta de CPF",
    descricao: "Informe o CPF para consultar os dados cadastrais."
    };
};

export const actions: Actions = {
    consultar: async ({ request }) => {
    const formData = await request.formData();
    const cpf = formData.get("cpf")?.toString() ?? "";

    // Validacao basica no servidor
    const cpfLimpo = cpf.replace(/\D/g, "");

    if (cpfLimpo.length !== 11) {
    return fail(400, {
    cpf,
    erro: "CPF invalido. Informe 11 digitos."
    });
    }

    try {
    const resultado = await consultarCPF(cpfLimpo);

    if (!resultado.success || !resultado.data) {
    return fail(404, {
    cpf,
    erro: "CPF nao encontrado na base de dados."
    });
    }

    return {
    cpf,
    sucesso: true,
    dados: {
    nome: resultado.data.name,
    genero: resultado.data.gender,
    dataNascimento: resultado.data.birthDate
    }
    };
    } catch (error) {
    const mensagem = error instanceof Error
    ? error.message
    : "Erro desconhecido";

    return fail(500, {
    cpf,
    erro: `Falha na consulta: ${mensagem}`
    });
    }
    }
};

<!-- src/routes/consulta-cpf/+page.svelte -->
<script lang="ts">
    import type { PageData, ActionData } from "./$types";
    import { enhance } from "$app/forms";

    export let data: PageData;
    export let form: ActionData;

    let carregando = false;

    function formatarCPF(valor: string): string {
    const digitos = valor.replace(/\D/g, "").slice(0, 11);
    if (digitos.length <= 3) return digitos;
    if (digitos.length <= 6) return `${digitos.slice(0, 3)}.${digitos.slice(3)}`;
    if (digitos.length <= 9)
    return `${digitos.slice(0, 3)}.${digitos.slice(3, 6)}.${digitos.slice(6)}`;
    return `${digitos.slice(0, 3)}.${digitos.slice(3, 6)}.${digitos.slice(6, 9)}-${digitos.slice(9)}`;
    }

    let cpfInput = form?.cpf ?? "";

    function handleInput(event: Event) {
    const target = event.target as HTMLInputElement;
    cpfInput = formatarCPF(target.value);
    target.value = cpfInput;
    }
</script>

<svelte:head>
    <title>{data.titulo}</title>
</svelte:head>

<main>
    <h2>{data.titulo}</h2>
    <p>{data.descricao}</p>

    <form
    method="POST"
    action="?/consultar"
    use:enhance={() => {
    carregando = true;
    return async ({ update }) => {
    carregando = false;
    await update();
    };
    }}
    >
    <label for="cpf">CPF:</label>
    <input
    id="cpf"
    name="cpf"
    type="text"
    value={cpfInput}
    on:input={handleInput}
    placeholder="000.000.000-00"
    maxlength="14"
    required
    />

    <button type="submit" disabled={carregando}>
    {carregando ? "Consultando..." : "Consultar CPF"}
    </button>
    </form>

    {#if form?.erro}
    <div class="erro" role="alert">
    <p>{form.erro}</p>
    </div>
    {/if}

    {#if form?.sucesso && form?.dados}
    <div class="resultado">
    <h3>Dados encontrados</h3>
    <dl>
    <dt>Nome</dt>
    <dd>{form.dados.nome}</dd>
    <dt>Genero</dt>
    <dd>{form.dados.genero === "M" ? "Masculino" : "Feminino"}</dd>
    <dt>Data de nascimento</dt>
    <dd>{form.dados.dataNascimento}</dd>
    </dl>
    </div>
    {/if}
</main>

// src/routes/consulta-cpf/schema.ts
import { z } from "zod";

export const cpfSchema = z.object({
    cpf: z
    .string()
    .transform((val) => val.replace(/\D/g, ""))
    .refine((val) => val.length === 11, "CPF deve ter 11 digitos")
    .refine((val) => !/^(\d)\1+$/.test(val), "CPF invalido")
});

// Dentro do form action
const parsed = cpfSchema.safeParse({ cpf });

if (!parsed.success) {
    return fail(400, {
    cpf,
    erro: parsed.error.errors[0].message
    });
}

const resultado = await consultarCPF(parsed.data.cpf);

const tentativas = new Map<string, { count: number; resetAt: number }>();

function verificarRateLimit(ip: string): boolean {
    const agora = Date.now();
    const registro = tentativas.get(ip);

    if (!registro || registro.resetAt < agora) {
    tentativas.set(ip, { count: 1, resetAt: agora + 60000 });
    return true;
    }

    if (registro.count >= 5) {
    return false;
    }

    registro.count++;
    return true;
}