@quantabit/oauth-sdk

QuantaBit OAuth SDK - Third-party login integration, social account binding, and WalletConnect

✨ Features

• 🔐 Social Login - Google, GitHub, Discord, Twitter, WeChat
• 🔗 Account Linking - Bind/unbind social accounts to your DID identity
• 🎨 Ready-to-Use UI - Pre-built OAuth buttons, modals, and callback pages
• 🔄 OAuth Flow - Complete authorization code flow with PKCE support
• 🌍 Multi-Language - Built-in Chinese/English translations

📦 Installation

npm install @quantabit/oauth-sdk
# or
yarn add @quantabit/oauth-sdk

🚀 Quick Start

1. Using Components

import {
  OAuthButtonGroup,
  OAuthLoginModal,
  OAuthCallbackPage,
  LinkedAccountsList,
} from '@quantabit/oauth-sdk';

// OAuth button group (Google, GitHub, Discord, etc.)
<OAuthButtonGroup
  providers={['google', 'github', 'discord', 'twitter']}
  onSuccess={(result) => console.log('Logged in:', result)}
/>

// OAuth login modal
<OAuthLoginModal
  isOpen={showLogin}
  onClose={() => setShowLogin(false)}
  onSuccess={(result) => handleLogin(result)}
/>

// OAuth callback page (place at /oauth/callback route)
<OAuthCallbackPage
  onSuccess={(result) => navigate('/dashboard')}
  onError={(error) => console.error(error)}
/>

// Linked accounts management
<LinkedAccountsList
  onUnlink={(account) => handleUnlink(account)}
  onLink={(provider) => handleLink(provider)}
/>

2. Using Hooks

import {
  useOAuthLogin,
  useOAuthCallback,
  useLinkedAccounts,
  useOAuthState,
  useOAuthProviders,
} from "@quantabit/oauth-sdk";

function MyComponent() {
  const { login, loading } = useOAuthLogin();
  const { handleCallback } = useOAuthCallback();
  const { accounts, linkAccount, unlinkAccount } = useLinkedAccounts();
  const { isAuthenticated, user } = useOAuthState();
  const { providers, getAuthUrl } = useOAuthProviders();

  return <button onClick={() => login("google")}>Sign in with Google</button>;
}

3. API Client

import { oauthApi } from "@quantabit/oauth-sdk";

// Get authorization URL
const url = await oauthApi.getAuthUrl("google", {
  redirectUri: window.location.origin + "/oauth/callback",
});

// Handle callback
const result = await oauthApi.handleCallback(callbackParams);

// Check auth status
const status = await oauthApi.checkAuth();

// Get linked accounts
const accounts = await oauthApi.getLinkedAccounts();

📚 Components

| Component | Description | | -------------------- | ------------------------------------------------ | | OAuthButton | Single OAuth provider button | | OAuthButtonGroup | Multiple OAuth buttons in a row | | OAuthIconGroup | Compact icon-only OAuth buttons | | OAuthCallbackPage | Callback handling page with loading/error states | | LinkedAccountsList | Linked social accounts management | | OAuthLoginModal | Modal with all OAuth providers |

📖 Type Definitions

import { OAuthProvider, OAuthScope } from "@quantabit/oauth-sdk";

// Supported providers
OAuthProvider.GOOGLE;
OAuthProvider.GITHUB;
OAuthProvider.DISCORD;
OAuthProvider.TWITTER;
OAuthProvider.WECHAT;

// OAuth scopes
OAuthScope.PROFILE; // Basic profile
OAuthScope.EMAIL; // Email access
OAuthScope.OPENID; // OpenID Connect

📄 License

MIT License

🌐 Brand & Links

• Official Mainnet: QuantaBit Chain
• Developer Platform: Developer Platform
• Open Platform: Open Platform
• Payment Platform: Pay Platform
• Feedback: Feedback