@0xobelisk/controller

Dubhe Auth Modal SDK (@0xobelisk/controller)

Modal SDK that projects can embed for user login/auth. Published as @0xobelisk/controller, with ESM/CJS/UMD outputs and adapters for React, Vue, Svelte, Solid, Preact, Angular, and Cocos Creator.

📚 Documentation

Complete Integration Guide →

Platform-specific guides available for:

• React / Next.js
• Vue
• Svelte
• Solid
• Preact
• Angular
• Cocos Creator
• Vanilla JavaScript

What's here

• Minimal TypeScript SDK (src/) that creates/destroys the modal with a simple API.
• Themeable CSS (src/styles.css) with gradients, blur, and responsive layout.
• Example scaffold (examples/basic) showing how to open the modal, plus a full-flow mock page (examples/full-flow) with CTA -> modal -> mock auth -> close，支持深色金色卡片风格。
• Build setup via tsc (no runtime deps).

Quick Start

Installation

npm install @0xobelisk/controller

Basic Usage (Vanilla JS)

import { createAuthModal } from '@0xobelisk/controller';
import '@0xobelisk/controller/styles.css';

const modal = createAuthModal({
  onSelect: (providerId) => {
    console.log('Selected:', providerId);
    if (providerId === 'create-session') {
      // Handle session creation
      handleCreateSession();
    } else if (providerId === 'quit') {
      modal.close();
    }
  },
  onClose: () => {
    console.log('Modal closed');
  }
});

modal.open();

React / Next.js

import { useAuthModal } from '@0xobelisk/controller/react';
import '@0xobelisk/controller/styles.css';

export default function LoginPage() {
  const modal = useAuthModal({
    onSelect: (providerId) => {
      console.log('Selected:', providerId);
      if (providerId === 'create-session') {
        handleCreateSession();
      }
    }
  });

  return <button onClick={modal.open}>Login</button>;
}

See complete integration guides for all platforms →

Session Management

Session management with blockchain authentication:

import { runSessionFlow } from '@0xobelisk/controller';
import { Ed25519Keypair } from '@mysten/sui/keypairs/ed25519';

const userKeypair = Ed25519Keypair.generate();

try {
  const session = await runSessionFlow({
    keypair: userKeypair,
    endpoints: {
      start: 'https://api.example.com/session/start',
      create: 'https://api.example.com/session/create'
    }
  });

  console.log('Session created:', session.sessionKey);
} catch (error) {
  console.error('Session creation failed:', error);
}

See complete session management guide →

Development

Run examples locally:

npm install
npm run build
npm run serve           # http://localhost:4173

Examples available at:

• Basic demo: http://localhost:4173/examples/basic/
• Full flow: http://localhost:4173/examples/full-flow/

Custom Styling

Card Variant with Background Image

const modal = createAuthModal({
  variant: 'card',
  accentColor: '#7a63ff',
  backgroundImage: 'https://unpkg.com/@0xobelisk/controller/dist/dubhe.jpeg',
  onSelect: (providerId) => {
    console.log('Selected:', providerId);
  }
});

Custom Theme Colors

const modal = createAuthModal({
  accentColor: '#6366f1', // Indigo
  onSelect: handleAuth
});

See complete styling guide →

Supported Platforms

Adapters available for all major platforms:

• React / Next.js: @0xobelisk/controller/react
• Vue 3: @0xobelisk/controller/vue
• Svelte: @0xobelisk/controller/svelte
• Solid: @0xobelisk/controller/solid
• Preact: @0xobelisk/controller/preact
• Angular: @0xobelisk/controller/angular
• Cocos Creator: @0xobelisk/controller/cocos
• Vanilla JS: Direct import from @0xobelisk/controller

View platform-specific integration guides →

Features

• 🎨 Themeable: Customize colors, layouts, and styling
• 🌐 Universal: Works in browser, mobile WebView, and game engines
• 📦 Lightweight: Minimal dependencies, tree-shakeable
• 🔐 Session Management: Built-in blockchain authentication flows
• ⚡ Fast: Optimized bundle size with code splitting
• 🎯 TypeScript: Full type safety and IntelliSense

API Reference

createAuthModal(options)

Returns an AuthModalController instance.

Options:

• onSelect: (providerId: string) => void - Required callback when button clicked
• onClose?: () => void - Optional callback when modal closes
• title?: string - Modal title (default: "Authenticate to continue")
• subtitle?: string - Modal subtitle
• variant?: 'card' | 'split' - Layout variant (default: "split")
• accentColor?: string - Primary color (default: "#7a63ff")
• backgroundImage?: string - Background image URL
• buttons?: AuthButton[] - Custom buttons
• container?: HTMLElement - Mount container (default: document.body)

Returns:

• open() - Show the modal
• close() - Hide the modal
• destroy() - Remove and cleanup
• isOpen() - Check if modal is open

See complete API reference →

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Obelisk Labs

Support

• Issues: GitHub Issues
• Documentation: Integration Guide
• NPM: @0xobelisk/controller

---