SignOutButton

A secure sign-out button component that handles session cleanup while preserving encrypted backups. It features optional confirmation dialogs, loading states, and customizable appearance to fit various UI contexts.

Installation

npx bigblocks add sign-out-button

Import

import { SignOutButton } from 'bigblocks';

Props

Prop	Type	Required	Default	Description
redirectTo	`string`	No	`'/'`	URL to redirect after sign out
confirmSignOut	`boolean`	No	`false`	Show confirmation dialog
confirmMessage	`string`	No	`'Are you sure you want to sign out?'`	Custom confirmation message
variant	`'solid' \| 'soft' \| 'outline' \| 'ghost'`	No	`'soft'`	Button style variant
color	`'gray' \| 'red' \| 'orange' \| 'blue' \| 'green'`	No	`'gray'`	Button color
size	`'1' \| '2' \| '3' \| '4'`	No	`'3'`	Button size (Radix scale)
showIcon	`boolean`	No	`true`	Show exit icon
children	`React.ReactNode`	No	`'Sign Out'`	Custom button text
className	`string`	No	-	Additional CSS classes
onSignOut	`() => void`	No	-	Callback after sign out
showClearInfo	`boolean`	No	`false`	Show what will be cleared

Basic Usage

import { SignOutButton } from 'bigblocks';

export default function Header() {
  return (
    <nav className="flex justify-between items-center p-4">
      <h1>My App</h1>
      <SignOutButton />
    </nav>
  );
}

Advanced Usage

With Confirmation Dialog

import { SignOutButton } from 'bigblocks';

export default function SecuritySettings() {
  return (
    <SignOutButton 
      confirmSignOut={true}
      confirmMessage="Are you sure you want to sign out? You'll need your password to sign back in."
      color="red"
      variant="solid"
    />
  );
}

Custom Sign Out Handler

import { SignOutButton } from 'bigblocks';

export default function ProfileMenu() {
  const handleSignOut = async () => {
    // Clean up app-specific data
    await clearLocalCache();
    
    // Track analytics
    analytics.track('user_signed_out', {
      location: 'profile_menu',
      timestamp: Date.now()
    });
    
    // Show toast notification
    toast.success('Signed out successfully');
  };

  return (
    <SignOutButton
      onSignOut={handleSignOut}
      redirectTo="/goodbye"
      variant="ghost"
    />
  );
}

With Clear Info Display

import { SignOutButton } from 'bigblocks';

export default function DetailedSignOut() {
  return (
    <SignOutButton
      confirmSignOut={true}
      showClearInfo={true}
      confirmMessage="Ready to sign out?"
      color="orange"
      size="3"
    />
  );
}

import { SignOutButton } from 'bigblocks';
import { DropdownMenu } from '@radix-ui/themes';

export function UserMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <button>User Menu</button>
      </DropdownMenu.Trigger>
      
      <DropdownMenu.Content>
        <DropdownMenu.Item>Profile</DropdownMenu.Item>
        <DropdownMenu.Item>Settings</DropdownMenu.Item>
        <DropdownMenu.Separator />
        
        <DropdownMenu.Item asChild>
          <SignOutButton 
            variant="ghost"
            className="w-full justify-start"
            size="2"
          />
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

Common Patterns

Header Integration

import { SignOutButton } from 'bigblocks';
import { useAuth } from '@/hooks/useAuth';

export function AppHeader() {
  const { isAuthenticated } = useAuth();

  return (
    <header className="border-b">
      <div className="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1 className="text-xl font-bold">My App</h1>
        
        {isAuthenticated && (
          <SignOutButton 
            variant="outline"
            size="2"
          />
        )}
      </div>
    </header>
  );
}

Mobile Responsive

import { SignOutButton } from 'bigblocks';

export function ResponsiveSignOut() {
  return (
    <SignOutButton
      size="2"
      variant="soft"
      className="md:hidden"
    >
      <span className="sr-only">Sign Out</span>
      <ExitIcon />
    </SignOutButton>
  );
}

Settings Page

import { SignOutButton } from 'bigblocks';

export function AccountSettings() {
  return (
    <div className="space-y-6">
      <section>
        <h2 className="text-lg font-semibold mb-4">Account</h2>
        
        <div className="border rounded-lg p-4">
          <h3 className="font-medium mb-2">Sign Out</h3>
          <p className="text-sm text-gray-600 mb-4">
            Sign out of your account. Your encrypted backup will be preserved.
          </p>
          
          <SignOutButton
            confirmSignOut={true}
            showClearInfo={true}
            color="red"
            variant="solid"
          />
        </div>
      </section>
    </div>
  );
}

Data Management

What Gets Cleared

When signing out, the following data is cleared:

Session Storage
- Decrypted backup data
- Temporary authentication tokens
- Active session information
Authentication State
- User context
- Authentication status
- Active profile
Server Session
- NextAuth session cookies
- Server-side session data
Cache
- React Query cache
- API response cache

What Gets Preserved

The following data remains after sign out:

Encrypted Backup
- Stored in localStorage
- Password-protected
- Ready for next sign in
OAuth Links
- Connected provider information
- OAuth backup references
User Preferences
- Theme settings
- UI preferences
- Language settings

Confirmation Dialog

When confirmSignOut is enabled, the component shows a modal with:

Custom confirmation message
Clear information (if enabled)
Cancel button
Confirm button

Example dialog content:

Are you sure you want to sign out?

This will clear:
• Current session
• Temporary data

Your encrypted backup will remain safe.

[Cancel] [Sign Out]

Styling

The button uses Radix Themes styling system:

// Different variants
<SignOutButton variant="solid" />   // Filled background
<SignOutButton variant="soft" />    // Subtle background
<SignOutButton variant="outline" /> // Border only
<SignOutButton variant="ghost" />   // Minimal styling

// Different colors
<SignOutButton color="gray" />   // Default
<SignOutButton color="red" />    // Danger/warning
<SignOutButton color="orange" /> // Caution
<SignOutButton color="blue" />   // Info
<SignOutButton color="green" />  // Success

// Different sizes
<SignOutButton size="1" /> // Extra small
<SignOutButton size="2" /> // Small
<SignOutButton size="3" /> // Medium (default)
<SignOutButton size="4" /> // Large

Best Practices

Confirmation for Important Flows: Enable confirmation when signing out would interrupt important work
Color Coding: Use red color for emphasis in security contexts
Placement: Common locations include headers, profile menus, and settings pages
Clear Information: Show what will be cleared in sensitive applications
Loading States: The button shows a spinner during the sign-out process

Accessibility

Auto-hide: Only renders when user is authenticated
Keyboard Navigation: Fully keyboard accessible
Screen Readers: Proper ARIA labels and announcements
Focus Management: Proper focus handling in confirmation dialog

Security Considerations

Client-Side Cleanup: Ensures all sensitive session data is cleared
Server Coordination: Properly invalidates server sessions
Backup Protection: Never touches encrypted backup data
No Data Loss: Preserves all persistent user data

Troubleshooting

Button Not Showing

Verify user is authenticated
Check that component is inside BitcoinAuthProvider
Ensure proper React Query setup

Sign Out Not Working

Check console for errors
Verify API endpoints are accessible
Ensure proper session configuration

Redirect Not Working

For Next.js apps, ensure router is properly configured
Check that redirect URL is valid
Verify no middleware is blocking navigation

LoginForm - Sign in form
AuthButton - Generic auth button
ProfileDropdownMenu - Profile menu with sign out
AuthFlowOrchestrator - Complete auth flows

API Reference

Internal Behavior

The component internally:

Checks authentication status
Clears session storage
Calls sign out API
Clears authentication context
Redirects (if specified)
Calls onSignOut callback

Session Cleanup

The sign-out process:

1. Clear sessionStorage
2. Clear authentication state
3. Invalidate server session
4. Clear React Query cache
5. Preserve encrypted backup
6. Redirect to specified URL

SignOutButton

On this page