Client Library Übersicht

Client Library

OAuth Auth Cloudflare bietet mehrere Client-Bibliotheken für unterschiedliche Anwendungsfälle.

Verfügbare Bibliotheken

1. Simple Login Button

Am einfachsten - nur 2 Zeilen Code!

<script
  src="https://auth.deine-domain.de/client/simple-login-button.js"
  data-auth-url="https://auth.deine-domain.de"
></script>
<div id="auth-button"></div>

Ideal für: Schnelle Integration, Prototypen, einfache Websites

Mehr erfahren →

2. Auth Client

Vollständige JavaScript-API für erweiterte Integrationen.

import { AuthClient } from './auth-client.js';

const auth = new AuthClient({
  authServerUrl: 'https://auth.deine-domain.de'
});

const user = await auth.getUser();

Ideal für: SPAs, komplexe Anwendungen, Custom UI

Mehr erfahren →

3. Auth Widget

Vorgefertigte UI-Komponenten mit customizable Design.

import { AuthWidget } from './auth-widget.js';

const widget = new AuthWidget({
  authServerUrl: 'https://auth.deine-domain.de',
  container: document.getElementById('auth-widget')
});

Ideal für: Schnelle UI-Integration, konsistentes Design

Mehr erfahren →

4. WebAuthn Client

Passkey-Management für passwortlose Authentifizierung.

import { WebAuthnClient } from './webauthn-client.js';

const webauthn = new WebAuthnClient({
  authServerUrl: 'https://auth.deine-domain.de'
});

await webauthn.addPasskey();

Ideal für: WebAuthn-Integration, Passkey-Management

Mehr erfahren →

Installation

CDN (empfohlen für schnelle Integration)

<script src="https://auth.deine-domain.de/client/simple-login-button.js"></script>

ES Modules

import { AuthClient } from 'https://auth.deine-domain.de/client/auth-client.js';

NPM (für Build-Tools)

Die Client-Bibliotheken sind auch als ES-Module verfügbar, die du direkt importieren kannst:

// Kopiere die Dateien aus dem client/ Verzeichnis in dein Projekt
import { AuthClient } from './client/auth-client.js';

Gemeinsame Features

Alle Client-Bibliotheken bieten:

• ✅ Auto-Refresh: Automatisches Token-Refresh
• ✅ Storage: Automatisches Token-Management im LocalStorage
• ✅ Events: Event-basierte Benachrichtigungen
• ✅ CORS: Cross-Origin-Ready
• ✅ TypeScript-Ready: Vollständig typisiert (mit JSDoc)

Nächste Schritte

• Simple Login Button - Schnellste Integration
• Auth Client API - Vollständige Kontrolle
• WebAuthn Client - Passkeys hinzufügen