Authentication

// components/CustomersList.tsx
import { useQuery } from "@tanstack/react-query";

async function fetchCustomers() {
  const res = await fetch("/api/customers"); // calls server-side route
  if (!res.ok) throw new Error("Failed to fetch customers");
  return res.json();
}

export default function CustomersList() {
  const { data, isLoading, isError, error } = useQuery(
    ["customers"],
    fetchCustomers
  );

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((c) => (
        <li key={c.id}>
          {c.email} — {c.name}
        </li>
      ))}
    </ul>
  );
}

// app/api/customers/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  const res = await fetch(
    "https://giant-goldfish-922.convex.site/api/customers",
    {
      headers: {
        Authorization: `Bearer ${process.env.CREDIBILL_SECRET_KEY}`,
        "Content-Type": "application/json",
      },
    }
  );

  const data = await res.json();
  return NextResponse.json(data);
}