@huatek/ghostkey-react

React and Next.js bindings for GhostKey Auth.

This package provides GhostKeyProvider, hooks for registration/login/device management, step-up authentication helpers and a ready-to-use user security center component.

Install

npm install @huatek/ghostkey-react @huatek/ghostkey-client

Usage

"use client";

import {
  GhostKeyProvider,
  GhostKeySecurityCenter,
  useGhostKeyLogin,
  useGhostKeyRegisterDevice
} from "@huatek/ghostkey-react";

function AuthPanel({ userId, email }: { userId: string; email: string }) {
  const login = useGhostKeyLogin();
  const registerDevice = useGhostKeyRegisterDevice();

  return (
    <>
      <button onClick={() => registerDevice.start({ userId, name: "My device" })}>
        Register passkey
      </button>
      <button onClick={() => login.start({ userId, email, registerIfNoPasskey: true })}>
        Login with passkey
      </button>
      <GhostKeySecurityCenter userId={userId} />
    </>
  );
}

export function App() {
  return (
    <GhostKeyProvider apiBaseUrl="/api/auth">
      <AuthPanel userId="gku_123" email="[email protected]" />
    </GhostKeyProvider>
  );
}

Exports

• GhostKeyProvider
• useGhostKey()
• useGhostKeyLogin()
• useGhostKeyRegisterDevice()
• useGhostKeyDevices()
• useGhostKeyStepUp()
• useGhostKeySecurityOverview()
• GhostKeySecurityCenter

Notes

• Components using passkeys must run on the client.
• Your app still owns the API routes.
• GhostKeySecurityCenter expects /security/overview to be implemented by your backend.
• useGhostKeyLogin() can register the first passkey during login when registerIfNoPasskey is enabled.
• useGhostKeyRegisterDevice() supports useMagicLinkFallback for browsers that fail passkey creation.