bit-captcha-nextjs

Next.js helpers untuk BIT_CAPTCHA — pola BFF (Backend-for-Frontend): backend tetap di localhost / private network, Next.js proxy ke client.

Install

pnpm add bit-captcha-nextjs

Setup BFF (server-side proxy)

// app/api/captcha/challenge/route.ts
import { createChallengeProxy } from 'bit-captcha-nextjs/server'

export const GET = createChallengeProxy({
  baseURL: process.env.BIT_CAPTCHA_BASE_URL!, // http://localhost:8080
})

// app/api/captcha/verify/route.ts
import { createVerifyProxy } from 'bit-captcha-nextjs/server'

export const POST = createVerifyProxy({
  baseURL: process.env.BIT_CAPTCHA_BASE_URL!,
})

Set di .env.local:

BIT_CAPTCHA_BASE_URL=http://localhost:8080
NEXT_PUBLIC_BIT_CAPTCHA_BASE_URL=/api/captcha

BIT_CAPTCHA_BASE_URL (server) → backend asli. NEXT_PUBLIC_BIT_CAPTCHA_BASE_URL (client) → BFF route Next.

Client component (modal)

// app/login/login-form.tsx
'use client'

import { CaptchaProvider, BitCaptchaModal } from 'bit-captcha-nextjs/client'
import 'bit-captcha-nextjs/styles.css'

export function LoginForm() {
  return (
    <CaptchaProvider
      baseURL={process.env.NEXT_PUBLIC_BIT_CAPTCHA_BASE_URL}
      pathPrefix="" // BFF route sudah include path
    >
      <BitCaptchaModal onVerify={(token) => login(token)}>
        {(open) => <button onClick={open}>Login</button>}
      </BitCaptchaModal>
    </CaptchaProvider>
  )
}

Server-side verify (opsional)

Kalau Next yang handle login (BFF login pattern):

// app/api/login/route.ts
import { verifyVerifiedTokenServerSide } from 'bit-captcha-nextjs/server'

export async function POST(req: Request) {
  const { nip, password, captcha_token } = await req.json()

  const r = await verifyVerifiedTokenServerSide(
    captcha_token,
    { baseURL: process.env.BIT_CAPTCHA_BASE_URL! },
    { mode: 'local', secret: process.env.CAPTCHA_SECRET! },
  )
  if (!r.valid) return Response.json({ error: r.error }, { status: 401 })

  // … forward login ke backend
}

Mode:

| Mode | Cara kerja | Kapan dipakai | | --- | --- | --- | | local | Verify HMAC pakai shared secret di Next | Next sebagai BFF login | | remote | Forward verify ke backend | Backend handle auth |

Path override via env

Semua URL bisa override via env. Tidak ada hardcode.

| Env | Scope | Default | | --- | --- | --- | | BIT_CAPTCHA_BASE_URL | Server | wajib | | NEXT_PUBLIC_BIT_CAPTCHA_BASE_URL | Client | wajib (atau set via prop) | | CAPTCHA_SECRET | Server (local mode) | wajib kalau pakai local mode |

License

MIT