Pahami halaman konfirmasi donasi: owner lewat RLS, guest lewat token hash dan RPC, 404 untuk akses tidak sah, noindex, force-dynamic, dan state form yang jujur.
Setelah donasi berhasil disimpan, user tidak cukup diberi pesan “sukses”. Ia butuh halaman konfirmasi: nomor donasi, program, nominal, status, dan metode pembayaran.
Tapi halaman konfirmasi membawa risiko. Data donasi tidak boleh bisa ditebak dari URL lalu dibuka orang lain.
Di starter, route-nya:
textsrc/app/donation/confirmation/[donationNumber]/page.tsxDan redirect dari form terjadi di:
textsrc/components/donation/donation-form.tsxDi form, setelah server action mengembalikan status success, komponen melakukan redirect:
tsxuseEffect(() => {
if (state.status === 'success') {
router.push(`/donation/confirmation/${state.donationNumber}?token=${state.lookupToken}`);
}
}, [state, router]);Jadi URL konfirmasi membawa dua hal:
donationNumber di path;token di query string.Nomor donasi boleh terlihat oleh donatur. Token tidak boleh dibagikan sembarangan, karena ia menjadi bukti akses untuk guest.
Di confirmation page ada:
tsexport const metadata: Metadata = {
robots: { index: false, follow: false },
};
export const dynamic = 'force-dynamic';noindex mencegah halaman privat masuk indeks mesin pencari. force-dynamic mencegah halaman yang statusnya bisa berubah diperlakukan seperti konten statis.
Status donasi bisa berubah dari pending ke verified atau rejected. Karena itu halaman konfirmasi tidak boleh mengandalkan cache statis yang menampilkan status lama.
Confirmation page membaca user dulu:
tsconst supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();Setelah itu ada dua jalur.
Kalau user login, query normal ke donations:
tsconst { data } = await supabase
.from('donations')
.select(`
donation_number, amount, status, is_anonymous,
donor_name_snapshot, donor_email_snapshot, payment_method, created_at,
campaigns (title)
`)
.eq('donation_number', donationNumber)
.eq('user_id', user.id)
.maybeSingle<DonationRow>();Filter user_id = user.id penting. Login saja tidak cukup. User harus pemilik donasi.
RLS di migration juga mendukung ini dengan policy “Donor reads own donations”. Jadi ada dua lapis: query filter dan RLS.
Kalau tidak login tapi ada token:
tsconst { data } = await supabase.rpc('get_donation_by_lookup', {
p_token_hash: hashLookupToken(token),
});Guest tidak diberi policy SELECT langsung ke tabel donations. Aksesnya lewat function get_donation_by_lookup, dengan token yang di-hash dulu.
Kenapa hash? Karena database menyimpan lookup_token_hash, bukan token mentah. Kalau database bocor, token asli tidak otomatis ikut bocor.
Function lookup juga hanya mengembalikan kolom yang dibutuhkan halaman konfirmasi, bukan semua data sensitif.
Kalau tidak login dan tidak membawa token:
tsnotFound();Kalau query tidak menemukan donasi:
tsif (!donation) notFound();404 di sini bukan hanya “data tidak ada”. 404 juga dipakai untuk menolak akses tanpa memberi tahu apakah nomor donasi itu valid. Ini mencegah orang menebak nomor donasi lalu mendapat petunjuk bahwa data tersebut ada.
Form juga harus jujur ketika submit berjalan atau gagal.
Tombol submit:
tsx<button type="submit" disabled={pending}>
{pending ? 'Memproses...' : 'Lanjutkan donasi'}
</button>Error umum:
tsx{state.status === 'error' && (
<p role="alert" className="text-sm text-red-600">
{state.message}
</p>
)}Error field:
tsx{state.status === 'validation_error' && state.fieldErrors.amount && (
<p className="mt-1 text-sm text-red-600">{state.fieldErrors.amount[0]}</p>
)}State yang jujur membuat user tahu apakah sistem sedang memproses, inputnya salah, atau terjadi error umum. Jangan menampilkan “sukses” kalau insert gagal.
textMulai dari AGENTS.md, DESIGN.md, dan docs/README.md.
Tugas analisis dan skenario uji, jangan mengubah kode.
Baca:
- src/components/donation/donation-form.tsx
- src/app/donation/confirmation/[donationNumber]/page.tsx
- supabase/migrations/20260829_vertical_slice.sql
Jelaskan:
1. bagaimana form redirect ke halaman konfirmasi saat state success,
2. kenapa URL membawa donationNumber dan token,
3. jalur akses user login: query apa dan filter user_id apa yang dipakai,
4. jalur akses guest: RPC apa yang dipanggil dan kenapa token di-hash,
5. kenapa tanpa token/tanpa login harus notFound(),
6. bagaimana pending, validation_error, error, dan success ditampilkan di form,
7. skenario uji untuk token sah, token salah, tanpa token, dan bukan pemilik.
Untuk tiap klaim penting, kutip kode atau migration yang relevan.Prompt ini mengarahkan agent untuk membaca akses data, bukan hanya memuji UI konfirmasi.
Cek kode:
bashgrep -n "robots\|force-dynamic\|get_donation_by_lookup\|hashLookupToken\|user_id\|notFound" "src/app/donation/confirmation/[donationNumber]/page.tsx"
grep -n "useActionState\|pending\|router.push\|role=\"alert\"" src/components/donation/donation-form.tsx
grep -n "get_donation_by_lookup\|lookup_token_hash\|grant execute" supabase/migrations/20260829_vertical_slice.sqlYang kamu cari:
user_id;notFound();Lalu uji flow:
Memproses... saat pending;donationNumber dan token;Kalau punya dua akun, uji user A dan user B. User B tidak boleh melihat donasi user A hanya karena tahu nomor donasinya.
Halaman konfirmasi adalah halaman privat, walaupun URL-nya bisa dibuka di browser.
Akses yang sehat punya pola:
textowner login → query dengan user_id + RLS
guest token → RPC dengan hash lookup
tidak punya akses → 404Jangan membuka SELECT anon ke seluruh tabel donasi hanya demi membuat guest confirmation bekerja. Itu terlalu luas. Buka akses selebar kebutuhan, bukan selebar kemudahan.
Di sini mulai terasa bedanya fitur yang “jalan” dengan fitur yang bisa dipercaya. Konfirmasi donasi bukan cuma halaman sukses; ia adalah pintu data privat. Kalau pintunya terlalu lebar, donasi orang bisa terintip. Kalau terlalu sempit, guest tidak bisa melihat statusnya sendiri. Keseimbangan itu yang sedang kamu latih.
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
Ajukan pertanyaan, beri solusi, atau diskusikan materi pelajaran ini.
Belum ada komentar untuk pelajaran ini.
Jadilah yang pertama memulai diskusi atau mengajukan pertanyaan!