@crypto-signerkit/react

React SDK for SignerKit — embedded custodial wallets (EVM + Solana) with email login. Privy-compatible hooks and a built-in login modal (Privy-style layout; fully brandable copy).

Install

npm i @crypto-signerkit/react

Peer deps: react and react-dom ≥ 18.

Quick start

import { SignerKitProvider, useSignerKit, LoginButton, UserPill } from '@crypto-signerkit/react'

<SignerKitProvider
  config={{
    apiUrl: 'https://api.signerkit.com',
    appId: 'pk_...',
    appearance: {
      theme: 'dark',               // default; use 'light' for white Privy card
      accentColor: '#818CF8',       // focus ring on the capsule input
      logo: 'https://yoursite.com/logo.svg', // optional; also used in footer if set
      copy: {
        emailTitle: 'Log in or sign up',
        emailPlaceholder: '[email protected]',
        submitEmail: 'Submit',
        codeTitle: 'Enter confirmation code',
        codeSubtitle: 'We sent a code to {email}',
        submitCode: 'Submit',
        loginButton: 'Log in',
        logout: 'Log out',
        footerProtectedBy: 'Protected by',
        footerBrand: 'YourBrand',   // or '' to hide wordmark
      },
    },
  }}
>
  <App />
</SignerKitProvider>

function App() {
  const { ready, authenticated, user, login, logout } = useSignerKit()
  if (!ready) return null
  if (!authenticated) return <button onClick={login}>Log in</button>
  return <div>Hi {user?.email} <button onClick={() => logout()}>Out</button></div>
}

Modal layout (Privy-like)

• Light rounded card, centered title
• Single capsule row: mail icon · email input · Submit (inline)
• Code step same pattern; 6-digit auto-submit
• Footer: Protected by · brand
• All strings overridable via appearance.copy (import DEFAULT_COPY for a full template)

appearance.copy keys

| Key | Default | |-----|---------| | emailTitle | Log in or sign up | | emailPlaceholder | [email protected] | | submitEmail / submitEmailLoading | Submit / … | | codeTitle | Enter confirmation code | | codeSubtitle | We sent a code to {email} | | codePlaceholder | 123456 | | submitCode / submitCodeLoading | Submit / … | | resend / backToEmail | Resend code / Use a different email | | errorSendCode / errorInvalidCode | … | | loginButton / logout | Log in / Log out | | footerProtectedBy / footerBrand | Protected by / SignerKit |

Headless hooks

const { sendCode, loginWithCode } = useLoginWithEmail()
await sendCode('[email protected]')
await loginWithCode('[email protected]', '123456')

Get your App ID: dashboard. Docs: https://signerkit.com.

License

MIT