Como consumir API de CPF em Capacitor para apps híbridos

// capacitor.config.ts
import type { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
    appId: "io.cpfhub.app",
    appName: "CPF Validator",
    webDir: "dist",
    server: {
    androidScheme: "https",
    cleartext: false,
    },
};

export default config;

// src/services/cpfhub.ts

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

interface CpfResponse {
    success: boolean;
    data: CpfData;
}

interface CpfError {
    message: string;
    statusCode: number;
}

const CPFHUB_CONFIG = {
    baseUrl: "https://api.cpfhub.io",
    timeout: 5000,
};

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

    if (cpfLimpo.length !== 11) {
    throw { message: "CPF deve conter exatamente 11 dígitos", statusCode: 400 } as CpfError;
    }

    const url = `${CPFHUB_CONFIG.baseUrl}/cpf/${cpfLimpo}`;
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), CPFHUB_CONFIG.timeout);

    try {
    const response = await fetch(url, {
    method: "GET",
    headers: {
    "x-api-key": apiKey,
    Accept: "application/json",
    },
    signal: controller.signal,
    });

    clearTimeout(timeoutId);

    if (response.ok) {
    const data: CpfResponse = await response.json();
    if (data.success) {
    return data.data;
    }
    throw { message: "Resposta inesperada da API", statusCode: 500 } as CpfError;
    }

    const errorMap: Record<number, string> = {
    400: "CPF com formato inválido",
    401: "Chave de API inválida ou ausente",
    404: "CPF não encontrado na base de dados",
    };

    throw {
    message: errorMap[response.status] || `Erro HTTP ${response.status}`,
    statusCode: response.status,
    } as CpfError;
    } catch (error: any) {
    clearTimeout(timeoutId);

    if (error.name === "AbortError") {
    throw { message: "Timeout na consulta", statusCode: 504 } as CpfError;
    }
    if (error.statusCode) {
    throw error;
    }
    throw { message: `Erro de conexão: ${error.message}`, statusCode: 502 } as CpfError;
    }
}

npm install @capacitor/preferences

// src/services/config.ts
import { Preferences } from "@capacitor/preferences";

const API_KEY_STORAGE = "cpfhub_api_key";

export async function salvarApiKey(apiKey: string): Promise<void> {
    await Preferences.set({
    key: API_KEY_STORAGE,
    value: apiKey,
    });
}

export async function obterApiKey(): Promise<string | null> {
    const { value } = await Preferences.get({ key: API_KEY_STORAGE });
    return value;
}

export async function removerApiKey(): Promise<void> {
    await Preferences.remove({ key: API_KEY_STORAGE });
}

// src/components/cpf-consulta.ts
import { consultarCpf } from "../services/cpfhub";
import { obterApiKey } from "../services/config";

export async function inicializarConsulta(): Promise<void> {
    const form = document.getElementById("cpf-form") as HTMLFormElement;
    const input = document.getElementById("cpf-input") as HTMLInputElement;
    const resultado = document.getElementById("resultado") as HTMLDivElement;
    const btnConsultar = document.getElementById("btn-consultar") as HTMLButtonElement;

    form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const cpf = input.value.trim();
    if (!cpf) {
    resultado.innerHTML = '<p class="erro">Digite um CPF valido.</p>';
    return;
    }

    btnConsultar.disabled = true;
    resultado.innerHTML = "<p>Consultando...</p>";

    try {
    const apiKey = await obterApiKey();
    if (!apiKey) {
    resultado.innerHTML = '<p class="erro">Chave de API nao configurada.</p>';
    return;
    }

    const dados = await consultarCpf(cpf, apiKey);
    resultado.innerHTML = `
    <div class="sucesso">
    <h3>CPF Encontrado</h3>
    <p><strong>Nome:</strong> ${dados.name}</p>
    <p><strong>CPF:</strong> ${dados.cpf}</p>
    <p><strong>Genero:</strong> ${dados.gender}</p>
    <p><strong>Nascimento:</strong> ${dados.birthDate}</p>
    </div>
    `;
    } catch (error: any) {
    resultado.innerHTML = `<p class="erro">${error.message}</p>`;
    } finally {
    btnConsultar.disabled = false;
    }
    });
}

npm install @capacitor/network

// src/services/network.ts
import { Network } from "@capacitor/network";

export async function verificarConexao(): Promise<boolean> {
    const status = await Network.getStatus();
    return status.connected;
}

export function monitorarConexao(
    callback: (conectado: boolean) => void
): void {
    Network.addListener("networkStatusChange", (status) => {
    callback(status.connected);
    });
}

// Uso na consulta
import { verificarConexao } from "../services/network";

async function consultarComVerificacao(cpf: string, apiKey: string) {
    const conectado = await verificarConexao();
    if (!conectado) {
    throw { message: "Sem conexão com a internet", statusCode: 0 };
    }
    return consultarCpf(cpf, apiKey);
}

// src/utils/cpf-mask.ts
export function aplicarMascaraCpf(valor: string): string {
    const numeros = valor.replace(/\D/g, "").slice(0, 11);

    if (numeros.length <= 3) return numeros;
    if (numeros.length <= 6) return `${numeros.slice(0, 3)}.${numeros.slice(3)}`;
    if (numeros.length <= 9) return `${numeros.slice(0, 3)}.${numeros.slice(3, 6)}.${numeros.slice(6)}`;
    return `${numeros.slice(0, 3)}.${numeros.slice(3, 6)}.${numeros.slice(6, 9)}-${numeros.slice(9)}`;
}

// Aplicar no input
const cpfInput = document.getElementById("cpf-input") as HTMLInputElement;
cpfInput.addEventListener("input", (e) => {
    const target = e.target as HTMLInputElement;
    target.value = aplicarMascaraCpf(target.value);
});