@lpti/unpam-sso

Embed the UNPAM SSO login button as an iframe widget. Supports both vanilla JavaScript and React (JSX/TSX) usage. No dependencies required for vanilla JS. TypeScript types included for React.

Installation

npm install @lpti/unpam-sso

Usage

Vanilla JavaScript (Native, No Dependencies)

ES6 Modules

import { embedButtonLogin } from '@lpti/unpam-sso';

// Basic usage
embedButtonLogin('login-container');

// With options
embedButtonLogin('login-container', {
  env: 'prod', // 'dev' or 'prod'
  lang: 'en',  // 'id' or 'en'
  size: 'lg',  // 'sm', 'md', or 'lg'
  theme: 'black', // 'white' or 'black'
  width: '300px',
  className: 'my-login-widget'
});

HTML Script Tag (via CDN)

<script type="module">
  import { embedButtonLogin } from 'https://unpkg.com/@lpti/unpam-sso@latest/index.js';
  embedButtonLogin('login-container', {
    env: 'prod',
    lang: 'id',
    size: 'md',
    theme: 'white'
  });
</script>
<div id="login-container"></div>

React Component (JSX/TSX)

Import (JSX or TypeScript)

import { LoginButton } from '@lpti/unpam-sso/react';

function App() {
  return (
    <div>
      {/* Basic usage */}
      <LoginButton />
      {/* With options */}
      <LoginButton
        env="prod"
        lang="en"
        size="lg"
        theme="black"
        width="300px"
        className="my-login-widget"
        onLoad={() => console.log('Login button loaded')}
        onError={error => console.error('Login button error:', error)}
      />
    </div>
  );
}

React Hook Usage

import { useLoginButton } from '@lpti/unpam-sso/react';

function CustomLoginComponent() {
  const { iframeUrl, isLoading, hasError, reload } = useLoginButton({
    env: 'prod',
    lang: 'id',
    size: 'md',
    theme: 'white'
  });

  if (isLoading) return <div>Loading login button...</div>;
  if (hasError) return <div>Error loading login button. <button onClick={reload}>Retry</button></div>;

  return (
    <iframe
      src={iframeUrl}
      width="100%"
      height="40px"
      frameBorder="0"
      scrolling="no"
    />
  );
}

API

Vanilla JavaScript

embedButtonLogin(elementId, options)

Embeds an iframe-based login button/widget into a target element.

Parameters:

• elementId (string): The id of the target HTML element
• options (object, optional):
  • env (string): 'dev' or 'prod'
  • url (string): Custom iframe src URL (overrides env)
  • width (string): CSS width (e.g. '300px')
  • height (string): CSS height (e.g. '80px')
  • className (string): Additional CSS class for the iframe
  • style (object): Inline style object for the iframe
  • sandbox (string): Sandbox attribute value
  • title (string): Title attribute for accessibility
  • lang (string): 'id' or 'en' (default: 'id')
  • size (string): 'sm', 'md', or 'lg' (default: 'md')
    • sm: 32px height
    • md: 40px height
    • lg: 48px height
  • theme (string): 'white' or 'black' (default: 'white')

React Component

<LoginButton /> Props

All the same options as the vanilla JS version, plus:

• onLoad (function): Callback when iframe loads successfully
• onError (function): Callback when iframe fails to load
• All standard iframe props are supported

useLoginButton(options) Hook

Returns an object with:

• iframeUrl (string): The generated iframe URL
• isLoading (boolean): Whether the URL is being validated
• hasError (boolean): Whether there was an error loading
• reload (function): Function to retry loading the URL

Environment URLs

• Development: https://devsso.unpam.ac.id/login-button
• Production: https://satu.unpam.ac.id/login-button

Features

• ✅ No dependencies for vanilla JS
• ✅ Native JavaScript ES6 modules
• ✅ React component (JSX/TSX) and TypeScript support
• ✅ React hooks for advanced usage
• ✅ Automatic domain detection
• ✅ Multiple language support (Indonesian/English)
• ✅ Theme support (white/black)
• ✅ Responsive sizing options
• ✅ URL validation before iframe creation
• ✅ Error handling and logging
• ✅ Loading states for React components

File Structure (npm-package)

• index.js — Native JavaScript (no dependencies)
• react.jsx — React component (JSX, JavaScript)
• react.tsx — React component (TypeScript, recommended for TS/modern React)

License

MIT