@doobuc/login-widget

Drop-in authentication UI for your web app. Supports social login (Kakao, Naver, Google, Apple, GitHub), email/password, and SMS verification.

Install

npm install @doobuc/login-widget

Quick Start (Vanilla JS)

<div id="login-container"></div>
<script type="module">
  import { DoobucLogin } from '@doobuc/login-widget';

  const login = DoobucLogin('YOUR_CLIENT_KEY', {
    apiBaseUrl: 'https://api.doobuc.com',
  });

  login.renderLoginWidget('#login-container');

  login.onSuccess((user) => {
    console.log('Logged in:', user);
  });
</script>

React

import { DoobucLoginWidget } from '@doobuc/login-widget/react';

function LoginPage() {
  return (
    <DoobucLoginWidget
      clientKey="YOUR_CLIENT_KEY"
      onSuccess={(user) => console.log('Logged in:', user)}
      onError={(err) => console.error(err)}
    />
  );
}

React Provider

import { DoobucProvider, useDoobucContext } from '@doobuc/login-widget/react';

function App() {
  return (
    <DoobucProvider clientKey="YOUR_CLIENT_KEY">
      <MyApp />
    </DoobucProvider>
  );
}

function MyApp() {
  const { user, isAuthenticated, logout } = useDoobucContext();
  // ...
}

Templates

5 built-in templates: classic, split, minimal, dark, floating.

const login = DoobucLogin('YOUR_CLIENT_KEY', {
  template: 'minimal',
});

API

DoobucLogin(clientKey, options?)

Creates a new widget instance.

| Option | Type | Description | |--------|------|-------------| | apiBaseUrl | string | API server URL | | template | string | Widget template name | | customCss | string | Custom CSS to inject | | modal | boolean | Show as modal overlay | | onSuccess | (user) => void | Login success callback | | onError | (error) => void | Error callback | | onClose | () => void | Widget close callback |

Instance Methods

• renderLoginWidget(target) - Render widget into a DOM element
• onSuccess(handler) - Listen for login success
• onError(handler) - Listen for errors
• logout() - Log out the current user
• getUser() - Get current user
• isAuthenticated() - Check auth status
• destroy() - Clean up resources

License

MIT