Next.js SDK

npm install @gkcaptcha/next

# .env.local
GKCAPTCHA_SITE_KEY=pk_live_...
GKCAPTCHA_SECRET_KEY=sk_live_...
# Optional: override API URL (defaults to https://gkcaptcha.gatekeeper.sa)
# GKCAPTCHA_API_URL=https://gkcaptcha.gatekeeper.sa

// app/login/page.tsx
'use client'
import { GkCaptcha, useGkCaptcha } from '@gkcaptcha/next'
import { useState } from 'react'

export default function LoginPage() {
  const { ref, reset } = useGkCaptcha()
  const [token, setToken] = useState('')

  return (
    <form action={loginAction}>
      <GkCaptcha
        ref={ref}
        siteKey={process.env.NEXT_PUBLIC_GKCAPTCHA_SITE_KEY!}
        onVerify={setToken}
        onExpire={() => setToken('')}
      />
      <input type="hidden" name="captchaToken" value={token} />
      <button type="submit" disabled={!token}>Login</button>
    </form>
  )
}

// app/actions/login.ts
'use server'
import { verifyCaptchaToken } from '@gkcaptcha/next/server'

export async function loginAction(formData: FormData) {
  const token = formData.get('captchaToken') as string
  const result = await verifyCaptchaToken(token)

  if (!result.success) {
    return { error: 'CAPTCHA verification failed' }
  }

  // Proceed with login...
}

// app/api/auth/route.ts
import { verifyCaptchaToken } from '@gkcaptcha/next/server'

export async function POST(request: Request) {
  const body = await request.json()
  const result = await verifyCaptchaToken(body.captchaToken)

  if (!result.success) {
    return Response.json({ error: 'CAPTCHA failed' }, { status: 403 })
  }

  // Proceed...
}