Marken- & Identitätskit

Offizielle Ressourcen für die Integration der UniAuth-Anmeldung in Ihre Anwendung. Schild-Marken, fertige Buttons, Badges und einbettbare Widgets — alles an einem Ort.

Schild-Marke

Das UniAuth-Schild ist die primäre Marke. Verwenden Sie es als wiedererkennbares Icon in Anmelde-Buttons, App-Verzeichnissen und Dokumentation.

DunkelFür helle HintergründeSVG

WeißFür dunkle HintergründeSVG

Inline-LogoSchild + WortmarkeSVG

Inline-Logo WeißFür dunkle HintergründeSVG

HTML

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

Anmelde-Buttons

Interaktive Spielwiese — wählen Sie Theme, Größe, Form und Text, um den Button live mit echten Hover-Zuständen anzusehen. Kopieren Sie das generierte HTML, um es in Ihre App einzubetten.

Widget JS CSS-Klassen React SVG-Einbettungen

Größe

Text

Live-Demo — bewegen & klicken

SVG-Assets

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

Vertrauens-Badges

Interaktive Spielwiese — wählen Sie Theme und Textvariante, um das Badge live mit Hover-Effekt anzusehen. Kopieren Sie das HTML für Footer, Seitenleiste oder Checkout-Seite.

Widget-JS-Badge CSS-Badge-Klassen

Größe

Text

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

Flache Pill-Badges

Flache Badges im Shields.io-Stil für README-Dateien, Dokumentation und Dashboards. Wählen Sie eine Variante und kopieren Sie Markdown oder HTML.

Größe

Typ

Markdown

HTML/brand/oauth/pill-verified.svg

Vertrauenssiegel

Auffällige Vertrauenssiegel für Checkout-Seiten, Seitenleisten und Sicherheitsseiten. Schalten Sie Theme und Stil zum Prüfen um und kopieren Sie anschließend das HTML.

Rendern per Widget JS

Thema

Stil

Größe

/brand/oauth/seal-verified.svg

Schwebendes Badge & Vertrauensleiste

Live-Demos — blenden Sie das schwebende Eck-Badge oder die Vertrauensleiste im Footer ein. Fahren Sie mit der Maus über das schwebende Badge, um den Hebe-Effekt zu sehen.

Umsetzung per Widget JS

Schwebendes Eck-Badge

Thema

Ihr Seiteninhalt

Verified by UniAuth

Footer-Vertrauensleiste

Thema

Ihr Footer

Authentication secured by UniAuth

Der schnellste Weg zur UniAuth-Anmeldung. Ein einziges Script-Tag rendert einen Marken-Button und übernimmt den gesamten PKCE-OAuth-Flow automatisch.

Live-Button-Demo Live-Badge-Demo Live-Demo schwebendes Badge

Popup-Modus (empfohlen für Desktop)

Nutzer bleiben auf Ihrer Seite. Die Authentifizierung läuft in einem Popup. Tokens werden per Callback übergeben.

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>

Redirect-Modus

Navigiert die ganze Seite zu UniAuth und leitet mit dem Code zurück. Funktioniert überall.

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>

Automatische Erkennung (Standard)

mode weglassen, um automatisch zu erkennen: Popup auf dem Desktop, Redirect auf Mobilgeräten.

HTML

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

Alle Optionen

Option	Typ	Standard	Beschreibung
clientId	string	—	Ihre OAuth-Client-ID (erforderlich)
redirectUri	string	origin/callback	Ziel der Weiterleitung nach der Authentifizierung
mode	string	auto	"popup" \| "redirect" — automatische Erkennung, wenn weggelassen
scope	string	"openid profile email"	Anzufordernde OAuth-Scopes
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	Feste Breite in Pixeln
locale	string	"en"	Sprache des Button-Texts
onSuccess	function	—	Callback mit Tokens nach abgeschlossener Popup-Authentifizierung
onError	function	—	Callback bei Authentifizierungsfehler oder geschlossenem Popup
onSignIn	function	—	Eigener Klick-Handler (überspringt den OAuth-Flow)
popupWidth	number	480	Breite des Popup-Fensters in Pixeln
popupHeight	number	640	Höhe des Popup-Fensters in Pixeln
loginHint	string	—	Füllt die E-Mail-Adresse bei der UniAuth-Anmeldung vor
prompt	string	—	"login" \| "consent" \| "none"
nonce	string	—	Nonce für das ID-Token zum Schutz vor Replay-Angriffen

Badge rendern

HTML

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

CSS-Klassen — HTML-Integration

Für volle Kontrolle nutzen Sie die eigenständige CSS-Datei mit semantischen Klassennamen. Kein JavaScript erforderlich — nur HTML und CSS.

Live-Button-Demo Live-Badge-Demo

Stylesheet einbinden

HTML

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

Dunkler Button

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>

Heller Button

HTML

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

Outline-Button

HTML

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

Modifikatoren

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>

Badge-Klassen

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>

React-Komponente

Fertige React-Komponente für Next.js, Vite oder jede React-App. Verwendet das offizielle SDK @uniauth/react oder lässt sich eigenständig nutzen.

Live-Button-Demo

Mit dem @uniauth/react SDK

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

Eigenständige Komponente

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

SVG-Button-Einbettungen

Vorgerenderte Button-SVGs — die einfachste Integration. Einfach als <img> oder <object> einbinden. Kein CSS oder JS nötig.

Live-Button-Demo

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

Verfügbare SVG-Dateien

Datei	Größe	Beschreibung
btn-signin-dark.svg	240 x 44	Dunkel „Sign in with UniAuth“
btn-signin-light.svg	240 x 44	Hell „Sign in with UniAuth“
btn-signin-outline.svg	240 x 44	Outline „Sign in with UniAuth“
btn-continue-dark.svg	260 x 44	Dunkel „Continue with UniAuth“
btn-continue-light.svg	260 x 44	Hell „Continue with UniAuth“
btn-icon-dark.svg	44 x 44	Dunkler Button nur mit Icon
btn-icon-light.svg	44 x 44	Heller Button nur mit Icon
btn-icon-outline.svg	44 x 44	Outline-Button nur mit Icon

Markenrichtlinien

Befolgen Sie diese Richtlinien, um die UniAuth-Marke in Ihrer Anwendung einheitlich darzustellen.

Richtig

Die offiziellen Button-SVGs oder CSS-Klassen unverändert verwenden
Mindestens 8 px Freiraum um den Button lassen
Die dunkle Variante auf hellen, die helle Variante auf dunklen Hintergründen verwenden
Den Button ähnlich groß wie andere Social-Login-Buttons in Ihrer Oberfläche gestalten
„Sign in with UniAuth“ oder „Continue with UniAuth“ als Button-Text verwenden
Das Schild-Icon einbinden — es ist das primäre Erkennungszeichen

Falsch

Form, Proportionen oder Strichstärke des Schild-Icons verändern
Farbflächen zum Schild hinzufügen — es ist immer eine reine Kontur-Marke
Das UniAuth-Logo nutzen, um ohne Partnerschaft eine Empfehlung zu suggerieren
Den Button kleiner als 36 px hoch darstellen oder den Text ändern
Den Button auf unruhigen Hintergründen mit geringem Kontrast platzieren
Die Marke drehen, verzerren oder mit Effekten (Schlagschatten, Glühen) versehen

Farbpalette

UniAuth verwendet eine monochrome Palette. Alle Markenelemente nutzen neutrale Grautöne — keine Akzentfarbe.

#0a0a0a

Schwarz

#171717

900

#404040

700

#737373

500

#d4d4d4

300

#fafafa

Weiß

Typografie: Buttons verwenden den System-Font-Stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif. Schriftgewicht 500 (Medium) für Button-Text, 700 (Bold) für die Wortmarke „UniAuth“.

Alle Downloads

Alle Ressourcen des Identitätskits, nach Typ geordnet.

Komplettes Logo-Kit

PNG/SVG-Icons in mehreren Größen sowie vollständige Logos finden Sie außerdem im Verzeichnis /brand/.

Icon-SVG (dunkel)Icon-SVG (hell)Volles Logo (dunkel)Volles Logo (weiß)Icon 512 px (dunkel)Icon 512 px (hell)Favicon ICO Apple-Touch-Icon

Bereit zur Integration?

Registrieren Sie Ihre OAuth-Anwendung in der Entwicklerkonsole, um Ihre Client-ID zu erhalten, und fügen Sie die UniAuth-Anmeldung dann mit einer der obigen Methoden hinzu.

Entwicklerkonsole Dokumentation lesen API-Referenz

Marken- & Identitätskit

Offizielle Ressourcen für die Integration der UniAuth-Anmeldung in Ihre Anwendung. Schild-Marken, fertige Buttons, Badges und einbettbare Widgets — alles an einem Ort.

Schild-Marke

Das UniAuth-Schild ist die primäre Marke. Verwenden Sie es als wiedererkennbares Icon in Anmelde-Buttons, App-Verzeichnissen und Dokumentation.

DunkelFür helle HintergründeSVG

WeißFür dunkle HintergründeSVG

Inline-LogoSchild + WortmarkeSVG

Inline-Logo WeißFür dunkle HintergründeSVG

HTML

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

Anmelde-Buttons

Interaktive Spielwiese — wählen Sie Theme, Größe, Form und Text, um den Button live mit echten Hover-Zuständen anzusehen. Kopieren Sie das generierte HTML, um es in Ihre App einzubetten.

Widget JS CSS-Klassen React SVG-Einbettungen

Größe

Text

Live-Demo — bewegen & klicken

SVG-Assets

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

Vertrauens-Badges

Interaktive Spielwiese — wählen Sie Theme und Textvariante, um das Badge live mit Hover-Effekt anzusehen. Kopieren Sie das HTML für Footer, Seitenleiste oder Checkout-Seite.

Widget-JS-Badge CSS-Badge-Klassen

Größe

Text

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

Flache Pill-Badges

Flache Badges im Shields.io-Stil für README-Dateien, Dokumentation und Dashboards. Wählen Sie eine Variante und kopieren Sie Markdown oder HTML.

Größe

Typ

Markdown

HTML/brand/oauth/pill-verified.svg

Vertrauenssiegel

Auffällige Vertrauenssiegel für Checkout-Seiten, Seitenleisten und Sicherheitsseiten. Schalten Sie Theme und Stil zum Prüfen um und kopieren Sie anschließend das HTML.

Rendern per Widget JS

Thema

Stil

Größe

/brand/oauth/seal-verified.svg

Schwebendes Badge & Vertrauensleiste

Live-Demos — blenden Sie das schwebende Eck-Badge oder die Vertrauensleiste im Footer ein. Fahren Sie mit der Maus über das schwebende Badge, um den Hebe-Effekt zu sehen.

Umsetzung per Widget JS

Schwebendes Eck-Badge

Thema

Ihr Seiteninhalt

Verified by UniAuth

Footer-Vertrauensleiste

Thema

Ihr Footer

Authentication secured by UniAuth

Der schnellste Weg zur UniAuth-Anmeldung. Ein einziges Script-Tag rendert einen Marken-Button und übernimmt den gesamten PKCE-OAuth-Flow automatisch.

Live-Button-Demo Live-Badge-Demo Live-Demo schwebendes Badge

Popup-Modus (empfohlen für Desktop)

Nutzer bleiben auf Ihrer Seite. Die Authentifizierung läuft in einem Popup. Tokens werden per Callback übergeben.

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>

Redirect-Modus

Navigiert die ganze Seite zu UniAuth und leitet mit dem Code zurück. Funktioniert überall.

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>

Automatische Erkennung (Standard)

mode weglassen, um automatisch zu erkennen: Popup auf dem Desktop, Redirect auf Mobilgeräten.

HTML

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

Alle Optionen

Option	Typ	Standard	Beschreibung
clientId	string	—	Ihre OAuth-Client-ID (erforderlich)
redirectUri	string	origin/callback	Ziel der Weiterleitung nach der Authentifizierung
mode	string	auto	"popup" \| "redirect" — automatische Erkennung, wenn weggelassen
scope	string	"openid profile email"	Anzufordernde OAuth-Scopes
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	Feste Breite in Pixeln
locale	string	"en"	Sprache des Button-Texts
onSuccess	function	—	Callback mit Tokens nach abgeschlossener Popup-Authentifizierung
onError	function	—	Callback bei Authentifizierungsfehler oder geschlossenem Popup
onSignIn	function	—	Eigener Klick-Handler (überspringt den OAuth-Flow)
popupWidth	number	480	Breite des Popup-Fensters in Pixeln
popupHeight	number	640	Höhe des Popup-Fensters in Pixeln
loginHint	string	—	Füllt die E-Mail-Adresse bei der UniAuth-Anmeldung vor
prompt	string	—	"login" \| "consent" \| "none"
nonce	string	—	Nonce für das ID-Token zum Schutz vor Replay-Angriffen

Badge rendern

HTML

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

CSS-Klassen — HTML-Integration

Für volle Kontrolle nutzen Sie die eigenständige CSS-Datei mit semantischen Klassennamen. Kein JavaScript erforderlich — nur HTML und CSS.

Live-Button-Demo Live-Badge-Demo

Stylesheet einbinden

HTML

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

Dunkler Button

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>

Heller Button

HTML

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

Outline-Button

HTML

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

Modifikatoren

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>

Badge-Klassen

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>

React-Komponente

Fertige React-Komponente für Next.js, Vite oder jede React-App. Verwendet das offizielle SDK @uniauth/react oder lässt sich eigenständig nutzen.

Live-Button-Demo

Mit dem @uniauth/react SDK

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

Eigenständige Komponente

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

SVG-Button-Einbettungen

Vorgerenderte Button-SVGs — die einfachste Integration. Einfach als <img> oder <object> einbinden. Kein CSS oder JS nötig.

Live-Button-Demo

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

Verfügbare SVG-Dateien

Datei	Größe	Beschreibung
btn-signin-dark.svg	240 x 44	Dunkel „Sign in with UniAuth“
btn-signin-light.svg	240 x 44	Hell „Sign in with UniAuth“
btn-signin-outline.svg	240 x 44	Outline „Sign in with UniAuth“
btn-continue-dark.svg	260 x 44	Dunkel „Continue with UniAuth“
btn-continue-light.svg	260 x 44	Hell „Continue with UniAuth“
btn-icon-dark.svg	44 x 44	Dunkler Button nur mit Icon
btn-icon-light.svg	44 x 44	Heller Button nur mit Icon
btn-icon-outline.svg	44 x 44	Outline-Button nur mit Icon

Markenrichtlinien

Befolgen Sie diese Richtlinien, um die UniAuth-Marke in Ihrer Anwendung einheitlich darzustellen.

Richtig

Die offiziellen Button-SVGs oder CSS-Klassen unverändert verwenden
Mindestens 8 px Freiraum um den Button lassen
Die dunkle Variante auf hellen, die helle Variante auf dunklen Hintergründen verwenden
Den Button ähnlich groß wie andere Social-Login-Buttons in Ihrer Oberfläche gestalten
„Sign in with UniAuth“ oder „Continue with UniAuth“ als Button-Text verwenden
Das Schild-Icon einbinden — es ist das primäre Erkennungszeichen

Falsch

Form, Proportionen oder Strichstärke des Schild-Icons verändern
Farbflächen zum Schild hinzufügen — es ist immer eine reine Kontur-Marke
Das UniAuth-Logo nutzen, um ohne Partnerschaft eine Empfehlung zu suggerieren
Den Button kleiner als 36 px hoch darstellen oder den Text ändern
Den Button auf unruhigen Hintergründen mit geringem Kontrast platzieren
Die Marke drehen, verzerren oder mit Effekten (Schlagschatten, Glühen) versehen

Farbpalette

UniAuth verwendet eine monochrome Palette. Alle Markenelemente nutzen neutrale Grautöne — keine Akzentfarbe.

#0a0a0a

Schwarz

#171717

900

#404040

700

#737373

500

#d4d4d4

300

#fafafa

Weiß

Alle Downloads

Alle Ressourcen des Identitätskits, nach Typ geordnet.

Schild-Marken

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

Button-SVGs

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

Vertrauens-Badges

Flache Pill-Badges

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

Vertrauenssiegel

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

Integration

uniauth-buttons.css

CSS-Stylesheet (6 KB)

uniauth-widget.js

Widget-Skript (5 KB)

Komplettes Logo-Kit

PNG/SVG-Icons in mehreren Größen sowie vollständige Logos finden Sie außerdem im Verzeichnis /brand/.

Icon-SVG (dunkel)Icon-SVG (hell)Volles Logo (dunkel)Volles Logo (weiß)Icon 512 px (dunkel)Icon 512 px (hell)Favicon ICO Apple-Touch-Icon

Bereit zur Integration?

Registrieren Sie Ihre OAuth-Anwendung in der Entwicklerkonsole, um Ihre Client-ID zu erhalten, und fügen Sie die UniAuth-Anmeldung dann mit einer der obigen Methoden hinzu.

Entwicklerkonsole Dokumentation lesen API-Referenz

Marken- & Identitätskit

Schild-Marke

Anmelde-Buttons

Vertrauens-Badges

Flache Pill-Badges

Vertrauenssiegel

Schwebendes Badge & Vertrauensleiste

Schwebendes Eck-Badge

Footer-Vertrauensleiste

Widget — JavaScript zum Einbinden

Popup-Modus (empfohlen für Desktop)

Redirect-Modus

Automatische Erkennung (Standard)

Alle Optionen

Badge rendern

CSS-Klassen — HTML-Integration

Stylesheet einbinden

Dunkler Button

Heller Button

Outline-Button

Modifikatoren

Badge-Klassen

React-Komponente

Mit dem @uniauth/react SDK

Eigenständige Komponente

SVG-Button-Einbettungen

Verfügbare SVG-Dateien

Markenrichtlinien

Richtig

Falsch

Farbpalette

Alle Downloads

Schild-Marken

Button-SVGs

Vertrauens-Badges

Flache Pill-Badges

Vertrauenssiegel

Integration

Komplettes Logo-Kit

Bereit zur Integration?

Marken- & Identitätskit

Schild-Marke

Anmelde-Buttons

Vertrauens-Badges

Flache Pill-Badges

Vertrauenssiegel

Schwebendes Badge & Vertrauensleiste

Schwebendes Eck-Badge

Footer-Vertrauensleiste

Widget — JavaScript zum Einbinden

Popup-Modus (empfohlen für Desktop)

Redirect-Modus

Automatische Erkennung (Standard)

Alle Optionen

Badge rendern

CSS-Klassen — HTML-Integration

Stylesheet einbinden

Dunkler Button

Heller Button

Outline-Button

Modifikatoren

Badge-Klassen

React-Komponente

Mit dem @uniauth/react SDK

Eigenständige Komponente

SVG-Button-Einbettungen

Verfügbare SVG-Dateien

Markenrichtlinien

Richtig

Falsch

Farbpalette

Alle Downloads

Schild-Marken

Button-SVGs

Vertrauens-Badges

Flache Pill-Badges

Vertrauenssiegel

Integration

Komplettes Logo-Kit

Bereit zur Integration?