Schnellstart

Diese Anleitung führt dich durch die Integration der Auris-Authentifizierung in deine Anwendung von Grund auf. Am Ende hast du einen funktionierenden Login-Flow, der Benutzer zur gehosteten Auris-Login-Seite umleitet, den Callback verarbeitet und die Informationen des authentifizierten Benutzers anzeigt.

Geschätzte Zeit: 5–10 Minuten.

Voraussetzungen

Node.js 20+ (für JavaScript-, React- und Next.js-Integrationen)
PHP 7.4+ mit Composer (für PHP-Integrationen)
Ein Auris-Konto — melde dich unter deiner Auris-Konsolen-URL an
Ein bestehendes Anwendungsprojekt, dem du Authentifizierung hinzufügen möchtest

Schritt 1: Erstelle eine Anwendung in der Konsole

Bevor du ein SDK installierst, registriere deine Anwendung bei Auris, um eine Client-ID zu erhalten.

Melde dich bei der Auris-Konsole an.
Navigiere zu Anwendungen in der Seitenleiste.
Klicke auf Anwendung erstellen.
Wähle den Anwendungstyp:
- WEB — für Browser-basierte Apps (React, Next.js, Vue, Angular, Server-Rendering)
- MOBILE — für native iOS- oder Android-Apps
- M2M — für Server-zu-Server- oder CLI-Tool-Integrationen (kein Benutzer-Login)
Gib einen Anzeigenamen für deine Anwendung ein (z. B. Meine App - Entwicklung).
Füge deine Weiterleitungs-URI hinzu — die URL, zu der Auris nach einem erfolgreichen Login weiterleitet:
- Lokale Entwicklung: http://localhost:3000/callback
- Produktion: https://ihredomain.com/callback
Klicke auf Erstellen.

Kopiere nach der Erstellung deine Client-ID von der Anwendungsdetailseite. Du benötigst sie in den nächsten Schritten.

Lege dein Client-Secret niemals im browser-seitigen JavaScript offen. Für die Anwendungstypen WEB und MOBILE verwendet Auris PKCE (Proof Key for Code Exchange) und benötigt kein Client-Secret. Client-Secrets werden nur für M2M (client_credentials)-Anwendungen verwendet, die serverseitig ausgeführt werden.

Schritt 2: SDK installieren

Wähle das SDK, das zu deinem Stack passt. Alle Pakete werden auf npm (JavaScript/TypeScript) oder Packagist (PHP) veröffentlicht.

Next.js


npm install @auris/nextjs @auris/react @auris/js

React


npm install @auris/react @auris/js

JavaScript


npm install @auris/js

PHP


composer require auris/sdk

@auris/nextjs re-exportiert alles von @auris/react und @auris/js, daher benötigst du in einem Next.js-Projekt nur einen einzigen Import-Pfad.

Schritt 3: Auris konfigurieren

Initialisiere den Auris-Client mit deiner Tenant-Domain und Anwendungs-Client-ID.

Next.js

Füge AurisProvider zu deinem Root-layout.tsx hinzu. Der Provider übernimmt Token-Speicherung, Aktualisierung und den Auth-State-Kontext für alle untergeordneten Komponenten.


// app/layout.tsx
import { AurisProvider } from '@auris/nextjs'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="de">
      <body>
        <AurisProvider
          domain="https://auth.ihredomain.com"
          clientId="IHRE_CLIENT_ID"
          redirectUri="http://localhost:3000/callback"
        >
          {children}
        </AurisProvider>
      </body>
    </html>
  )
}

Füge dann die Auris-Middleware hinzu, um Routen zu schützen. Erstelle oder aktualisiere middleware.ts im Projektstamm:


// middleware.ts
import { aurisMiddleware } from '@auris/nextjs/middleware'
 
export default aurisMiddleware({
  domain: process.env.AURIS_DOMAIN!,
  clientId: process.env.AURIS_CLIENT_ID!,
  // Routen, die Authentifizierung erfordern
  protectedPaths: ['/dashboard', '/einstellungen', '/profil'],
  // Routen, die Auth-Prüfungen überspringen (OAuth-Callback muss öffentlich sein)
  publicPaths: ['/callback', '/login', '/'],
})
 
export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}

React

Umschließe deinen Anwendungsstamm mit AurisProvider:


// src/main.tsx (oder src/index.tsx)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { AurisProvider } from '@auris/react'
import App from './App'
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AurisProvider
      domain="https://auth.ihredomain.com"
      clientId="IHRE_CLIENT_ID"
      redirectUri="http://localhost:3000/callback"
    >
      <App />
    </AurisProvider>
  </React.StrictMode>
)

JavaScript

Erstelle eine AurisClient-Instanz als Singleton:


// lib/auris.ts
import { AurisClient } from '@auris/js'
 
export const auris = new AurisClient({
  domain: 'https://auth.ihredomain.com',
  clientId: 'IHRE_CLIENT_ID',
  redirectUri: 'http://localhost:3000/callback',
})

PHP


<?php
// config/auris.php
require_once __DIR__ . '/vendor/autoload.php';
 
use Auris\AurisClient;
use Auris\AurisConfig;
 
$config = new AurisConfig(
    'https://auth.ihredomain.com',       // domain
    'IHRE_CLIENT_ID',                    // clientId
    'http://localhost:8000/callback.php' // redirectUri
    // clientSecret ist standardmäßig '' — nicht benötigt für WEB/PKCE-Apps
);
 
$auris = new AurisClient($config);

Next.js


'use client'
 
import { useAuris } from '@auris/nextjs'
 
export function LoginButton() {
  const { loginWithRedirect } = useAuris()
 
  return (
    <button onClick={() => loginWithRedirect()}>
      Anmelden
    </button>
  )
}

React


import { useAuris } from '@auris/react'
 
export function LoginButton() {
  const { loginWithRedirect } = useAuris()
 
  return (
    <button onClick={() => loginWithRedirect()}>
      Anmelden
    </button>
  )
}

JavaScript


import { auris } from './lib/auris'
 
document.getElementById('login-button')?.addEventListener('click', async () => {
  await auris.loginWithRedirect()
})

PHP


<?php
// login.php
require_once 'config/auris.php';
 
// Leitet den Browser zur gehosteten Auris-Login-Seite weiter.
// PKCE-Challenge und CSRF-State werden automatisch erzeugt und gespeichert.
header('Location: ' . $auris->getLoginUrl());
exit;

Schritt 5: Callback verarbeiten

Nach der Authentifizierung leitet Auris den Benutzer mit einem Autorisierungscode zurück zu deiner redirectUri. Deine Anwendung muss diesen Code gegen Tokens eintauschen.

Next.js


// app/callback/page.tsx
'use client'
 
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useAuris } from '@auris/nextjs'
 
export default function CallbackPage() {
  const { isAuthenticated, isLoading, error } = useAuris()
  const router = useRouter()
 
  useEffect(() => {
    // AurisProvider führt den Code-Austausch beim Mount automatisch durch.
    // Sobald die Sitzung bereit ist, die Callback-Seite verlassen.
    if (!isLoading && isAuthenticated) {
      router.replace('/dashboard')
    }
  }, [isLoading, isAuthenticated, router])
 
  if (error) {
    return <p>Login fehlgeschlagen: {error.message}</p>
  }
 
  return <p>Login wird abgeschlossen...</p>
}

React


import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuris } from '@auris/react'
 
export function CallbackPage() {
  const { isAuthenticated, isLoading, error } = useAuris()
  const navigate = useNavigate()
 
  useEffect(() => {
    // AurisProvider führt den Code-Austausch beim Mount automatisch durch.
    // Sobald die Sitzung bereit ist, die Callback-Seite verlassen.
    if (!isLoading && isAuthenticated) {
      navigate('/dashboard', { replace: true })
    }
  }, [isLoading, isAuthenticated, navigate])
 
  if (error) {
    return <p>Login fehlgeschlagen: {error.message}</p>
  }
 
  return <p>Login wird abgeschlossen...</p>
}

JavaScript


// callback.ts — dieses Skript auf der Callback-Seite ausführen
import { auris } from './lib/auris'
 
async function handleCallback() {
  await auris.handleRedirectCallback()
  // Bei Bedarf das Ziel vor loginWithRedirect() in sessionStorage speichern
  window.location.replace('/dashboard')
}
 
handleCallback()

PHP


<?php
// callback.php
require_once 'config/auris.php';
 
use Auris\AurisException;
 
session_start();
 
try {
    // Autorisierungscode gegen Tokens eintauschen.
    // Validiert den CSRF-State und sendet den PKCE-Code-Verifier automatisch.
    $tokens = $auris->handleCallback($_GET['code'], $_GET['state']);
 
    // Tokens in der Session speichern
    $_SESSION['auris_access_token'] = $tokens->accessToken;
    $_SESSION['auris_refresh_token'] = $tokens->refreshToken;
 
    // Zur App weiterleiten
    header('Location: /dashboard.php');
    exit;
} catch (AurisException $e) {
    // Auth-Fehler behandeln (State-Mismatch oder Token-Endpoint-Fehler)
    echo 'Authentifizierung fehlgeschlagen: ' . htmlspecialchars($e->getMessage());
}

Schritt 6: Benutzerinformationen anzeigen

Next.js


'use client'
 
import { useUser, useAuris } from '@auris/nextjs'
 
export default function DashboardPage() {
  const { user, isLoading } = useUser()
  const { isAuthenticated } = useAuris()
 
  if (isLoading) return <p>Laden...</p>
  if (!isAuthenticated) return <p>Du bist nicht angemeldet.</p>
 
  return (
    <div>
      <h1>Willkommen, {user?.firstName ?? user?.email}</h1>
      <p>E-Mail: {user?.email}</p>
      <p>Rollen: {user?.roles?.join(', ')}</p>
    </div>
  )
}

React


import { useUser, useAuris } from '@auris/react'
 
export function UserProfile() {
  const { user, isLoading } = useUser()
  const { isAuthenticated } = useAuris()
 
  if (isLoading) return <p>Laden...</p>
  if (!isAuthenticated || !user) return <p>Du bist nicht angemeldet.</p>
 
  return (
    <div>
      <h1>Willkommen, {user.firstName ?? user.email}</h1>
      <p>E-Mail: {user.email}</p>
      <p>Rollen: {user.roles?.join(', ')}</p>
    </div>
  )
}

JavaScript


import { auris } from './lib/auris'
 
async function renderDashboard() {
  const user = await auris.getUser()
 
  if (!user) {
    await auris.loginWithRedirect()
    return
  }
 
  document.getElementById('user-name')!.textContent =
    user.firstName ?? user.email ?? 'Benutzer'
  document.getElementById('user-email')!.textContent = user.email ?? ''
}
 
renderDashboard()

PHP


<?php
// dashboard.php
require_once 'config/auris.php';
 
use Auris\AurisException;
 
session_start();
 
if (empty($_SESSION['auris_access_token'])) {
    header('Location: /login.php');
    exit;
}
 
// Access-Token aktualisieren, falls es abgelaufen ist
if ($auris->isTokenExpired($_SESSION['auris_access_token'])) {
    try {
        $refreshed = $auris->refreshToken($_SESSION['auris_refresh_token']);
        $_SESSION['auris_access_token'] = $refreshed->accessToken;
    } catch (AurisException $e) {
        header('Location: /login.php');
        exit;
    }
}
 
try {
    // Token validieren und Benutzerprofil abrufen
    $user = $auris->getUser($_SESSION['auris_access_token']);
} catch (AurisException $e) {
    header('Location: /login.php');
    exit;
}
?>
<h1>Willkommen, <?= htmlspecialchars($user->firstName ?? $user->email) ?></h1>
<p>E-Mail: <?= htmlspecialchars($user->email) ?></p>

Schritt 7: Abmelde-Button hinzufügen

Next.js


'use client'
 
import { useAuris } from '@auris/nextjs'
 
export function LogoutButton() {
  const { logout } = useAuris()
 
  return (
    <button onClick={() => logout()}>
      {/* Post-Logout-Weiterleitung im Router behandeln */}
      Abmelden
    </button>
  )
}

React


import { useAuris } from '@auris/react'
 
export function LogoutButton() {
  const { logout } = useAuris()
 
  return (
    <button onClick={() => logout()}>
      {/* Post-Logout-Weiterleitung im Router behandeln */}
      Abmelden
    </button>
  )
}

JavaScript


import { auris } from './lib/auris'
 
document.getElementById('logout-button')?.addEventListener('click', () => {
  // Post-Logout-Weiterleitung im Router behandeln
  auris.logout()
})

PHP


<?php
// logout.php
require_once 'config/auris.php';
 
use Auris\AurisException;
 
session_start();
 
// Access-Token widerrufen und die Auris-Sitzung serverseitig beenden
if (!empty($_SESSION['auris_access_token'])) {
    try {
        $auris->logout($_SESSION['auris_access_token']);
    } catch (AurisException $e) {
        // Token bereits ungültig oder widerrufen — kann ignoriert werden
    }
}
 
// Lokale Session löschen
session_destroy();
 
header('Location: /');
exit;

Umgebungsvariablen

Speichere deine Auris-Konfiguration in Umgebungsvariablen, nicht im Quellcode:


# .env.local
 
# Clientseitig: von AurisProvider im Browser-Bundle verwendet
NEXT_PUBLIC_AURIS_DOMAIN=https://auth.ihredomain.com
NEXT_PUBLIC_AURIS_CLIENT_ID=ihre_client_id_hier
 
# Serverseitig: von aurisMiddleware() und getSession() verwendet — niemals an den Browser exponiert
AURIS_DOMAIN=https://auth.ihredomain.com
AURIS_CLIENT_ID=ihre_client_id_hier
 
# Nur für serverseitige M2M-Clients (niemals im Browser exponieren)
AURIS_CLIENT_SECRET=ihr_client_secret_hier
 
# Für JWT-Verifizierung ohne Netzwerkaufruf (optional, empfohlen)
AURIS_JWKS_URL=https://auth.ihredomain.com/.well-known/jwks.json

Umgebungsvariablen mit dem Präfix NEXT_PUBLIC_ werden in das Browser-Bundle eingebettet und sind öffentlich. Nur domain und clientId sollten öffentlich sein. Lege niemals AURIS_CLIENT_SECRET mit dem Präfix NEXT_PUBLIC_ offen.

Nächste Schritte

Jetzt, da du einen grundlegenden Login-Flow hast, erkunde die für deine Anwendung relevantesten Funktionen:

Authentifizierungsmethoden

Autorisierung

Benutzerverwaltung

SDKs und API

Schnellstart

Voraussetzungen

Schritt 1: Erstelle eine Anwendung in der Konsole

Schritt 2: SDK installieren

Next.js

React

JavaScript

PHP

Schritt 3: Auris konfigurieren

Next.js

React

JavaScript

PHP

Schritt 4: Login-Button hinzufügen

Next.js

React

JavaScript

PHP

Schritt 5: Callback verarbeiten

Next.js

React

JavaScript

PHP

Schritt 6: Benutzerinformationen anzeigen

Next.js

React

JavaScript

PHP

Schritt 7: Abmelde-Button hinzufügen

Next.js

React

JavaScript

PHP

Umgebungsvariablen

Nächste Schritte