BigBlocks

Bitcoin Signin

OAuth sign-in button via Sigma Identity with optional provider restore buttons for GitHub and Google

"use client"

import { BitcoinSignin } from "@/registry/bigblocks/blocks/bitcoin-signin"
import type { SigmaSignInFn } from "@/registry/bigblocks/blocks/bitcoin-signin/use-bitcoin-signin"

const mockSignIn: SigmaSignInFn = async (options) => {
  await new Promise((resolve) => setTimeout(resolve, 1500))
  console.log("[demo] signIn.sigma called with:", options)
}

export function BitcoinSigninDemo() {
  return (
    <div className="flex items-center justify-center">
      <BitcoinSignin
        clientId="demo-app"
        signIn={mockSignIn}
      />
    </div>
  )
}

With OAuth Providers

or restore with

"use client"

import { BitcoinSignin } from "@/registry/bigblocks/blocks/bitcoin-signin"
import type { SigmaSignInFn } from "@/registry/bigblocks/blocks/bitcoin-signin/use-bitcoin-signin"

const mockSignIn: SigmaSignInFn = async (options) => {
  await new Promise((resolve) => setTimeout(resolve, 1500))
  console.log("[demo] signIn.sigma called with:", options)
}

export function BitcoinSigninOAuthDemo() {
  return (
    <div className="flex items-center justify-center">
      <BitcoinSignin
        clientId="demo-app"
        signIn={mockSignIn}
        showProviders
        providers={["github", "google"]}
      />
    </div>
  )
}

Outline / Small

"use client"

import { BitcoinSignin } from "@/registry/bigblocks/blocks/bitcoin-signin"
import type { SigmaSignInFn } from "@/registry/bigblocks/blocks/bitcoin-signin/use-bitcoin-signin"

const mockSignIn: SigmaSignInFn = async (options) => {
  await new Promise((resolve) => setTimeout(resolve, 1500))
  console.log("[demo] signIn.sigma called with:", options)
}

export function BitcoinSigninOutlineDemo() {
  return (
    <div className="flex items-center justify-center">
      <BitcoinSignin
        clientId="demo-app"
        signIn={mockSignIn}
        variant="outline"
        size="sm"
      />
    </div>
  )
}

Ghost / Large

"use client"

import { BitcoinSignin } from "@/registry/bigblocks/blocks/bitcoin-signin"
import type { SigmaSignInFn } from "@/registry/bigblocks/blocks/bitcoin-signin/use-bitcoin-signin"

const mockSignIn: SigmaSignInFn = async (options) => {
  await new Promise((resolve) => setTimeout(resolve, 1500))
  console.log("[demo] signIn.sigma called with:", options)
}

export function BitcoinSigninGhostDemo() {
  return (
    <div className="flex items-center justify-center">
      <BitcoinSignin
        clientId="demo-app"
        signIn={mockSignIn}
        variant="ghost"
        size="lg"
      />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/bitcoin-signin.json

Usage

The block requires a signIn function that matches the shape of authClient.signIn.sigma() from a Better Auth client configured with the sigma plugin.

import { authClient } from "@/lib/auth-client"
import { BitcoinSignin } from "@/components/blocks/bitcoin-signin"
 
export default function LoginPage() {
  return (
    <BitcoinSignin
      clientId="my-app"
      signIn={(opts) => authClient.signIn.sigma(opts)}
      showProviders
      onError={(err) => console.error("Sign-in failed:", err)}
    />
  )
}

Variants

Default

A single "Sign in with Bitcoin" button using the sigma brand icon.

<BitcoinSignin clientId="my-app" signIn={signIn} />

With OAuth Providers

Shows OAuth provider buttons below the primary button for account restore/linking.

<BitcoinSignin
  clientId="my-app"
  signIn={signIn}
  showProviders
  providers={["github", "google"]}
/>

Size and Style Variants

<BitcoinSignin clientId="my-app" signIn={signIn} variant="outline" size="sm" />
<BitcoinSignin clientId="my-app" signIn={signIn} variant="ghost" size="lg" />

Props

BitcoinSignin

Prop	Type	Default	Description
`clientId`	`string`	—	OAuth client ID registered with Sigma Identity (required)
`signIn`	`SigmaSignInFn`	—	The `signIn.sigma` function from a Better Auth client (required)
`callbackUrl`	`string`	`window.location.origin + "/auth/sigma/callback"`	Callback URL after OAuth redirect
`showProviders`	`boolean`	`false`	Show OAuth provider buttons for account restore
`providers`	`OAuthProvider[]`	`["github", "google"]`	Which OAuth providers to show
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size variant
`className`	`string`	—	Additional CSS classes
`onError`	`(error: Error) => void`	—	Called when a sign-in error occurs

Hook

useBitcoinSignin can be used independently for a custom sign-in UI.

import { useBitcoinSignin } from "@/components/blocks/bitcoin-signin"
 
function CustomLogin() {
  const { isLoading, error, loginWithSigma, loginWithProvider } =
    useBitcoinSignin({
      clientId: "my-app",
      signIn: (opts) => authClient.signIn.sigma(opts),
    })
 
  return (
    <button onClick={loginWithSigma} disabled={isLoading}>
      {isLoading ? "Signing in..." : "Sign in"}
    </button>
  )
}

Bitcoin Avatar Buy Listing