Panduan pemula • Tanpa terminal / CLI

Payment-Based Login
untuk Lynk.id + Firebase

Satu pembelian produk Lynk yang berhasil memberikan satu akun akses ke seluruh web app. Login menggunakan email dan password. Panduan ini menggunakan dashboard browser, GitHub web, dan Vercel.

React / ViteFirebase AuthFirestoreVercel FunctionsNo CLI

1. Arsitektur paling sederhana

LYNK.IDPembeli menyelesaikan pembayaran produk apa pun yang memenuhi syarat

↓ payment.received

VERCEL FUNCTIONMenerima webhook, memverifikasi signature, memastikan status transaksi berhasil

↓

FIRESTOREMenyimpan email pembeli yang sudah diverifikasi dan catatan transaksi

↓

FIREBASE AUTHPembeli membuat akun email + password, lalu login

↓

VERCEL FUNCTION — CEK AKSESMemeriksa token login dan status pembelian di server

↓

WEB APP KNIACONNECTAkses seluruh fitur jika pembelian valid

Aturan produk: karena pilihanmu adalah akses ke seluruh web app, semua produk Lynk yang dinyatakan eligible dapat memberi akses yang sama. UUID produk tetap dicatat untuk audit, tetapi tidak perlu membuat pemetaan akses per produk.

Catatan teknis: akun Firebase Auth dan hak akses adalah dua hal berbeda. User mungkin sudah berhasil autentikasi, tetapi aplikasi dan data tetap harus menolak akses jika status pembeliannya tidak valid.

2. Cara kerja bagi pembeli

Kondisi	Hasil yang diharapkan
Belum membeli	Tidak mendapat akses member.
Sudah membayar	Email masuk daftar pembeli yang memenuhi syarat.
Pembeli pertama kali	Mendaftar dengan email yang sama seperti di Lynk dan membuat password.
Sudah punya akun	Login dengan email dan password yang sama.
Membeli produk lain	Tetap memakai akun yang sama; tidak perlu akun baru.

Catatan penting: untuk versi awal, setiap pembayaran valid memberikan akses universal. Jika kelak ingin akses berbeda per produk, sistem dapat dikembangkan dengan product mapping.

3. Siapkan Firebase lewat browser

A. Buat project

Buka Firebase Console, login dengan akun Google, lalu pilih Create a project.
Beri nama misalnya kniaconnect-member. Google Analytics boleh dimatikan untuk tahap awal.
Setelah project dibuat, pilih ikon Web (</>) di halaman Project Overview. Beri nickname, misalnya KniaConnect Web, lalu Register app.
Simpan Firebase web config yang ditampilkan. Config web bukan password admin; keamanan data tetap harus menggunakan Security Rules.

B. Aktifkan Email/Password

Menu Build → Authentication, lalu Get started.
Buka tab Sign-in method / Providers.
Pilih Email/Password, aktifkan, lalu Save.

C. Buat Firestore

Menu Build → Firestore Database → Create database.
Pilih database (default) dan lokasi yang dekat dengan pengguna. Untuk Indonesia, pertimbangkan region Jakarta jika tersedia. Lokasi database sulit diubah setelah dibuat.
Pilih Production mode. Jangan gunakan test mode untuk data pembeli.

Jangan mengaktifkan akses baca/tulis publik. Firestore harus dimulai dengan aturan tertutup, lalu hanya membuka data yang memang boleh diakses member.

Panduan resmi Firebase Web Panduan resmi Email/Password

4. Siapkan file project tanpa CLI

Vercel akan membaca kode dari GitHub. Kamu bisa mengunggah file lewat website GitHub, tanpa membuka terminal.

Buka GitHub.com dan buat akun atau login.
Pilih New repository. Buat repository baru, misalnya kniaconnect-member-app. Jika kode web app sudah ada, gunakan repository yang memang berisi project React/Vite tersebut.
Masuk ke repository, pilih Add file → Upload files untuk mengunggah file project. Untuk membuat file satu per satu, pilih Add file → Create new file.
Pastikan struktur project React/Vite dan file package.json ikut terunggah. Jangan mengunggah folder node_modules, file rahasia, atau service-account JSON ke repository.
Untuk fungsi backend Vercel, file endpoint nantinya berada di folder api pada root repository. Contoh: api/lynk-webhook.js dan api/check-access.js.

Jika belum punya source code web app: jangan lanjut ke deployment dulu. GitHub menyimpan kode, bukan membuat aplikasi secara otomatis. Siapkan project React/Vite terlebih dahulu atau minta AI coding assistant membuat file project yang siap diunggah.

5. Hubungkan GitHub ke Vercel

Buka Vercel.com dan daftar/login.
Pilih Add New → Project.
Hubungkan akun GitHub jika diminta, lalu pilih repository web app.
Periksa Framework Preset: pilih Vite jika project memakai React + Vite. Build command dan output directory biasanya terdeteksi otomatis: npm run build dan dist.
Klik Deploy. Vercel akan membangun project dan memberikan alamat preview.
Setiap perubahan yang di-commit ke repository GitHub yang terhubung akan memicu deployment baru.

Vercel Functions dijalankan dari file dalam folder /api di root project. Fungsi ini yang akan menerima webhook Lynk dan memeriksa akses di server.

Dokumentasi deployment Vercel Dokumentasi Vercel Functions

6. Struktur data dan keamanan

Struktur sederhana yang disarankan:

Firestore
├── paidEmails
│   └── {emailHash}
│       ├── active: true
│       ├── email: "pembeli@example.com"
│       └── lastPaymentAt: timestamp
├── purchases
│   └── {messageId}
│       ├── emailHash: "..."
│       ├── refId: "..."
│       ├── productUuids: [...]
│       └── status: "paid"
└── members
    └── {firebaseAuthUid}
        ├── email: "pembeli@example.com"
        └── access: true

Kenapa tiga koleksi? paidEmails menjadi bukti email yang dibayar; purchases mencegah satu webhook diproses berulang; members menjadi status akses berdasarkan UID Firebase setelah pembeli membuat akun.

Secret LynkSimpan sebagai environment variable Vercel. Jangan masukkan ke React atau GitHub.

Service account FirebaseHanya untuk backend. Jangan unggah file JSON private key ke repository atau frontend.

Firestore RulesHanya UID yang memiliki status akses aktif boleh membaca konten member.

Webhook duplikatGunakan message_id sebagai kunci idempotensi agar event yang dikirim ulang tidak menggandakan proses.

Environment variables di Vercel

Buka project Vercel → Settings → Environment Variables.
Tambahkan secret yang dibutuhkan backend, misalnya LYNK_SECRET_KEY dan kredensial Firebase Admin yang disimpan secara aman.
Pilih environment Production (dan Preview jika memang diperlukan).
Simpan, lalu lakukan deployment ulang agar fungsi menggunakan nilai terbaru.

Jangan pernah menaruh secret key Lynk, Firebase Admin private key, atau token admin dalam variabel frontend berawalan VITE_. Variabel Vite yang diekspos ke browser bukan tempat menyimpan rahasia.

Firestore Security Rules Firebase Admin SDK Vercel Environment Variables

7. Hubungkan webhook Lynk.id

Endpoint webhook akan berbentuk seperti:

https://NAMA-PROJECT.vercel.app/api/lynk-webhook

Deploy fungsi api/lynk-webhook.js melalui repository GitHub ke Vercel.
Salin URL fungsi dari domain deployment Vercel.
Masuk ke pengaturan Webhooks Lynk.id dan tempel URL tersebut.
Aktifkan event pembayaran yang sesuai, yaitu payment.received jika itu event yang tersedia di akun/dokumentasi Lynk.
Lakukan transaksi uji yang sah, lalu periksa log fungsi Vercel dan data Firestore.

Aturan backend untuk memberikan akses

Terima hanya HTTP POST yang sesuai.
Validasi signature sesuai dokumentasi Lynk sebelum mempercayai payload.
Pastikan event adalah payment.received dan status transaksi menunjukkan sukses sesuai definisi Lynk.
Ambil email dari data.message_data.customer.email, normalkan dengan trim dan lowercase.
Catat data.message_id untuk mencegah pemrosesan ganda.
Simpan UUID item untuk catatan; pada kebijakan akses universal, produk mana pun yang eligible memberi akses ke seluruh aplikasi.
Jika akun Firebase untuk email itu sudah ada, sinkronkan status member. Jika belum, simpan email pembeli; saat pembeli mendaftar dengan email yang sama, backend memeriksa daftar pembeli lalu mengaktifkan UID tersebut.

Belum boleh coding signature final: contoh fungsi yang diberikan Lynk menghitung SHA-256 dari amount + ref_id + message_id + secret_key, tetapi payload contoh belum menunjukkan signature dan sumber pasti nilai amount belum terkonfirmasi. Jangan menebak apakah amount adalah grandTotal, totalPrice, atau nilai lain; periksa definisi resmi/header request Lynk lebih dahulu.

Refund dan pembatalan: payload yang tersedia hanya menunjukkan pembayaran diterima. Sebelum produksi, cari tahu apakah Lynk mengirim event refund, chargeback, atau pembatalan. Tanpa event tersebut, akses yang pernah aktif tidak otomatis dicabut ketika terjadi refund.

9. Urutan pengerjaan yang disarankan

Hari 1 — FirebaseBuat project, aktifkan Email/Password, buat Firestore.

Hari 2 — RepositoryUnggah project React/Vite lewat GitHub web.

Hari 3 — VercelImport repository, deploy, siapkan environment variables.

Hari 4 — BackendBuat webhook receiver dan pemeriksaan akses.

Hari 5 — Login gateHubungkan signup/login dengan status pembeli.

Hari 6 — TestingUji pembeli, non-pembeli, webhook duplikat, dan kasus gagal.

10. Catatan biaya dan batasan

Firebase Authentication dan Firestore memiliki kuota/harga sesuai paket dan pemakaian. Periksa harga terbaru sebelum aplikasi digunakan publik.
Vercel memiliki batas penggunaan sesuai paket. Periksa batas Functions pada paket yang dipilih.
Firebase Admin SDK di Vercel memerlukan kredensial server yang disimpan sebagai secret. Ini langkah teknis yang perlu dilakukan hati-hati.
Panduan ini sengaja tidak memakai CLI. Namun, pengunggahan file, konfigurasi dashboard, dan pemasangan kode backend tetap diperlukan.

1. Arsitektur paling sederhana

2. Cara kerja bagi pembeli

3. Siapkan Firebase lewat browser

A. Buat project

B. Aktifkan Email/Password

C. Buat Firestore

4. Siapkan file project tanpa CLI

5. Hubungkan GitHub ke Vercel

6. Struktur data dan keamanan

Environment variables di Vercel

7. Hubungkan webhook Lynk.id

Aturan backend untuk memberikan akses

8. Checklist sebelum digunakan pembeli

9. Urutan pengerjaan yang disarankan

10. Catatan biaya dan batasan