Integrate with Next.js

import { NextResponse } from "next/server";
import { signUpload } from "@/lib/upload-token";
import { auth } from "@/lib/auth"; // whatever this app already uses

export async function POST() {
  const session = await auth();
  if (!session) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const signed = await signUpload(
    process.env.NEXT_PUBLIC_OPENINARY_URL!,
    process.env.OPENINARY_API_KEY!,
    {
      expiresIn: 300,
      // Derived from the session, never from the request body.
      folder: `users/${session.user.id}`,
    },
  );

  return NextResponse.json(signed);
}

"use client";

import { useState } from "react";
import { FileUploader } from "@/components/openinary/file-uploader";

export function Uploader() {
  const [image, setImage] = useState<string | null>(null);

  return (
    <>
      <FileUploader
        maxFiles={10}
        sign={async () => {
          const res = await fetch("/api/upload-token", { method: "POST" });
          if (!res.ok) throw new Error("Could not sign upload");
          return res.json();
        }}
        onSuccess={(files) => {
          // Persist files[0].path. files[0].url is the delivery path,
          // with no transformation segment in it.
          setImage(
            `${process.env.NEXT_PUBLIC_OPENINARY_URL}${files[0].url}`,
          );
        }}
      />

      {image && <img alt="Uploaded" src={image} />}
    </>
  );
}