Social Login

Auris unterstützt neun Social Identity Provider von Haus aus. Wenn Social Login für einen Anbieter aktiviert ist, erscheint der entsprechende Login-Button automatisch auf der gehosteten Login-Seite – ohne Änderungen am Frontend-Code.

Social Login verwendet denselben OAuth2 Authorization Code + PKCE Flow wie Hosted Login. Deine SDK-Konfiguration ändert sich nicht – nur die Console-Konfiguration für jeden Anbieter ist erforderlich.

Unterstützte Anbieter: Google, GitHub, Microsoft, Apple, Facebook, Discord, LinkedIn, Twitter/X, Slack

Console-Einrichtung

Navigiere in der Auris Console zu Authentication → Social Providers.

Anbieter aktivieren

Klicke auf den Schalter neben dem Anbieter, den du aktivieren möchtest. Dadurch werden die Konfigurationsfelder angezeigt.

Client ID und Client Secret konfigurieren

Gib die OAuth-Anmeldeinformationen ein, die du vom Developer-Portal des Anbieters erhalten hast (siehe anbieterspezifische Anweisungen unten).

Speichern und testen

Klicke auf Save. Der Anbieter-Button erscheint sofort auf der gehosteten Login-Seite. Verwende die Schaltfläche Test, um die Konfiguration vor der Veröffentlichung zu überprüfen.

Du musst deine SDK-Initialisierung oder Weiterleitungskonfiguration nicht ändern, wenn du Social Provider hinzufügst. Die gehostete Login-Seite verwaltet die anbieterspezifischen OAuth-Flows intern.

Anbieter-Einrichtungsanweisungen

Google

Gehe zur Google Cloud Console → APIs & Services → Credentials
Klicke auf Create Credentials → OAuth 2.0 Client ID
Setze den Anwendungstyp auf Web application
Füge https://auth.yourdomain.com/api/auth/social/google/callback zu Authorized redirect URIs hinzu
Kopiere Client ID und Client Secret in die Auris Console

Stelle sicher, dass die Google People API in deinem Google Cloud-Projekt aktiviert ist.

GitHub

Gehe zu GitHub Developer Settings → OAuth Apps → New OAuth App
Setze Authorization callback URL auf https://auth.yourdomain.com/api/auth/social/github/callback
Kopiere die Client ID und generiere ein Client Secret

Microsoft

Gehe zum Azure Portal → Azure Active Directory → App registrations → New registration
Setze die Redirect-URI auf https://auth.yourdomain.com/api/auth/social/microsoft/callback
Erstelle unter Certificates & secrets ein neues Client-Secret
Kopiere Application (client) ID und den Secret-Wert

Um Login von beliebigen Microsoft-Tenants (nicht nur deinem eigenen) zu erlauben, wähle bei der App-Registrierung Accounts in any organizational directory and personal Microsoft accounts.

Apple

Gehe zum Apple Developer Portal → Certificates, Identifiers & Profiles → Identifiers
Erstelle eine neue Services ID und aktiviere Sign in with Apple
Konfiguriere die Redirect-URL: https://auth.yourdomain.com/api/auth/social/apple/callback
Lade den privaten Schlüssel (.p8-Datei) unter Keys herunter
Gib in der Auris Console deine Team ID, Key ID, Services ID (Client ID) und den Inhalt des privaten Schlüssels ein

Apple erfordert eine verifizierte Domain und eine echte HTTPS-URL für die Redirect-URI. Localhost funktioniert im Produktionsmodus nicht mit Apple Sign In.

Facebook

Gehe zu Meta for Developers → My Apps → Create App
Wähle Consumer als App-Typ und füge das Produkt Facebook Login hinzu
Setze Valid OAuth Redirect URIs auf https://auth.yourdomain.com/api/auth/social/facebook/callback
Kopiere App ID und App Secret aus dem App-Dashboard

Stelle sicher, dass deine Facebook-App im Live-Modus ist, damit Benutzer außerhalb deines Entwicklerteams sich authentifizieren können.

Discord

Gehe zum Discord Developer Portal → New Application
Navigiere zu OAuth2 → Redirects und füge https://auth.yourdomain.com/api/auth/social/discord/callback hinzu
Kopiere Client ID und Client Secret

Gehe zum LinkedIn Developer Portal → Create App
Füge unter Auth https://auth.yourdomain.com/api/auth/social/linkedin/callback zu Authorized redirect URLs hinzu
Fordere die OAuth-Scopes openid, profile und email an
Kopiere Client ID und Client Secret

Twitter / X

Gehe zum X Developer Portal → Projects & Apps → Create App
Aktiviere OAuth 2.0 unter User authentication settings
Setze die Callback-URL auf https://auth.yourdomain.com/api/auth/social/twitter/callback
Setze App-Berechtigungen auf Read (für grundlegenden Profilzugriff)
Kopiere Client ID und Client Secret

Twitter/X verwendet nativ OAuth 2.0 mit PKCE. Auris verwaltet dies transparent.

Slack

Gehe zur Slack API → Create New App → From scratch
Füge unter OAuth & Permissions https://auth.yourdomain.com/api/auth/social/slack/callback zu Redirect URLs hinzu
Fordere Scopes an: openid, profile, email
Kopiere unter Basic Information Client ID und Client Secret

SDK-Verwendung

Bei Verwendung der Auris SDKs kannst du einen bestimmten Social Provider direkt ansprechen – ohne den Anbieterauswahlbildschirm der gehosteten Login-Seite zu durchlaufen:

JavaScript


import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.yourdomain.com',
  clientId: 'your-client-id',
  redirectUri: 'http://localhost:3000/callback',
})
 
// Direkt zum Google-Login weiterleiten
await auris.loginWithSocial('google')
 
// Andere Anbieter-Kennungen:
// 'github', 'microsoft', 'apple', 'facebook', 'discord', 'linkedin', 'twitter', 'slack'
 
// Callback verarbeiten (identisch mit Standard-Hosted-Login)
const result = await auris.handleRedirectCallback()
console.log(result.user)

React


import { useAuris } from '@auris/react'
 
function SocialLoginButtons() {
  const { loginWithSocial } = useAuris()
 
  return (
    <div>
      <button onClick={() => loginWithSocial('google')}>
        Mit Google fortfahren
      </button>
      <button onClick={() => loginWithSocial('github')}>
        Mit GitHub fortfahren
      </button>
      <button onClick={() => loginWithSocial('microsoft')}>
        Mit Microsoft fortfahren
      </button>
    </div>
  )
}

Next.js


'use client'
import { useAuris } from '@auris/react'
 
export function SocialLoginSection() {
  const { loginWithSocial } = useAuris()
 
  const providers = [
    { id: 'google', label: 'Google' },
    { id: 'github', label: 'GitHub' },
    { id: 'microsoft', label: 'Microsoft' },
    { id: 'discord', label: 'Discord' },
  ] as const
 
  return (
    <div className="grid grid-cols-2 gap-3">
      {providers.map(({ id, label }) => (
        <button
          key={id}
          onClick={() => loginWithSocial(id)}
          className="btn-outline"
        >
          Mit {label} fortfahren
        </button>
      ))}
    </div>
  )
}

Kontoverknüpfung

Wenn sich ein Benutzer über einen Social Provider mit einer E-Mail-Adresse authentifiziert, die bereits in Auris vorhanden ist, wird die Social-Identität automatisch mit dem bestehenden Konto verknüpft. Der Benutzer erstellt kein doppeltes Konto.

Das bedeutet, ein Benutzer kann:

Ein Konto mit E-Mail/Passwort erstellen
Sich später mit Google (gleiche E-Mail) anmelden — und landet im gleichen Konto
Künftig mit beiden Methoden anmelden

Automatische Verknüpfung deaktivieren: Setze allowAccountLinking: false in Console → Authentication → Social Providers → Advanced. Bei deaktivierter Verknüpfung wird ein zweites Konto für die Social-Identität erstellt, oder ein Fehler wird zurückgegeben, wenn deine Tenant-Konfiguration doppelte E-Mails verhindert.

Benutzerprofil-Daten

Die folgenden Felder werden beim ersten Login aus Social-Provider-Profilen befüllt und optional bei nachfolgenden Logins aktualisiert:

Feld	Google	GitHub	Microsoft	Apple	Andere
E-Mail	Ja	Ja (wenn öffentlich)	Ja	Ja	Variiert
Vorname	Ja	Nein	Ja	Ja (nur beim ersten Mal)	Variiert
Nachname	Ja	Nein	Ja	Ja (nur beim ersten Mal)	Variiert
Avatar-URL	Ja	Ja	Ja	Nein	Variiert
Benutzername	Nein	Ja (Login)	Nein	Nein	Variiert

Apple stellt den Namen des Benutzers nur beim allerersten Login bereit. Nachfolgende Apple-Logins senden keine Namensdaten erneut. Auris speichert den Namen vom ersten Login und verwendet ihn bei allen nachfolgenden Sitzungen.

Wenn Social Provider in der Console aktiviert sind, erscheinen ihre Login-Buttons automatisch auf der gehosteten Auris-Login-Seite. Es sind keine Änderungen am Anwendungscode erforderlich. Die Buttons sind gemäß den Markenrichtlinien des jeweiligen Anbieters gestaltet.

Um die Button-Reihenfolge anzupassen oder bestimmte Anbieter von der gehosteten Seite auszublenden (während die SDK-Methode loginWithSocial() verfügbar bleibt), verwende Console → Branding → Login Page → Social Provider Display Order.