@micha.bigler/ui-core-micha 1.2.1 → 1.2.3

package/dist/auth/authApi.js

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig';
-// Helper to normalise error messages from API responses
+// -----------------------------
+// Error helper
+// -----------------------------
 function extractErrorMessage(error) {
     var _a;
     const data = (_a = error.response) === null || _a === void 0 ? void 0 : _a.data;
@@ -15,65 +17,64 @@ function extractErrorMessage(error) {
     }
     return 'An error occurred. Please try again.';
 }
-// Helper to get CSRF token from cookies manually
+// -----------------------------
+// CSRF helper
+// -----------------------------
 function getCsrfToken() {
-    if (!document.cookie)
+    if (typeof document === 'undefined' || !document.cookie) {
         return null;
+    }
     const match = document.cookie.match(/csrftoken=([^;]+)/);
     return match ? match[1] : null;
 }
+// -----------------------------
+// WebAuthn capability helpers
+// -----------------------------
 const hasJsonWebAuthn = typeof window !== 'undefined' &&
-    window.PublicKeyCredential &&
+    typeof window.PublicKeyCredential !== 'undefined' &&
     typeof window.PublicKeyCredential.parseCreationOptionsFromJSON === 'function' &&
     typeof window.PublicKeyCredential.parseRequestOptionsFromJSON === 'function';
 function ensureWebAuthnSupport() {
-    if (!window.PublicKeyCredential || !navigator.credentials) {
+    if (typeof window === 'undefined' ||
+        typeof navigator === 'undefined' ||
+        !window.PublicKeyCredential ||
+        !navigator.credentials) {
         throw new Error('Passkeys are not supported in this browser.');
     }
 }
-/**
- * Fetches the current authenticated user from your own User API.
- */
+// -----------------------------
+// User-related helpers
+// -----------------------------
 export async function fetchCurrentUser() {
     const res = await axios.get(`${USERS_BASE}/current/`, {
         withCredentials: true,
     });
     return res.data;
 }
-/**
- * Updates the user profile fields.
- */
 export async function updateUserProfile(data) {
     const res = await axios.patch(`${USERS_BASE}/current/`, data, {
         withCredentials: true,
     });
     return res.data;
 }
-/**
- * Logs a user in using email/password via allauth headless.
- */
+// -----------------------------
+// Authentication: password
+// -----------------------------
 export async function loginWithPassword(email, password) {
     try {
-        await axios.post(`${HEADLESS_BASE}/auth/login`, {
-            email,
-            password,
-        }, { withCredentials: true });
+        await axios.post(`${HEADLESS_BASE}/auth/login`, { email, password }, { withCredentials: true });
     }
     catch (error) {
         if (error.response && error.response.status === 409) {
-            // User is already logged in, continue and fetch current user
+            // Already logged in: continue and fetch current user
         }
         else {
             throw new Error(extractErrorMessage(error));
         }
     }
     const user = await fetchCurrentUser();
-    // Normalise return shape so callers always get { user }
     return { user };
 }
-/**
- * Requests a password reset email via allauth headless.
- */
 export async function requestPasswordReset(email) {
     try {
         await axios.post(`${USERS_BASE}/reset-request/`, { email }, { withCredentials: true });
@@ -82,23 +83,15 @@ export async function requestPasswordReset(email) {
         throw new Error(extractErrorMessage(error));
     }
 }
-/**
- * Sets a new password using a reset key (from email link).
- */
+// (Falls du es noch brauchst: klassischer allauth-Key-Flow)
 export async function resetPasswordWithKey(key, newPassword) {
     try {
-        await axios.post(`${HEADLESS_BASE}/auth/password/reset/key`, {
-            key,
-            password: newPassword,
-        }, { withCredentials: true });
+        await axios.post(`${HEADLESS_BASE}/auth/password/reset/key`, { key, password: newPassword }, { withCredentials: true });
     }
     catch (error) {
         throw new Error(extractErrorMessage(error));
     }
 }
-/**
- * Changes the password for an authenticated user.
- */
 export async function changePassword(currentPassword, newPassword) {
     try {
         await axios.post(`${HEADLESS_BASE}/account/password/change`, {
@@ -110,9 +103,9 @@ export async function changePassword(currentPassword, newPassword) {
         throw new Error(extractErrorMessage(error));
     }
 }
-/**
- * Logs the user out via allauth headless.
- */
+// -----------------------------
+// Logout / Session
+// -----------------------------
 export async function logoutSession() {
     try {
         const headers = {};
@@ -127,35 +120,36 @@ export async function logoutSession() {
     }
     catch (error) {
         if (error.response && [401, 404, 410].includes(error.response.status)) {
+            // Session already gone, nothing to do
             return;
         }
         // eslint-disable-next-line no-console
         console.error('Logout error:', error);
     }
 }
-/**
- * Starts an OAuth social login flow for the given provider.
- * Provider examples: "google", "microsoft".
- * * FIX:
- * 1. Uses POST instead of GET (standard for headless init flows).
- * 2. Uses the correct path '/providers/{provider}/login'.
- */
+export async function fetchHeadlessSession() {
+    const res = await axios.get(`${HEADLESS_BASE}/auth/session`, {
+        withCredentials: true,
+    });
+    return res.data;
+}
+// -----------------------------
+// Social login
+// -----------------------------
 export function startSocialLogin(provider) {
+    if (typeof window === 'undefined') {
+        throw new Error('Social login is only available in a browser environment.');
+    }
+    // Classic allauth HTML flow
     window.location.href = `/accounts/${provider}/login/?process=login`;
 }
-/**
- * Prüft, ob ein Access-Code gültig ist.
- * Erwartet: POST /api/access-codes/validate/ { code }
- * Antwort: { valid: true/false } oder 400 mit detail-Fehler.
- */
+// -----------------------------
+// Invitation / access code
+// -----------------------------
 export async function validateAccessCode(code) {
     const res = await axios.post(`${ACCESS_CODES_BASE}/validate/`, { code }, { withCredentials: true });
-    return res.data; // { valid: bool } oder Error
+    return res.data;
 }
-/**
- * Fordert eine Einladung mit optionalem Access-Code an.
- * Backend prüft den Code noch einmal serverseitig.
- */
 export async function requestInviteWithCode(email, accessCode) {
     const payload = { email };
     if (accessCode) {
@@ -164,15 +158,9 @@ export async function requestInviteWithCode(email, accessCode) {
     const res = await axios.post(`${USERS_BASE}/invite/`, payload, { withCredentials: true });
     return res.data;
 }
-/**
- * Loads the current session information directly from allauth headless.
- */
-export async function fetchHeadlessSession() {
-    const res = await axios.get(`${HEADLESS_BASE}/auth/session`, {
-        withCredentials: true,
-    });
-    return res.data;
-}
+// -----------------------------
+// Custom password-reset via uid/token
+// -----------------------------
 export async function verifyResetToken(uid, token) {
     const res = await axios.get(`${USERS_BASE}/password-reset/${uid}/${token}/`, { withCredentials: true });
     return res.data;
@@ -181,16 +169,22 @@ export async function setNewPassword(uid, token, newPassword) {
     const res = await axios.post(`${USERS_BASE}/password-reset/${uid}/${token}/`, { new_password: newPassword }, { withCredentials: true });
     return res.data;
 }
-// Start: Optionen für Credential-Erzeugung holen
+// -----------------------------
+// WebAuthn / Passkeys: register
+// -----------------------------
 async function registerPasskeyStart({ passwordless = true } = {}) {
     ensureWebAuthnSupport();
     const res = await axios.get(`${HEADLESS_BASE}/account/authenticators/webauthn`, {
         params: passwordless ? { passwordless: true } : {},
         withCredentials: true,
     });
-    return res.data; // JSON-Options vom Server
+    const data = res.data || {};
+    // allauth.headless: { creation_options: { publicKey: { ... } } }
+    const creationOptionsJson = (data.creation_options && data.creation_options.publicKey) ||
+        data.creation_options ||
+        data;
+    return creationOptionsJson;
 }
-// Complete: Credential an Server schicken
 async function registerPasskeyComplete(credentialJson, name = 'Passkey') {
     const res = await axios.post(`${HEADLESS_BASE}/account/authenticators/webauthn`, {
         credential: credentialJson,
@@ -198,53 +192,93 @@ async function registerPasskeyComplete(credentialJson, name = 'Passkey') {
     }, { withCredentials: true });
     return res.data;
 }
-// High-level Helper, den das UI aufruft
 export async function registerPasskey(name = 'Passkey') {
     ensureWebAuthnSupport();
-    const optionsJson = await registerPasskeyStart({ passwordless: true });
     if (!hasJsonWebAuthn) {
-        throw new Error('Passkey JSON helpers not available in this browser.');
+        throw new Error('Passkey JSON helpers are not available in this browser.');
+    }
+    const creationOptionsJson = await registerPasskeyStart({ passwordless: true });
+    let credential;
+    try {
+        const publicKeyOptions = window.PublicKeyCredential.parseCreationOptionsFromJSON(creationOptionsJson);
+        credential = await navigator.credentials.create({
+            publicKey: publicKeyOptions,
+        });
+    }
+    catch (err) {
+        if (err && err.name === 'NotAllowedError') {
+            throw new Error('Passkey creation was cancelled by the user.');
+        }
+        throw err;
     }
-    const publicKeyOptions = window.PublicKeyCredential.parseCreationOptionsFromJSON(optionsJson);
-    const credential = await navigator.credentials.create({
-        publicKey: publicKeyOptions,
-    });
     if (!credential) {
         throw new Error('Passkey creation was cancelled.');
     }
     const credentialJson = credential.toJSON();
     return registerPasskeyComplete(credentialJson, name);
 }
+// -----------------------------
+// WebAuthn / Passkeys: login
+// -----------------------------
 async function loginWithPasskeyStart() {
     ensureWebAuthnSupport();
     const res = await axios.get(`${HEADLESS_BASE}/auth/webauthn/login`, { withCredentials: true });
-    return res.data;
+    const data = res.data || {};
+    // allauth.headless: { request_options: { publicKey: { ... } } }
+    const requestOptionsJson = (data.request_options && data.request_options.publicKey) ||
+        data.request_options ||
+        data;
+    return requestOptionsJson;
 }
 async function loginWithPasskeyComplete(credentialJson) {
     const res = await axios.post(`${HEADLESS_BASE}/auth/webauthn/login`, { credential: credentialJson }, { withCredentials: true });
     return res.data;
 }
-// Public API, die du im UI verwendest
 export async function loginWithPasskey() {
     ensureWebAuthnSupport();
-    const optionsJson = await loginWithPasskeyStart();
     if (!hasJsonWebAuthn) {
-        throw new Error('Passkey JSON helpers not available in this browser.');
+        throw new Error('Passkey JSON helpers are not available in this browser.');
+    }
+    const requestOptionsJson = await loginWithPasskeyStart();
+    let assertion;
+    try {
+        const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptionsJson);
+        assertion = await navigator.credentials.get({
+            publicKey: publicKeyOptions,
+        });
+    }
+    catch (err) {
+        if (err && err.name === 'NotAllowedError') {
+            throw new Error('Passkey authentication was cancelled by the user.');
+        }
+        throw err;
     }
-    const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(optionsJson);
-    const assertion = await navigator.credentials.get({
-        publicKey: publicKeyOptions,
-    });
     if (!assertion) {
         throw new Error('Passkey authentication was cancelled.');
     }
     const credentialJson = assertion.toJSON();
-    // Allauth kann hier 200 (eingeloggt) oder 401 (z.B. Email noch nicht verifiziert) liefern :contentReference[oaicite:5]{index=5}
-    await loginWithPasskeyComplete(credentialJson);
-    // Danach wie bei Passwort-Login aktuellen User laden
-    const user = await fetchCurrentUser();
-    return user;
+    let postError = null;
+    try {
+        await loginWithPasskeyComplete(credentialJson);
+    }
+    catch (err) {
+        // For example 401 although credential looked fine
+        postError = err;
+    }
+    try {
+        const user = await fetchCurrentUser();
+        return { user };
+    }
+    catch (err) {
+        if (postError) {
+            throw new Error(extractErrorMessage(postError));
+        }
+        throw new Error(extractErrorMessage(err));
+    }
 }
+// -----------------------------
+// Aggregated API object
+// -----------------------------
 export const authApi = {
     fetchCurrentUser,
     updateUserProfile,
@@ -261,3 +295,4 @@ export const authApi = {
     validateAccessCode,
     requestInviteWithCode,
 };
+export default authApi;

package/dist/components/SecurityComponent.js

@@ -4,15 +4,16 @@ import { Box, Typography, Divider, Button, Stack, Alert, } from '@mui/material';
 import PasswordChangeForm from './PasswordChangeForm';
 import SocialLoginButtons from './SocialLoginButtons';
 import { authApi } from '../auth/authApi';
+import { FEATURES } from '../auth/authConfig';
 const SecurityComponent = () => {
     const [message, setMessage] = useState('');
     const [error, setError] = useState('');
-    const handleSocialClick = async (provider) => {
+    const handleSocialClick = (provider) => {
         setMessage('');
         setError('');
         try {
-            // FIX: Await the async function to catch network errors
-            await authApi.startSocialLogin(provider);
+            authApi.startSocialLogin(provider);
+            // Ab hier verlässt der Browser normalerweise die Seite
         }
         catch (e) {
             setError(e.message || 'Social login could not be started.');

package/dist/pages/LoginPage.js

@@ -40,7 +40,6 @@ export function LoginPage() {
             authApi.startSocialLogin(providerKey);
         }
         catch (err) {
-            // eslint-disable-next-line no-console
             console.error('Social login init failed', err);
             setError('Could not start social login.');
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/auth/authApi.jsx

@@ -1,7 +1,9 @@
 import axios from 'axios';
-import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig'; 
+import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig';
 
-// Helper to normalise error messages from API responses
+// -----------------------------
+// Error helper
+// -----------------------------
 function extractErrorMessage(error) {
   const data = error.response?.data;
   if (!data) {
@@ -16,28 +18,40 @@ function extractErrorMessage(error) {
   return 'An error occurred. Please try again.';
 }
 
-// Helper to get CSRF token from cookies manually
+// -----------------------------
+// CSRF helper
+// -----------------------------
 function getCsrfToken() {
-  if (!document.cookie) return null;
+  if (typeof document === 'undefined' || !document.cookie) {
+    return null;
+  }
   const match = document.cookie.match(/csrftoken=([^;]+)/);
   return match ? match[1] : null;
 }
 
+// -----------------------------
+// WebAuthn capability helpers
+// -----------------------------
 const hasJsonWebAuthn =
   typeof window !== 'undefined' &&
-  window.PublicKeyCredential &&
+  typeof window.PublicKeyCredential !== 'undefined' &&
   typeof window.PublicKeyCredential.parseCreationOptionsFromJSON === 'function' &&
   typeof window.PublicKeyCredential.parseRequestOptionsFromJSON === 'function';
 
 function ensureWebAuthnSupport() {
-  if (!window.PublicKeyCredential || !navigator.credentials) {
+  if (
+    typeof window === 'undefined' ||
+    typeof navigator === 'undefined' ||
+    !window.PublicKeyCredential ||
+    !navigator.credentials
+  ) {
     throw new Error('Passkeys are not supported in this browser.');
   }
 }
 
-/**
- * Fetches the current authenticated user from your own User API.
- */
+// -----------------------------
+// User-related helpers
+// -----------------------------
 export async function fetchCurrentUser() {
   const res = await axios.get(`${USERS_BASE}/current/`, {
     withCredentials: true,
@@ -45,9 +59,6 @@ export async function fetchCurrentUser() {
   return res.data;
 }
 
-/**
- * Updates the user profile fields.
- */
 export async function updateUserProfile(data) {
   const res = await axios.patch(`${USERS_BASE}/current/`, data, {
     withCredentials: true,
@@ -55,35 +66,28 @@ export async function updateUserProfile(data) {
   return res.data;
 }
 
-/**
- * Logs a user in using email/password via allauth headless.
- */
+// -----------------------------
+// Authentication: password
+// -----------------------------
 export async function loginWithPassword(email, password) {
   try {
     await axios.post(
       `${HEADLESS_BASE}/auth/login`,
-      {
-        email,
-        password,
-      },
+      { email, password },
       { withCredentials: true },
     );
   } catch (error) {
     if (error.response && error.response.status === 409) {
-      // User is already logged in, continue and fetch current user
+      // Already logged in: continue and fetch current user
     } else {
       throw new Error(extractErrorMessage(error));
     }
   }
 
   const user = await fetchCurrentUser();
-  // Normalise return shape so callers always get { user }
   return { user };
 }
 
-/**
- * Requests a password reset email via allauth headless.
- */
 export async function requestPasswordReset(email) {
   try {
     await axios.post(
@@ -96,17 +100,12 @@ export async function requestPasswordReset(email) {
   }
 }
 
-/**
- * Sets a new password using a reset key (from email link).
- */
+// (Falls du es noch brauchst: klassischer allauth-Key-Flow)
 export async function resetPasswordWithKey(key, newPassword) {
   try {
     await axios.post(
       `${HEADLESS_BASE}/auth/password/reset/key`,
-      {
-        key,
-        password: newPassword,
-      },
+      { key, password: newPassword },
       { withCredentials: true },
     );
   } catch (error) {
@@ -114,9 +113,6 @@ export async function resetPasswordWithKey(key, newPassword) {
   }
 }
 
-/**
- * Changes the password for an authenticated user.
- */
 export async function changePassword(currentPassword, newPassword) {
   try {
     await axios.post(
@@ -132,9 +128,9 @@ export async function changePassword(currentPassword, newPassword) {
   }
 }
 
-/**
- * Logs the user out via allauth headless.
- */
+// -----------------------------
+// Logout / Session
+// -----------------------------
 export async function logoutSession() {
   try {
     const headers = {};
@@ -145,13 +141,14 @@ export async function logoutSession() {
 
     await axios.delete(
       `${HEADLESS_BASE}/auth/session`,
-      { 
+      {
         withCredentials: true,
-        headers, 
+        headers,
       },
     );
   } catch (error) {
     if (error.response && [401, 404, 410].includes(error.response.status)) {
+      // Session already gone, nothing to do
       return;
     }
     // eslint-disable-next-line no-console
@@ -159,35 +156,37 @@ export async function logoutSession() {
   }
 }
 
-/**
- * Starts an OAuth social login flow for the given provider.
- * Provider examples: "google", "microsoft".
- * * FIX:
- * 1. Uses POST instead of GET (standard for headless init flows).
- * 2. Uses the correct path '/providers/{provider}/login'.
- */
+export async function fetchHeadlessSession() {
+  const res = await axios.get(`${HEADLESS_BASE}/auth/session`, {
+    withCredentials: true,
+  });
+  return res.data;
+}
+
+// -----------------------------
+// Social login
+// -----------------------------
 export function startSocialLogin(provider) {
+  if (typeof window === 'undefined') {
+    throw new Error('Social login is only available in a browser environment.');
+  }
+
+  // Classic allauth HTML flow
   window.location.href = `/accounts/${provider}/login/?process=login`;
 }
 
-/**
- * Prüft, ob ein Access-Code gültig ist.
- * Erwartet: POST /api/access-codes/validate/ { code }
- * Antwort: { valid: true/false } oder 400 mit detail-Fehler.
- */
+// -----------------------------
+// Invitation / access code
+// -----------------------------
 export async function validateAccessCode(code) {
   const res = await axios.post(
     `${ACCESS_CODES_BASE}/validate/`,
     { code },
     { withCredentials: true },
   );
-  return res.data; // { valid: bool } oder Error
+  return res.data;
 }
 
-/**
- * Fordert eine Einladung mit optionalem Access-Code an.
- * Backend prüft den Code noch einmal serverseitig.
- */
 export async function requestInviteWithCode(email, accessCode) {
   const payload = { email };
   if (accessCode) {
@@ -202,19 +201,9 @@ export async function requestInviteWithCode(email, accessCode) {
   return res.data;
 }
 
-
-/**
- * Loads the current session information directly from allauth headless.
- */
-export async function fetchHeadlessSession() {
-  const res = await axios.get(`${HEADLESS_BASE}/auth/session`, {
-    withCredentials: true,
-  });
-  return res.data;
-}
-
-
-
+// -----------------------------
+// Custom password-reset via uid/token
+// -----------------------------
 export async function verifyResetToken(uid, token) {
   const res = await axios.get(
     `${USERS_BASE}/password-reset/${uid}/${token}/`,
@@ -232,7 +221,9 @@ export async function setNewPassword(uid, token, newPassword) {
   return res.data;
 }
 
-// Start: Optionen für Credential-Erzeugung holen
+// -----------------------------
+// WebAuthn / Passkeys: register
+// -----------------------------
 async function registerPasskeyStart({ passwordless = true } = {}) {
   ensureWebAuthnSupport();
 
@@ -243,10 +234,18 @@ async function registerPasskeyStart({ passwordless = true } = {}) {
       withCredentials: true,
     },
   );
-  return res.data; // JSON-Options vom Server
+
+  const data = res.data || {};
+
+  // allauth.headless: { creation_options: { publicKey: { ... } } }
+  const creationOptionsJson =
+    (data.creation_options && data.creation_options.publicKey) ||
+    data.creation_options ||
+    data;
+
+  return creationOptionsJson;
 }
 
-// Complete: Credential an Server schicken
 async function registerPasskeyComplete(credentialJson, name = 'Passkey') {
   const res = await axios.post(
     `${HEADLESS_BASE}/account/authenticators/webauthn`,
@@ -259,22 +258,29 @@ async function registerPasskeyComplete(credentialJson, name = 'Passkey') {
   return res.data;
 }
 
-// High-level Helper, den das UI aufruft
 export async function registerPasskey(name = 'Passkey') {
   ensureWebAuthnSupport();
 
-  const optionsJson = await registerPasskeyStart({ passwordless: true });
-
   if (!hasJsonWebAuthn) {
-    throw new Error('Passkey JSON helpers not available in this browser.');
+    throw new Error('Passkey JSON helpers are not available in this browser.');
   }
 
-  const publicKeyOptions =
-    window.PublicKeyCredential.parseCreationOptionsFromJSON(optionsJson);
+  const creationOptionsJson = await registerPasskeyStart({ passwordless: true });
 
-  const credential = await navigator.credentials.create({
-    publicKey: publicKeyOptions,
-  });
+  let credential;
+  try {
+    const publicKeyOptions =
+      window.PublicKeyCredential.parseCreationOptionsFromJSON(creationOptionsJson);
+
+    credential = await navigator.credentials.create({
+      publicKey: publicKeyOptions,
+    });
+  } catch (err) {
+    if (err && err.name === 'NotAllowedError') {
+      throw new Error('Passkey creation was cancelled by the user.');
+    }
+    throw err;
+  }
 
   if (!credential) {
     throw new Error('Passkey creation was cancelled.');
@@ -284,6 +290,9 @@ export async function registerPasskey(name = 'Passkey') {
   return registerPasskeyComplete(credentialJson, name);
 }
 
+// -----------------------------
+// WebAuthn / Passkeys: login
+// -----------------------------
 async function loginWithPasskeyStart() {
   ensureWebAuthnSupport();
 
@@ -291,7 +300,16 @@ async function loginWithPasskeyStart() {
     `${HEADLESS_BASE}/auth/webauthn/login`,
     { withCredentials: true },
   );
-  return res.data;
+
+  const data = res.data || {};
+
+  // allauth.headless: { request_options: { publicKey: { ... } } }
+  const requestOptionsJson =
+    (data.request_options && data.request_options.publicKey) ||
+    data.request_options ||
+    data;
+
+  return requestOptionsJson;
 }
 
 async function loginWithPasskeyComplete(credentialJson) {
@@ -303,22 +321,29 @@ async function loginWithPasskeyComplete(credentialJson) {
   return res.data;
 }
 
-// Public API, die du im UI verwendest
 export async function loginWithPasskey() {
   ensureWebAuthnSupport();
 
-  const optionsJson = await loginWithPasskeyStart();
-
   if (!hasJsonWebAuthn) {
-    throw new Error('Passkey JSON helpers not available in this browser.');
+    throw new Error('Passkey JSON helpers are not available in this browser.');
   }
 
-  const publicKeyOptions =
-    window.PublicKeyCredential.parseRequestOptionsFromJSON(optionsJson);
+  const requestOptionsJson = await loginWithPasskeyStart();
 
-  const assertion = await navigator.credentials.get({
-    publicKey: publicKeyOptions,
-  });
+  let assertion;
+  try {
+    const publicKeyOptions =
+      window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptionsJson);
+
+    assertion = await navigator.credentials.get({
+      publicKey: publicKeyOptions,
+    });
+  } catch (err) {
+    if (err && err.name === 'NotAllowedError') {
+      throw new Error('Passkey authentication was cancelled by the user.');
+    }
+    throw err;
+  }
 
   if (!assertion) {
     throw new Error('Passkey authentication was cancelled.');
@@ -326,15 +351,28 @@ export async function loginWithPasskey() {
 
   const credentialJson = assertion.toJSON();
 
-  // Allauth kann hier 200 (eingeloggt) oder 401 (z.B. Email noch nicht verifiziert) liefern :contentReference[oaicite:5]{index=5}
-  await loginWithPasskeyComplete(credentialJson);
+  let postError = null;
+  try {
+    await loginWithPasskeyComplete(credentialJson);
+  } catch (err) {
+    // For example 401 although credential looked fine
+    postError = err;
+  }
 
-  // Danach wie bei Passwort-Login aktuellen User laden
-  const user = await fetchCurrentUser();
-  return user;
+  try {
+    const user = await fetchCurrentUser();
+    return { user };
+  } catch (err) {
+    if (postError) {
+      throw new Error(extractErrorMessage(postError));
+    }
+    throw new Error(extractErrorMessage(err));
+  }
 }
 
-
+// -----------------------------
+// Aggregated API object
+// -----------------------------
 export const authApi = {
   fetchCurrentUser,
   updateUserProfile,
@@ -350,4 +388,6 @@ export const authApi = {
   registerPasskey,
   validateAccessCode,
   requestInviteWithCode,
-};
+};
+
+export default authApi;

package/src/components/SecurityComponent.jsx

@@ -10,17 +10,18 @@ import {
 import PasswordChangeForm from './PasswordChangeForm';
 import SocialLoginButtons from './SocialLoginButtons';
 import { authApi } from '../auth/authApi'; 
+import { FEATURES } from '../auth/authConfig';
 
 const SecurityComponent = () => {
   const [message, setMessage] = useState('');
   const [error, setError] = useState('');
 
-  const handleSocialClick = async (provider) => {
+  const handleSocialClick = (provider) => {
     setMessage('');
     setError('');
     try {
-      // FIX: Await the async function to catch network errors
-      await authApi.startSocialLogin(provider);
+      authApi.startSocialLogin(provider);
+      // Ab hier verlässt der Browser normalerweise die Seite
     } catch (e) {
       setError(e.message || 'Social login could not be started.');
     }

package/src/pages/LoginPage.jsx

@@ -41,7 +41,6 @@ export function LoginPage() {
     try {
       authApi.startSocialLogin(providerKey);
     } catch (err) {
-      // eslint-disable-next-line no-console
       console.error('Social login init failed', err);
       setError('Could not start social login.');
     }