AuthButton

BitcoinAuthProvider

authuionboarding

Authentication button that integrates with Bitcoin authentication flows and providers.

AuthButton extends the Radix Button primitive with Bitcoin-specific authentication modes and seamless integration with BitcoinAuthProvider.

Installation

npx bigblocks add auth-button

Import

import { AuthButton } from 'bigblocks';

API Reference

This component extends the Button primitive and inherits all its props.

Prop	Type	Default	Description
mode	`'signin' \| 'signup'`	`'signin'`	Authentication mode - determines flow behavior
size	`Responsive<"1" \| "2" \| "3" \| "4">`	`"2"`	Button size
variant	`"classic" \| "solid" \| "soft" \| "surface" \| "outline" \| "ghost"`	`"solid"`	Button variant style
color	Radix color	-	Color theme
className	`string`	-	Additional CSS classes
style	`React.CSSProperties`	-	Inline styles
children	`React.ReactNode`	-	Button content

Basic Usage

import { AuthButton } from 'bigblocks';

export default function SignInPage() {
  return (
    <AuthButton mode="signin">
      Sign In with Bitcoin
    </AuthButton>
  );
}

Authentication Modes

AuthButton automatically handles different authentication flows based on the mode prop:

// Sign-in mode - triggers existing user authentication
<AuthButton mode="signin">
  Sign In
</AuthButton>

// Sign-up mode - triggers new user registration flow  
<AuthButton mode="signup" variant="soft">
  Create Account
</AuthButton>

Integration with Auth Provider

AuthButton automatically integrates with BitcoinAuthProvider context:

import { AuthButton, BitcoinAuthProvider } from 'bigblocks';

export default function App() {
  return (
    <BitcoinAuthProvider apiUrl="/api/auth">
      <header>
        <AuthButton mode="signin" size="2" variant="outline">
          Connect Wallet
        </AuthButton>
      </header>
    </BitcoinAuthProvider>
  );
}

For styling options (size, variant, color, etc.), see the Radix Button documentation.

BitcoinAuthProvider - Authentication context provider
LoginForm - Complete authentication form
AuthCard - Card layout for auth flows