@micha.bigler/ui-core-micha 1.2.4 → 1.2.6

package/dist/auth/authApi.js

@@ -1,6 +1,61 @@
 import axios from 'axios';
 import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig';
 // -----------------------------
+// WebAuthn Serialization Helpers
+// -----------------------------
+/**
+ * Converts an ArrayBuffer to a Base64URL encoded string.
+ * Required for manual credential serialization when .toJSON() is missing.
+ */
+function bufferToBase64URL(buffer) {
+    const bytes = new Uint8Array(buffer);
+    let str = '';
+    for (const char of bytes) {
+        str += String.fromCharCode(char);
+    }
+    const base64 = btoa(str);
+    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+/**
+ * Serializes a PublicKeyCredential into a JSON-compatible object.
+ * Acts as a polyfill for environments where credential.toJSON() is missing (e.g., Proton Pass).
+ */
+function serializeCredential(credential) {
+    if (typeof credential.toJSON === 'function') {
+        return credential.toJSON();
+    }
+    // Manual serialization for extensions that return incomplete objects
+    const p = {
+        id: credential.id,
+        rawId: bufferToBase64URL(credential.rawId),
+        type: credential.type,
+        response: {
+            clientDataJSON: bufferToBase64URL(credential.response.clientDataJSON),
+        },
+    };
+    if (credential.response.attestationObject) {
+        // Registration specific
+        p.response.attestationObject = bufferToBase64URL(credential.response.attestationObject);
+    }
+    if (credential.response.authenticatorData) {
+        // Login specific
+        p.response.authenticatorData = bufferToBase64URL(credential.response.authenticatorData);
+    }
+    if (credential.response.signature) {
+        // Login specific
+        p.response.signature = bufferToBase64URL(credential.response.signature);
+    }
+    if (credential.response.userHandle) {
+        // Login specific
+        p.response.userHandle = bufferToBase64URL(credential.response.userHandle);
+    }
+    // Include clientExtensionResults if present
+    if (typeof credential.getClientExtensionResults === 'function') {
+        p.clientExtensionResults = credential.getClientExtensionResults();
+    }
+    return p;
+}
+// -----------------------------
 // Error helper
 // -----------------------------
 function extractErrorMessage(error) {
@@ -178,12 +233,13 @@ async function registerPasskeyStart({ passwordless = true } = {}) {
         params: passwordless ? { passwordless: true } : {},
         withCredentials: true,
     });
-    const data = res.data || {};
-    // allauth.headless: { creation_options: { publicKey: { ... } } }
-    // Wir wollen am Ende den INNEREN publicKey-Block haben:
-    const publicKeyJson = (data.creation_options && data.creation_options.publicKey) ||
-        data.publicKey ||
-        data;
+    const responseBody = res.data || {};
+    // Handle nested 'data' wrapper if present, otherwise use body directly
+    const payload = responseBody.data || responseBody;
+    // Extract the inner publicKey structure required by the browser API
+    const publicKeyJson = (payload.creation_options && payload.creation_options.publicKey) ||
+        payload.publicKey ||
+        payload;
     return publicKeyJson;
 }
 async function registerPasskeyComplete(credentialJson, name = 'Passkey') {
@@ -198,17 +254,17 @@ export async function registerPasskey(name = 'Passkey') {
     if (!hasJsonWebAuthn) {
         throw new Error('Passkey JSON helpers are not available in this browser.');
     }
-    // Hier bekommst du bereits den inneren publicKey-Block mit challenge etc.
+    // ... (previous logic for registerPasskeyStart) ...
     const publicKeyJson = await registerPasskeyStart({ passwordless: true });
     let credential;
     try {
-        // publicKeyJson hat challenge auf Top-Level
         const publicKeyOptions = window.PublicKeyCredential.parseCreationOptionsFromJSON(publicKeyJson);
         credential = await navigator.credentials.create({
             publicKey: publicKeyOptions,
         });
     }
     catch (err) {
+        // ... (error handling) ...
         if (err && err.name === 'NotAllowedError') {
             throw new Error('Passkey creation was cancelled by the user.');
         }
@@ -217,7 +273,8 @@ export async function registerPasskey(name = 'Passkey') {
     if (!credential) {
         throw new Error('Passkey creation was cancelled.');
     }
-    const credentialJson = credential.toJSON();
+    // CHANGED: Use helper instead of direct .toJSON()
+    const credentialJson = serializeCredential(credential);
     return registerPasskeyComplete(credentialJson, name);
 }
 // -----------------------------
@@ -226,11 +283,13 @@ export async function registerPasskey(name = 'Passkey') {
 async function loginWithPasskeyStart() {
     ensureWebAuthnSupport();
     const res = await axios.get(`${HEADLESS_BASE}/auth/webauthn/login`, { withCredentials: true });
-    const data = res.data || {};
-    // allauth.headless: { request_options: { publicKey: { ... } } }
-    const requestOptionsJson = (data.request_options && data.request_options.publicKey) ||
-        data.request_options ||
-        data;
+    const responseBody = res.data || {};
+    // Handle nested 'data' wrapper if present
+    const payload = responseBody.data || responseBody;
+    // Extract request options for authentication
+    const requestOptionsJson = (payload.request_options && payload.request_options.publicKey) ||
+        payload.request_options ||
+        payload;
     return requestOptionsJson;
 }
 async function loginWithPasskeyComplete(credentialJson) {
@@ -251,15 +310,13 @@ export async function loginWithPasskey() {
         });
     }
     catch (err) {
-        if (err && err.name === 'NotAllowedError') {
-            throw new Error('Passkey authentication was cancelled by the user.');
-        }
+        // ... (error handling) ...
         throw err;
     }
     if (!assertion) {
         throw new Error('Passkey authentication was cancelled.');
     }
-    const credentialJson = assertion.toJSON();
+    const credentialJson = serializeCredential(assertion);
     let postError = null;
     try {
         await loginWithPasskeyComplete(credentialJson);
@@ -279,6 +336,22 @@ export async function loginWithPasskey() {
         throw new Error(extractErrorMessage(err));
     }
 }
+/**
+ * Loads all authenticators and filters for WebAuthn passkeys.
+ */
+export async function fetchPasskeys() {
+    const res = await axios.get(`${HEADLESS_BASE}/account/authenticators/`, { withCredentials: true });
+    const items = Array.isArray(res.data) ? res.data : [];
+    // allauth usually returns objects like:
+    // { id, type, name, last_used_at, created_at, is_device_passkey, ... }
+    return items.filter((item) => item.type === 'webauthn');
+}
+/**
+ * Deletes a single passkey authenticator by id.
+ */
+export async function deletePasskey(id) {
+    await axios.delete(`${HEADLESS_BASE}/account/authenticators/${id}/`, { withCredentials: true });
+}
 // -----------------------------
 // Aggregated API object
 // -----------------------------
@@ -295,6 +368,8 @@ export const authApi = {
     setNewPassword,
     loginWithPasskey,
     registerPasskey,
+    fetchPasskeys,
+    deletePasskey,
     validateAccessCode,
     requestInviteWithCode,
 };

package/dist/components/SecurityComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { Box, Typography, Divider, Button, Stack, Alert, } from '@mui/material';
+import { Box, Typography, Divider, Button, Stack, Alert, TextField, } from '@mui/material';
 import PasswordChangeForm from './PasswordChangeForm';
 import SocialLoginButtons from './SocialLoginButtons';
 import { authApi } from '../auth/authApi';
@@ -8,12 +8,13 @@ import { FEATURES } from '../auth/authConfig';
 const SecurityComponent = () => {
     const [message, setMessage] = useState('');
     const [error, setError] = useState('');
-    const handleSocialClick = (provider) => {
+    const [passkeyName, setPasskeyName] = useState('');
+    const [passkeySubmitting, setPasskeySubmitting] = useState(false);
+    const handleSocialClick = async (provider) => {
         setMessage('');
         setError('');
         try {
-            authApi.startSocialLogin(provider);
-            // Ab hier verlässt der Browser normalerweise die Seite
+            await authApi.startSocialLogin(provider);
         }
         catch (e) {
             setError(e.message || 'Social login could not be started.');
@@ -34,16 +35,26 @@ const SecurityComponent = () => {
             setError(errorMsg);
         }
     };
-    return (_jsxs(Box, { children: [message && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message })), error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Password" }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Social logins" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Sign in using a connected Google or Microsoft account." }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Passkeys" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Use passkeys for passwordless sign-in on this device." }), _jsx(Stack, { direction: "row", spacing: 2, children: _jsx(Button, { variant: "outlined", disabled: !FEATURES.passkeysEnabled, onClick: async () => {
-                        setMessage('');
-                        setError('');
-                        try {
-                            await authApi.registerPasskey('Default passkey');
-                            setMessage('Passkey added successfully.');
-                        }
-                        catch (e) {
-                            setError(e.message || 'Could not add passkey.');
-                        }
-                    }, children: FEATURES.passkeysEnabled ? 'Add passkey' : 'Passkeys disabled' }) })] }));
+    const handleRegisterPasskey = async () => {
+        setMessage('');
+        setError('');
+        setPasskeySubmitting(true);
+        try {
+            // Fallback-Name, wenn der User nichts einträgt
+            const fallbackName = (passkeyName === null || passkeyName === void 0 ? void 0 : passkeyName.trim()) ||
+                `Passkey on ${navigator.platform || 'this device'}`;
+            await authApi.registerPasskey(fallbackName);
+            setMessage('Passkey added successfully.');
+            setPasskeyName('');
+        }
+        catch (e) {
+            setError(e.message || 'Could not add passkey.');
+        }
+        finally {
+            setPasskeySubmitting(false);
+        }
+    };
+    const passkeysSupported = typeof window !== 'undefined' && !!window.PublicKeyCredential;
+    return (_jsxs(Box, { children: [message && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message })), error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Password" }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Social logins" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Sign in using a connected Google or Microsoft account." }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Passkeys" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Use passkeys for passwordless sign-in on this device." }), !passkeysSupported && (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Passkeys are not supported in this browser." })), FEATURES.passkeysEnabled && passkeysSupported ? (_jsx(PasskeysComponent, {})) : (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: "Passkeys are disabled for this project." }))] }));
 };
 export default SecurityComponent;

package/package.json

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

package/src/auth/authApi.jsx

@@ -1,6 +1,72 @@
 import axios from 'axios';
 import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig';
 
+// -----------------------------
+// WebAuthn Serialization Helpers
+// -----------------------------
+
+/**
+ * Converts an ArrayBuffer to a Base64URL encoded string.
+ * Required for manual credential serialization when .toJSON() is missing.
+ */
+function bufferToBase64URL(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let str = '';
+  for (const char of bytes) {
+    str += String.fromCharCode(char);
+  }
+  const base64 = btoa(str);
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+/**
+ * Serializes a PublicKeyCredential into a JSON-compatible object.
+ * Acts as a polyfill for environments where credential.toJSON() is missing (e.g., Proton Pass).
+ */
+function serializeCredential(credential) {
+  if (typeof credential.toJSON === 'function') {
+    return credential.toJSON();
+  }
+
+  // Manual serialization for extensions that return incomplete objects
+  const p = {
+    id: credential.id,
+    rawId: bufferToBase64URL(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: bufferToBase64URL(credential.response.clientDataJSON),
+    },
+  };
+
+  if (credential.response.attestationObject) {
+    // Registration specific
+    p.response.attestationObject = bufferToBase64URL(credential.response.attestationObject);
+  }
+
+  if (credential.response.authenticatorData) {
+    // Login specific
+    p.response.authenticatorData = bufferToBase64URL(credential.response.authenticatorData);
+  }
+
+  if (credential.response.signature) {
+    // Login specific
+    p.response.signature = bufferToBase64URL(credential.response.signature);
+  }
+
+  if (credential.response.userHandle) {
+    // Login specific
+    p.response.userHandle = bufferToBase64URL(credential.response.userHandle);
+  }
+
+  // Include clientExtensionResults if present
+  if (typeof credential.getClientExtensionResults === 'function') {
+    p.clientExtensionResults = credential.getClientExtensionResults();
+  }
+
+  return p;
+}
+
+
 // -----------------------------
 // Error helper
 // -----------------------------
@@ -235,18 +301,21 @@ async function registerPasskeyStart({ passwordless = true } = {}) {
     },
   );
 
-  const data = res.data || {};
+  const responseBody = res.data || {};
 
-  // allauth.headless: { creation_options: { publicKey: { ... } } }
-  // Wir wollen am Ende den INNEREN publicKey-Block haben:
+  // Handle nested 'data' wrapper if present, otherwise use body directly
+  const payload = responseBody.data || responseBody;
+
+  // Extract the inner publicKey structure required by the browser API
   const publicKeyJson =
-    (data.creation_options && data.creation_options.publicKey) ||
-    data.publicKey ||
-    data;
+    (payload.creation_options && payload.creation_options.publicKey) ||
+    payload.publicKey ||
+    payload;
 
   return publicKeyJson;
 }
 
+
 async function registerPasskeyComplete(credentialJson, name = 'Passkey') {
   const res = await axios.post(
     `${HEADLESS_BASE}/account/authenticators/webauthn`,
@@ -266,19 +335,19 @@ export async function registerPasskey(name = 'Passkey') {
     throw new Error('Passkey JSON helpers are not available in this browser.');
   }
 
-  // Hier bekommst du bereits den inneren publicKey-Block mit challenge etc.
+  // ... (previous logic for registerPasskeyStart) ...
   const publicKeyJson = await registerPasskeyStart({ passwordless: true });
 
   let credential;
   try {
-    // publicKeyJson hat challenge auf Top-Level
-    const publicKeyOptions =
-      window.PublicKeyCredential.parseCreationOptionsFromJSON(publicKeyJson);
+     const publicKeyOptions =
+       window.PublicKeyCredential.parseCreationOptionsFromJSON(publicKeyJson);
 
-    credential = await navigator.credentials.create({
-      publicKey: publicKeyOptions,
-    });
+     credential = await navigator.credentials.create({
+       publicKey: publicKeyOptions,
+     });
   } catch (err) {
+    // ... (error handling) ...
     if (err && err.name === 'NotAllowedError') {
       throw new Error('Passkey creation was cancelled by the user.');
     }
@@ -289,7 +358,9 @@ export async function registerPasskey(name = 'Passkey') {
     throw new Error('Passkey creation was cancelled.');
   }
 
-  const credentialJson = credential.toJSON();
+  // CHANGED: Use helper instead of direct .toJSON()
+  const credentialJson = serializeCredential(credential);
+  
   return registerPasskeyComplete(credentialJson, name);
 }
 
@@ -304,13 +375,16 @@ async function loginWithPasskeyStart() {
     { withCredentials: true },
   );
 
-  const data = res.data || {};
+  const responseBody = res.data || {};
 
-  // allauth.headless: { request_options: { publicKey: { ... } } }
+  // Handle nested 'data' wrapper if present
+  const payload = responseBody.data || responseBody;
+
+  // Extract request options for authentication
   const requestOptionsJson =
-    (data.request_options && data.request_options.publicKey) ||
-    data.request_options ||
-    data;
+    (payload.request_options && payload.request_options.publicKey) ||
+    payload.request_options ||
+    payload;
 
   return requestOptionsJson;
 }
@@ -342,9 +416,7 @@ export async function loginWithPasskey() {
       publicKey: publicKeyOptions,
     });
   } catch (err) {
-    if (err && err.name === 'NotAllowedError') {
-      throw new Error('Passkey authentication was cancelled by the user.');
-    }
+    // ... (error handling) ...
     throw err;
   }
 
@@ -352,7 +424,7 @@ export async function loginWithPasskey() {
     throw new Error('Passkey authentication was cancelled.');
   }
 
-  const credentialJson = assertion.toJSON();
+  const credentialJson = serializeCredential(assertion);
 
   let postError = null;
   try {
@@ -372,6 +444,30 @@ export async function loginWithPasskey() {
     throw new Error(extractErrorMessage(err));
   }
 }
+/**
+ * Loads all authenticators and filters for WebAuthn passkeys.
+ */
+export async function fetchPasskeys() {
+  const res = await axios.get(
+    `${HEADLESS_BASE}/account/authenticators/`,
+    { withCredentials: true },
+  );
+
+  const items = Array.isArray(res.data) ? res.data : [];
+  // allauth usually returns objects like:
+  // { id, type, name, last_used_at, created_at, is_device_passkey, ... }
+  return items.filter((item) => item.type === 'webauthn');
+}
+
+/**
+ * Deletes a single passkey authenticator by id.
+ */
+export async function deletePasskey(id) {
+  await axios.delete(
+    `${HEADLESS_BASE}/account/authenticators/${id}/`,
+    { withCredentials: true },
+  );
+}
 
 // -----------------------------
 // Aggregated API object
@@ -389,6 +485,8 @@ export const authApi = {
   setNewPassword,
   loginWithPasskey,
   registerPasskey,
+  fetchPasskeys,
+  deletePasskey,
   validateAccessCode,
   requestInviteWithCode,
 };

package/src/components/SecurityComponent.jsx

@@ -6,22 +6,24 @@ import {
   Button,
   Stack,
   Alert,
+  TextField,
 } from '@mui/material';
 import PasswordChangeForm from './PasswordChangeForm';
 import SocialLoginButtons from './SocialLoginButtons';
-import { authApi } from '../auth/authApi'; 
+import { authApi } from '../auth/authApi';
 import { FEATURES } from '../auth/authConfig';
 
 const SecurityComponent = () => {
   const [message, setMessage] = useState('');
   const [error, setError] = useState('');
+  const [passkeyName, setPasskeyName] = useState('');
+  const [passkeySubmitting, setPasskeySubmitting] = useState(false);
 
-  const handleSocialClick = (provider) => {
+  const handleSocialClick = async (provider) => {
     setMessage('');
     setError('');
     try {
-      authApi.startSocialLogin(provider);
-      // Ab hier verlässt der Browser normalerweise die Seite
+      await authApi.startSocialLogin(provider);
     } catch (e) {
       setError(e.message || 'Social login could not be started.');
     }
@@ -34,13 +36,38 @@ const SecurityComponent = () => {
       await authApi.changePassword(currentPassword, newPassword);
       setMessage('Password changed successfully.');
     } catch (err) {
-      const errorMsg = err.response?.data?.detail || 
-                       err.message || 
-                       'Could not change password.';
+      const errorMsg =
+        err.response?.data?.detail ||
+        err.message ||
+        'Could not change password.';
       setError(errorMsg);
     }
   };
 
+  const handleRegisterPasskey = async () => {
+    setMessage('');
+    setError('');
+    setPasskeySubmitting(true);
+
+    try {
+      // Fallback-Name, wenn der User nichts einträgt
+      const fallbackName =
+        passkeyName?.trim() ||
+        `Passkey on ${navigator.platform || 'this device'}`;
+
+      await authApi.registerPasskey(fallbackName);
+      setMessage('Passkey added successfully.');
+      setPasskeyName('');
+    } catch (e) {
+      setError(e.message || 'Could not add passkey.');
+    } finally {
+      setPasskeySubmitting(false);
+    }
+  };
+
+  const passkeysSupported =
+    typeof window !== 'undefined' && !!window.PublicKeyCredential;
+
   return (
     <Box>
       {message && (
@@ -58,9 +85,8 @@ const SecurityComponent = () => {
       <Typography variant="h6" gutterBottom>
         Password
       </Typography>
-      
       <PasswordChangeForm onSubmit={handlePasswordChange} />
-      
+
       <Divider sx={{ my: 3 }} />
 
       {/* Social Logins Section */}
@@ -74,7 +100,7 @@ const SecurityComponent = () => {
 
       <Divider sx={{ my: 3 }} />
 
-      {/* Passkeys Section (Placeholder) */}
+      {/* Passkeys Section */}
       <Typography variant="h6" gutterBottom>
         Passkeys
       </Typography>
@@ -82,26 +108,23 @@ const SecurityComponent = () => {
         Use passkeys for passwordless sign-in on this device.
       </Typography>
 
-      <Stack direction="row" spacing={2}>
-        <Button
-          variant="outlined"
-          disabled={!FEATURES.passkeysEnabled}
-          onClick={async () => {
-            setMessage('');
-            setError('');
-            try {
-              await authApi.registerPasskey('Default passkey');
-              setMessage('Passkey added successfully.');
-            } catch (e) {
-              setError(e.message || 'Could not add passkey.');
-            }
-          }}
-        >
-          {FEATURES.passkeysEnabled ? 'Add passkey' : 'Passkeys disabled'}
-        </Button>
-      </Stack>
+      {!passkeysSupported && (
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+          Passkeys are not supported in this browser.
+        </Typography>
+      )}
+
+      {FEATURES.passkeysEnabled && passkeysSupported ? (
+        <PasskeysComponent />
+      ) : (
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          Passkeys are disabled for this project.
+        </Typography>
+      )}
+
+      {/* Hier später: Liste der vorhandenen Passkeys + Delete-Buttons */}
     </Box>
   );
 };
 
-export default SecurityComponent;
+export default SecurityComponent;