Kit de marca e identidad

Recursos oficiales para integrar el inicio de sesión de UniAuth en tu aplicación. Marcas de escudo, botones listos para usar, insignias y widgets integrables, todo en un solo lugar.

Marca de escudo

El escudo de UniAuth es la marca principal. Úsalo como icono reconocible en botones de inicio de sesión, fichas de aplicaciones y documentación.

OscuroPara fondos clarosSVG

BlancoPara fondos oscurosSVG

Logotipo en líneaEscudo + logotipoSVG

Logotipo en línea blancoPara fondos oscurosSVG

HTML

<img src="https://uniauth.id/brand/oauth/mark.svg" alt="UniAuth" width="24" height="24" />

Botones de inicio de sesión

Zona de pruebas interactiva: elige tema, tamaño, forma y texto para previsualizar el botón en vivo con estados hover reales. Copia el HTML generado para incrustarlo en tu aplicación.

Widget JS Clases CSS React Incrustaciones SVG

Tamaño

Texto

Demo en vivo — pasa el cursor y haz clic

Recursos SVG

/brand/oauth/btn-signin-dark.svg

Insignias de confianza

Zona de pruebas interactiva: elige tema y variante de texto para previsualizar la insignia en vivo con efecto hover. Copia el HTML para incrustarla en tu pie de página, barra lateral o página de pago.

Insignia con Widget JS Clases CSS de insignia

Tamaño

Texto

/brand/oauth/badge-verified-by.svg

Insignias planas tipo pill

Insignias planas al estilo shields.io para archivos README, documentación y paneles. Elige una variante y copia el Markdown o el HTML.

Tamaño

Tipo

Markdown

HTML/brand/oauth/pill-verified.svg

Sellos de confianza

Sellos de confianza destacados para páginas de pago, barras laterales y páginas de seguridad. Alterna tema y estilo para previsualizar y luego copia el HTML.

Renderizar con Widget JS

Tema

Estilo

Tamaño

/brand/oauth/seal-verified.svg

Insignia flotante y barra de confianza

Demos en vivo: activa la insignia flotante de esquina o la barra de confianza del pie de página. Pasa el cursor sobre la insignia flotante para ver el efecto de elevación.

Implementación con Widget JS

Insignia flotante de esquina

Tema

El contenido de tu página

Verified by UniAuth

Barra de confianza del pie de página

Tema

Su pie de página

Authentication secured by UniAuth

La forma más rápida de añadir el inicio de sesión de UniAuth. Una sola etiqueta script renderiza un botón de marca y gestiona automáticamente todo el flujo OAuth con PKCE.

Demo de botón en vivo Demo de insignia en vivo Demo flotante en vivo

Modo popup (recomendado para escritorio)

El usuario permanece en tu página. La autenticación ocurre en un popup. Los tokens se entregan mediante callback.

HTML

<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',
    mode: 'popup',  // opens auth in a centered popup
    theme: 'dark',
    onSuccess: function(result) {
      console.log('Logged in!', result.accessToken);
    },
    onError: function(err) {
      console.error('Auth failed:', err.error);
    }
  });
</script>

Modo redirección

Navega con la página completa a UniAuth y vuelve con el código. Funciona en todas partes.

HTML

<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',
    mode: 'redirect',  // full-page navigation
    theme: 'dark'
  });
</script>

<!-- On your /callback page: -->
<script>
  UniAuth.handleCallback({
    clientId: 'your-client-id',
    redirectUri: 'https://yourapp.com/callback'
  }).then(function(result) {
    if (result.success) {
      console.log('Access token:', result.accessToken);
    }
  });
</script>

Detección automática (predeterminado)

mode omitido: detecta automáticamente popup en escritorio y redirección en móvil.

HTML

UniAuth.renderButton('#uniauth-signin', {
  clientId: 'your-client-id',
  redirectUri: 'https://yourapp.com/callback',
  // mode omitted — auto-detects popup (desktop) or redirect (mobile)
});

Todas las opciones

Opción	Tipo	Predeterminado	Descripción
clientId	string	—	Tu ID de cliente OAuth (obligatorio)
redirectUri	string	origin/callback	Adónde redirigir tras la autenticación
mode	string	auto	"popup" \| "redirect" — detección automática si se omite
scope	string	"openid profile email"	Scopes OAuth que se solicitarán
theme	string	"dark"	"dark" \| "light" \| "outline" \| "neutral"
size	string	"standard"	"small" \| "standard" \| "large"
text	string	"signin"	"signin" \| "continue"
shape	string	"rectangular"	"rectangular" \| "pill"
width	number	auto	Ancho fijo en píxeles
locale	string	"en"	Idioma del texto del botón
onSuccess	function	—	Callback con los tokens al completarse la autenticación en popup
onError	function	—	Callback ante un error de autenticación o si se cierra el popup
onSignIn	function	—	Manejador de clic personalizado (omite el flujo OAuth)
popupWidth	number	480	Ancho de la ventana popup en píxeles
popupHeight	number	640	Alto de la ventana popup en píxeles
loginHint	string	—	Rellena el correo de antemano en el inicio de sesión de UniAuth
prompt	string	—	"login" \| "consent" \| "none"
nonce	string	—	Nonce del ID token para protección contra repetición

Renderizar una insignia

HTML

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

Clases CSS: integración HTML

Para un control total, usa la hoja de estilos independiente con nombres de clase semánticos. No requiere JavaScript: solo HTML y CSS.

Demo de botón en vivo Demo de insignia en vivo

Incluye la hoja de estilos

HTML

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

Botón oscuro

HTML

<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>

Botón claro

HTML

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

Botón con contorno

HTML

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

Modificadores

HTML

<!-- 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>

Clases de insignia

HTML

<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>

Componente React

Componente React listo para usar en Next.js, Vite o cualquier aplicación React. Utiliza el SDK oficial @uniauth/react o puede usarse de forma independiente.

Demo de botón en vivo

Con el SDK @uniauth/react

JSX

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>
  );
}

Componente independiente

TSX

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>
  );
}

Botones SVG para incrustar

SVG de botones prerenderizados: la integración más sencilla. Solo tienes que incrustarlos como <img> u <object>. No se necesita CSS ni JS.

Demo de botón en vivo

HTML

<!-- Dark "Sign in" button -->
<a href="https://uniauth.id/api/oauth/authorize?client_id=YOUR_ID&...">
  <img src="https://uniauth.id/brand/oauth/btn-signin-dark.svg"
       alt="Sign in with UniAuth" height="44" />
</a>

<!-- Light "Sign in" button -->
<img src="https://uniauth.id/brand/oauth/btn-signin-light.svg"
     alt="Sign in with UniAuth" height="44" />

<!-- Outline "Sign in" button -->
<img src="https://uniauth.id/brand/oauth/btn-signin-outline.svg"
     alt="Sign in with UniAuth" height="44" />

<!-- Dark "Continue with" button -->
<img src="https://uniauth.id/brand/oauth/btn-continue-dark.svg"
     alt="Continue with UniAuth" height="44" />

<!-- Icon-only buttons -->
<img src="https://uniauth.id/brand/oauth/btn-icon-dark.svg"
     alt="UniAuth" width="44" height="44" />
<img src="https://uniauth.id/brand/oauth/btn-icon-light.svg"
     alt="UniAuth" width="44" height="44" />

Archivos SVG disponibles

Archivo	Tamaño	Descripción
btn-signin-dark.svg	240 x 44	Oscuro «Sign in with UniAuth»
btn-signin-light.svg	240 x 44	Claro «Sign in with UniAuth»
btn-signin-outline.svg	240 x 44	Contorno «Sign in with UniAuth»
btn-continue-dark.svg	260 x 44	Oscuro «Continue with UniAuth»
btn-continue-light.svg	260 x 44	Claro «Continue with UniAuth»
btn-icon-dark.svg	44 x 44	Botón oscuro solo icono
btn-icon-light.svg	44 x 44	Botón claro solo icono
btn-icon-outline.svg	44 x 44	Botón con contorno solo icono

Directrices de marca

Sigue estas directrices para garantizar una representación coherente de la marca UniAuth en tu aplicación.

Correcto

Usa los SVG de botones oficiales o las clases CSS tal como se proporcionan
Mantén un espacio libre de al menos 8 px alrededor del botón
Usa la variante oscura sobre fondos claros y la clara sobre fondos oscuros
Dimensiona el botón de forma similar a otros botones de inicio de sesión social de tu interfaz
Usa «Sign in with UniAuth» o «Continue with UniAuth» como texto del botón
Incluye el icono del escudo: es la marca de reconocimiento principal

Incorrecto

Modificar la forma, las proporciones o el grosor del trazo del icono del escudo
Añadir rellenos de color al escudo: siempre es una marca solo de trazo
Usar el logotipo de UniAuth para sugerir un respaldo sin que exista una colaboración
Mostrar el botón con menos de 36 px de alto o cambiar su texto
Colocar el botón sobre fondos recargados que reduzcan el contraste
Rotar, sesgar o aplicar efectos (sombra, brillo) a la marca

Paleta de colores

UniAuth usa una paleta monocroma. Todos los elementos de marca emplean grises neutros, sin color de acento.

#0a0a0a

Negro

#171717

900

#404040

700

#737373

500

#d4d4d4

300

#fafafa

Blanco

Tipografía: Los botones usan la pila de fuentes del sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif. Peso 500 (medium) para el texto del botón y 700 (bold) para el logotipo «UniAuth».

Todas las descargas

Todos los recursos del kit de identidad, organizados por tipo.

Kit de logotipo completo

Los iconos PNG/SVG en varios tamaños y los logotipos completos también están disponibles en el directorio /brand/.

Icono SVG (oscuro)Icono SVG (claro)Logotipo completo (oscuro)Logotipo completo (blanco)Icono 512 px (oscuro)Icono 512 px (claro)Favicon ICO Icono Apple Touch

¿Listo para integrar?

Registra tu aplicación OAuth en la consola de desarrollador para obtener tu ID de cliente y luego usa cualquiera de los métodos anteriores para añadir el inicio de sesión de UniAuth.

Consola de desarrollador Leer la documentación Referencia de la API

Kit de marca e identidad

Recursos oficiales para integrar el inicio de sesión de UniAuth en tu aplicación. Marcas de escudo, botones listos para usar, insignias y widgets integrables, todo en un solo lugar.

Marca de escudo

El escudo de UniAuth es la marca principal. Úsalo como icono reconocible en botones de inicio de sesión, fichas de aplicaciones y documentación.

OscuroPara fondos clarosSVG

BlancoPara fondos oscurosSVG

Logotipo en líneaEscudo + logotipoSVG

Logotipo en línea blancoPara fondos oscurosSVG

HTML

<img src="https://uniauth.id/brand/oauth/mark.svg" alt="UniAuth" width="24" height="24" />

Botones de inicio de sesión

Zona de pruebas interactiva: elige tema, tamaño, forma y texto para previsualizar el botón en vivo con estados hover reales. Copia el HTML generado para incrustarlo en tu aplicación.

Widget JS Clases CSS React Incrustaciones SVG

Tamaño

Texto

Demo en vivo — pasa el cursor y haz clic

Recursos SVG

/brand/oauth/btn-signin-dark.svg

Insignias de confianza

Insignia con Widget JS Clases CSS de insignia

Tamaño

Texto

/brand/oauth/badge-verified-by.svg

Insignias planas tipo pill

Insignias planas al estilo shields.io para archivos README, documentación y paneles. Elige una variante y copia el Markdown o el HTML.

Tamaño

Tipo

Markdown

HTML/brand/oauth/pill-verified.svg

Sellos de confianza

Sellos de confianza destacados para páginas de pago, barras laterales y páginas de seguridad. Alterna tema y estilo para previsualizar y luego copia el HTML.

Renderizar con Widget JS

Tema

Estilo

Tamaño

/brand/oauth/seal-verified.svg

Insignia flotante y barra de confianza

Demos en vivo: activa la insignia flotante de esquina o la barra de confianza del pie de página. Pasa el cursor sobre la insignia flotante para ver el efecto de elevación.

Implementación con Widget JS

Insignia flotante de esquina

Tema

El contenido de tu página

Verified by UniAuth

Barra de confianza del pie de página

Tema

Su pie de página

Authentication secured by UniAuth

La forma más rápida de añadir el inicio de sesión de UniAuth. Una sola etiqueta script renderiza un botón de marca y gestiona automáticamente todo el flujo OAuth con PKCE.

Demo de botón en vivo Demo de insignia en vivo Demo flotante en vivo

Modo popup (recomendado para escritorio)

El usuario permanece en tu página. La autenticación ocurre en un popup. Los tokens se entregan mediante callback.

HTML

<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',
    mode: 'popup',  // opens auth in a centered popup
    theme: 'dark',
    onSuccess: function(result) {
      console.log('Logged in!', result.accessToken);
    },
    onError: function(err) {
      console.error('Auth failed:', err.error);
    }
  });
</script>

Modo redirección

Navega con la página completa a UniAuth y vuelve con el código. Funciona en todas partes.

HTML

<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',
    mode: 'redirect',  // full-page navigation
    theme: 'dark'
  });
</script>

<!-- On your /callback page: -->
<script>
  UniAuth.handleCallback({
    clientId: 'your-client-id',
    redirectUri: 'https://yourapp.com/callback'
  }).then(function(result) {
    if (result.success) {
      console.log('Access token:', result.accessToken);
    }
  });
</script>

Detección automática (predeterminado)

mode omitido: detecta automáticamente popup en escritorio y redirección en móvil.

HTML

UniAuth.renderButton('#uniauth-signin', {
  clientId: 'your-client-id',
  redirectUri: 'https://yourapp.com/callback',
  // mode omitted — auto-detects popup (desktop) or redirect (mobile)
});

Todas las opciones

Opción	Tipo	Predeterminado	Descripción
clientId	string	—	Tu ID de cliente OAuth (obligatorio)
redirectUri	string	origin/callback	Adónde redirigir tras la autenticación
mode	string	auto	"popup" \| "redirect" — detección automática si se omite
scope	string	"openid profile email"	Scopes OAuth que se solicitarán
theme	string	"dark"	"dark" \| "light" \| "outline" \| "neutral"
size	string	"standard"	"small" \| "standard" \| "large"
text	string	"signin"	"signin" \| "continue"
shape	string	"rectangular"	"rectangular" \| "pill"
width	number	auto	Ancho fijo en píxeles
locale	string	"en"	Idioma del texto del botón
onSuccess	function	—	Callback con los tokens al completarse la autenticación en popup
onError	function	—	Callback ante un error de autenticación o si se cierra el popup
onSignIn	function	—	Manejador de clic personalizado (omite el flujo OAuth)
popupWidth	number	480	Ancho de la ventana popup en píxeles
popupHeight	number	640	Alto de la ventana popup en píxeles
loginHint	string	—	Rellena el correo de antemano en el inicio de sesión de UniAuth
prompt	string	—	"login" \| "consent" \| "none"
nonce	string	—	Nonce del ID token para protección contra repetición

Renderizar una insignia

HTML

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

Clases CSS: integración HTML

Para un control total, usa la hoja de estilos independiente con nombres de clase semánticos. No requiere JavaScript: solo HTML y CSS.

Demo de botón en vivo Demo de insignia en vivo

Incluye la hoja de estilos

HTML

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

Botón oscuro

HTML

<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>

Botón claro

HTML

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

Botón con contorno

HTML

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

Modificadores

HTML

<!-- 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>

Clases de insignia

HTML

<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>

Componente React

Componente React listo para usar en Next.js, Vite o cualquier aplicación React. Utiliza el SDK oficial @uniauth/react o puede usarse de forma independiente.

Demo de botón en vivo

Con el SDK @uniauth/react

JSX

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>
  );
}

Componente independiente

TSX

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>
  );
}

Botones SVG para incrustar

SVG de botones prerenderizados: la integración más sencilla. Solo tienes que incrustarlos como <img> u <object>. No se necesita CSS ni JS.

Demo de botón en vivo

HTML

<!-- Dark "Sign in" button -->
<a href="https://uniauth.id/api/oauth/authorize?client_id=YOUR_ID&...">
  <img src="https://uniauth.id/brand/oauth/btn-signin-dark.svg"
       alt="Sign in with UniAuth" height="44" />
</a>

<!-- Light "Sign in" button -->
<img src="https://uniauth.id/brand/oauth/btn-signin-light.svg"
     alt="Sign in with UniAuth" height="44" />

<!-- Outline "Sign in" button -->
<img src="https://uniauth.id/brand/oauth/btn-signin-outline.svg"
     alt="Sign in with UniAuth" height="44" />

<!-- Dark "Continue with" button -->
<img src="https://uniauth.id/brand/oauth/btn-continue-dark.svg"
     alt="Continue with UniAuth" height="44" />

<!-- Icon-only buttons -->
<img src="https://uniauth.id/brand/oauth/btn-icon-dark.svg"
     alt="UniAuth" width="44" height="44" />
<img src="https://uniauth.id/brand/oauth/btn-icon-light.svg"
     alt="UniAuth" width="44" height="44" />

Archivos SVG disponibles

Archivo	Tamaño	Descripción
btn-signin-dark.svg	240 x 44	Oscuro «Sign in with UniAuth»
btn-signin-light.svg	240 x 44	Claro «Sign in with UniAuth»
btn-signin-outline.svg	240 x 44	Contorno «Sign in with UniAuth»
btn-continue-dark.svg	260 x 44	Oscuro «Continue with UniAuth»
btn-continue-light.svg	260 x 44	Claro «Continue with UniAuth»
btn-icon-dark.svg	44 x 44	Botón oscuro solo icono
btn-icon-light.svg	44 x 44	Botón claro solo icono
btn-icon-outline.svg	44 x 44	Botón con contorno solo icono

Directrices de marca

Sigue estas directrices para garantizar una representación coherente de la marca UniAuth en tu aplicación.

Correcto

Usa los SVG de botones oficiales o las clases CSS tal como se proporcionan
Mantén un espacio libre de al menos 8 px alrededor del botón
Usa la variante oscura sobre fondos claros y la clara sobre fondos oscuros
Dimensiona el botón de forma similar a otros botones de inicio de sesión social de tu interfaz
Usa «Sign in with UniAuth» o «Continue with UniAuth» como texto del botón
Incluye el icono del escudo: es la marca de reconocimiento principal

Incorrecto

Modificar la forma, las proporciones o el grosor del trazo del icono del escudo
Añadir rellenos de color al escudo: siempre es una marca solo de trazo
Usar el logotipo de UniAuth para sugerir un respaldo sin que exista una colaboración
Mostrar el botón con menos de 36 px de alto o cambiar su texto
Colocar el botón sobre fondos recargados que reduzcan el contraste
Rotar, sesgar o aplicar efectos (sombra, brillo) a la marca

Paleta de colores

UniAuth usa una paleta monocroma. Todos los elementos de marca emplean grises neutros, sin color de acento.

#0a0a0a

Negro

#171717

900

#404040

700

#737373

500

#d4d4d4

300

#fafafa

Blanco

Todas las descargas

Todos los recursos del kit de identidad, organizados por tipo.

Marcas de escudo

mark.svg mark-white.svg mark-48.svg mark-white-48.svg logo-inline.svg logo-inline-white.svg

SVG de botones

btn-signin-dark.svg btn-signin-light.svg btn-signin-outline.svg btn-continue-dark.svg btn-continue-light.svg btn-icon-dark.svg btn-icon-light.svg btn-icon-outline.svg

Insignias de confianza

Insignias planas

pill-uniauth.svg pill-uniauth-id.svg pill-verified.svg pill-secured.svg pill-protected.svg pill-auth.svg

Sellos de confianza

seal-verified.svg seal-verified-dark.svg seal-secured.svg seal-secured-dark.svg seal-compact.svg seal-compact-dark.svg

Integración

uniauth-buttons.css

Hoja de estilos CSS (6 KB)

uniauth-widget.js

Script del widget (5 KB)

Kit de logotipo completo

Los iconos PNG/SVG en varios tamaños y los logotipos completos también están disponibles en el directorio /brand/.

Icono SVG (oscuro)Icono SVG (claro)Logotipo completo (oscuro)Logotipo completo (blanco)Icono 512 px (oscuro)Icono 512 px (claro)Favicon ICO Icono Apple Touch

¿Listo para integrar?

Registra tu aplicación OAuth en la consola de desarrollador para obtener tu ID de cliente y luego usa cualquiera de los métodos anteriores para añadir el inicio de sesión de UniAuth.

Consola de desarrollador Leer la documentación Referencia de la API

Kit de marca e identidad

Marca de escudo

Botones de inicio de sesión

Insignias de confianza

Insignias planas tipo pill

Sellos de confianza

Insignia flotante y barra de confianza

Insignia flotante de esquina

Barra de confianza del pie de página

Widget: JavaScript listo para usar

Modo popup (recomendado para escritorio)

Modo redirección

Detección automática (predeterminado)

Todas las opciones

Renderizar una insignia

Clases CSS: integración HTML

Incluye la hoja de estilos

Botón oscuro

Botón claro

Botón con contorno

Modificadores

Clases de insignia

Componente React

Con el SDK @uniauth/react

Componente independiente

Botones SVG para incrustar

Archivos SVG disponibles

Directrices de marca

Correcto

Incorrecto

Paleta de colores

Todas las descargas

Marcas de escudo

SVG de botones

Insignias de confianza

Insignias planas

Sellos de confianza

Integración

Kit de logotipo completo

¿Listo para integrar?

Kit de marca e identidad

Marca de escudo

Botones de inicio de sesión

Insignias de confianza

Insignias planas tipo pill

Sellos de confianza

Insignia flotante y barra de confianza

Insignia flotante de esquina

Barra de confianza del pie de página

Widget: JavaScript listo para usar

Modo popup (recomendado para escritorio)

Modo redirección

Detección automática (predeterminado)

Todas las opciones

Renderizar una insignia

Clases CSS: integración HTML

Incluye la hoja de estilos

Botón oscuro

Botón claro

Botón con contorno

Modificadores

Clases de insignia

Componente React

Con el SDK @uniauth/react

Componente independiente

Botones SVG para incrustar

Archivos SVG disponibles

Directrices de marca

Correcto

Incorrecto

Paleta de colores

Todas las descargas

Marcas de escudo

SVG de botones

Insignias de confianza

Insignias planas

Sellos de confianza

Integración

Kit de logotipo completo

¿Listo para integrar?