Next.js Integration

# 1. .npmrc in your project root: @abrova packages come from Abrova Center
@abrova:registry=https://center.abrova.ir/api/packages/abrova/npm/

# 2. Install
npm install @abrova/storage-node @abrova/storage-web

// lib/storage.ts — shared server instance (never import this from a client component)
import { AbrovaStorage } from '@abrova/storage-node';

export const storage = new AbrovaStorage({
  apiKey: process.env.ABROVA_API_KEY!,
  serverSecret: process.env.ABROVA_SERVER_SECRET!,
});

// app/api/upload/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { storage } from '@/lib/storage';
import { getServerSession } from 'next-auth';

export async function POST(req: NextRequest) {
  const session = await getServerSession();
  if (!session?.user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const formData = await req.formData();
  const file = formData.get('file') as File;
  const buffer = Buffer.from(await file.arrayBuffer());

  const uploaded = await storage.upload(
    'user-uploads',
    `users/${session.user.id}/${file.name}`,
    buffer,
    { contentType: file.type }
  );

  return NextResponse.json({ fileId: uploaded.id });
}

// app/api/files/[id]/route.ts — signed download URL (no headers needed, usable in <img>)
export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
  const session = await getServerSession();
  if (!session?.user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  // Check here that this user may see this file
  const signedUrl = await storage.getSignedUrl(params.id, { expiresIn: 3600 });
  return NextResponse.json({ url: signedUrl });
}

// components/ProductImage.tsx (a server component)
import { storage } from '@/lib/storage';

export async function ProductImage({ fileId }: { fileId: string }) {
  const src = await storage.getPublicUrl(fileId, { width: 600, format: 'webp' });
  return <img src={src} width={600} alt="" />;
}

// app/api/abrova-token/route.ts
import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth';
import { storage } from '@/lib/storage';

export async function POST() {
  const session = await getServerSession();
  if (!session?.user?.id) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  const { token, expiresAt } = await storage.createUserToken(session.user.id);
  return NextResponse.json({ token, expiresAt });
}

'use client';
import { useEffect, useState } from 'react';
import { AbrovaStorage } from '@abrova/storage-web';
import { useSession } from 'next-auth/react';

const storage = new AbrovaStorage({
  apiKey: process.env.NEXT_PUBLIC_ABROVA_API_KEY!,
  tokenProvider: async () => {
    const res = await fetch('/api/abrova-token', { method: 'POST' });
    return res.ok ? (await res.json()).token : null; // null = no one signed in: file calls wait
  },
});

export function UploadButton() {
  const { data: session } = useSession();
  const [progress, setProgress] = useState(0);

  // Ask the provider again when the user signs in or out
  useEffect(() => {
    storage.refreshUserToken();
  }, [session?.user?.id]);

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !session?.user?.id) return;

    const uploaded = await storage.upload('my-bucket', `users/${session.user.id}/${file.name}`, file, {
      onProgress: ({ bytesSent, totalBytes }) => setProgress(bytesSent / totalBytes),
    });
    console.log('Uploaded:', uploaded.id);
  };

  return (
    <>
      <input type="file" onChange={handleUpload} />
      <progress value={progress} max={1} />
    </>
  );
}

// Private files: getTransformUrl() / getUrl() need headers, so ask your server for signed links
export function ImageGallery({ fileIds }: { fileIds: string[] }) {
  const [urls, setUrls] = useState<Record<string, string>>({});

  useEffect(() => {
    Promise.all(
      fileIds.map(async (id) => {
        const { url } = await fetch(`/api/files/${id}`).then((r) => r.json());
        return [id, url] as const;
      }),
    ).then((pairs) => setUrls(Object.fromEntries(pairs)));
  }, [fileIds]);

  return (
    <div className="grid grid-cols-3 gap-4">
      {fileIds.map((id) => urls[id] && <img key={id} src={urls[id]} alt="" />)}
    </div>
  );
}