Brand & Identity Kit

<script src="https://uniauth.id/brand/oauth/uniauth-widget.js"></script>

<div id="uniauth-signin"></div>

<script>
  UniAuth.renderButton('#uniauth-signin', {
    clientId: 'your-client-id',
    redirectUri: 'https://yourapp.com/callback',
    scope: 'openid profile email',
    theme: 'dark'
  });
</script>

// On your /callback page:
const result = await UniAuth.handleCallback({
  clientId: 'your-client-id',
  redirectUri: 'https://yourapp.com/callback'
});

if (result.success) {
  console.log('Access token:', result.accessToken);
  console.log('ID token:', result.idToken);
} else {
  console.error('Auth error:', result.error);
}

<div id="uniauth-badge"></div>
<script>
  UniAuth.renderBadge('#uniauth-badge', {
    theme: 'light',  // 'light' | 'dark'
    text: 'secured'  // 'powered' | 'secured' | 'identity'
  });
</script>

<link rel="stylesheet"
      href="https://uniauth.id/brand/oauth/uniauth-buttons.css" />

<a href="https://uniauth.id/api/oauth/authorize?client_id=YOUR_ID&..."
   class="uniauth-btn uniauth-btn-dark">
  <span class="uniauth-btn-icon"></span>
  Sign in with UniAuth
</a>

<a href="..." class="uniauth-btn uniauth-btn-light">
  <span class="uniauth-btn-icon"></span>
  Sign in with UniAuth
</a>

<a href="..." class="uniauth-btn uniauth-btn-outline">
  <span class="uniauth-btn-icon"></span>
  Continue with UniAuth
</a>

<!-- Small -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-sm">...</a>

<!-- Large -->
<a class="uniauth-btn uniauth-btn-light uniauth-btn-lg">...</a>

<!-- Pill shape -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-pill">...</a>

<!-- Full width -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-block">...</a>

<!-- Icon only -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-icon-only">
  <span class="uniauth-btn-icon"></span>
</a>

<!-- Disabled -->
<a class="uniauth-btn uniauth-btn-dark" disabled>...</a>

<!-- Loading -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-loading">
  <span class="uniauth-btn-icon"></span>
  Signing in...
</a>

<a href="https://uniauth.id" class="uniauth-badge uniauth-badge-light">
  <span class="uniauth-badge-icon"></span>
  <span>Powered by <strong>UniAuth</strong></span>
</a>

<a href="https://uniauth.id" class="uniauth-badge uniauth-badge-dark">
  <span class="uniauth-badge-icon"></span>
  <span>Secured by <strong>UniAuth</strong></span>
</a>

import { UniAuthProvider, LoginButton } from '@uniauth/react';

function App() {
  return (
    <UniAuthProvider
      issuer="https://uniauth.id"
      clientId="your-client-id"
      redirectUri="https://yourapp.com/callback"
    >
      <LoginButton theme="dark" />
    </UniAuthProvider>
  );
}

interface UniAuthButtonProps {
  clientId: string;
  redirectUri: string;
  scope?: string;
  theme?: 'dark' | 'light' | 'outline' | 'neutral';
  size?: 'small' | 'standard' | 'large';
  text?: 'signin' | 'continue';
  className?: string;
}

const SHIELD_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
  viewBox="0 0 24 24" fill="none">
  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
    stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;

export function UniAuthButton({
  clientId,
  redirectUri,
  scope = 'openid profile email',
  theme = 'dark',
  size = 'standard',
  text = 'signin',
  className = '',
}: UniAuthButtonProps) {
  const label = text === 'continue'
    ? 'Continue with UniAuth'
    : 'Sign in with UniAuth';

  const heights = { small: 'h-9', standard: 'h-11', large: 'h-[52px]' };
  const iconSizes = { small: 'w-[34px]', standard: 'w-[42px]', large: 'w-[50px]' };
  const fonts = { small: 'text-[13px]', standard: 'text-sm', large: 'text-base' };

  const themes = {
    dark: 'bg-[#0a0a0a] border-[#0a0a0a] text-[#fafafa] hover:bg-[#262626]',
    light: 'bg-white border-[#d4d4d4] text-[#0a0a0a] hover:bg-[#f5f5f5]',
    outline: 'bg-transparent border-[#a3a3a3] text-[#262626] hover:bg-black/[0.04]',
    neutral: 'bg-[#f5f5f5] border-[#e5e5e5] text-[#171717] hover:bg-[#e5e5e5]',
  };

  async function handleClick() {
    const array = new Uint8Array(32);
    crypto.getRandomValues(array);
    const verifier = btoa(String.fromCharCode(...array))
      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');

    const digest = await crypto.subtle.digest(
      'SHA-256', new TextEncoder().encode(verifier)
    );
    const challenge = btoa(String.fromCharCode(...new Uint8Array(digest)))
      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');

    const stateArr = new Uint8Array(16);
    crypto.getRandomValues(stateArr);
    const state = btoa(String.fromCharCode(...stateArr))
      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');

    sessionStorage.setItem('uniauth_code_verifier', verifier);
    sessionStorage.setItem('uniauth_state', state);

    const params = new URLSearchParams({
      response_type: 'code',
      client_id: clientId,
      redirect_uri: redirectUri,
      scope,
      state,
      code_challenge: challenge,
      code_challenge_method: 'S256',
    });

    window.location.href =
      `https://uniauth.id/api/oauth/authorize?${params}`;
  }

  return (
    <button
      type="button"
      onClick={handleClick}
      aria-label={label}
      className={`inline-flex items-center gap-0 border rounded-md
        font-medium transition-colors cursor-pointer select-none
        ${heights[size]} ${fonts[size]} ${themes[theme]} ${className}`}
      style={{ paddingRight: size === 'large' ? 20 : 16 }}
    >
      <span
        className={`flex items-center justify-center
          ${iconSizes[size]} ${heights[size]}
          border-r border-current/15`}
        dangerouslySetInnerHTML={{ __html: SHIELD_SVG }}
      />
      <span className="flex-1 text-center">{label}</span>
    </button>
  );
}