@micha.bigler/ui-core-micha 1.1.0 → 1.2.0

package/dist/auth/authApi.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { HEADLESS_BASE, USERS_BASE } from './authConfig';
+import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig';
 // Helper to normalise error messages from API responses
 function extractErrorMessage(error) {
     var _a;
@@ -22,6 +22,15 @@ function getCsrfToken() {
     const match = document.cookie.match(/csrftoken=([^;]+)/);
     return match ? match[1] : null;
 }
+const hasJsonWebAuthn = typeof window !== 'undefined' &&
+    window.PublicKeyCredential &&
+    typeof window.PublicKeyCredential.parseCreationOptionsFromJSON === 'function' &&
+    typeof window.PublicKeyCredential.parseRequestOptionsFromJSON === 'function';
+function ensureWebAuthnSupport() {
+    if (!window.PublicKeyCredential || !navigator.credentials) {
+        throw new Error('Passkeys are not supported in this browser.');
+    }
+}
 /**
  * Fetches the current authenticated user from your own User API.
  */
@@ -52,14 +61,15 @@ export async function loginWithPassword(email, password) {
     }
     catch (error) {
         if (error.response && error.response.status === 409) {
-            // Proceed normally if already logged in
+            // User is already logged in, continue and fetch current user
         }
         else {
             throw new Error(extractErrorMessage(error));
         }
     }
     const user = await fetchCurrentUser();
-    return user;
+    // Normalise return shape so callers always get { user }
+    return { user };
 }
 /**
  * Requests a password reset email via allauth headless.
@@ -163,12 +173,6 @@ export async function fetchHeadlessSession() {
     });
     return res.data;
 }
-export async function loginWithPasskey() {
-    throw new Error('Passkey login is not implemented yet.');
-}
-export async function registerPasskey() {
-    throw new Error('Passkey registration is not implemented yet.');
-}
 export async function verifyResetToken(uid, token) {
     const res = await axios.get(`${USERS_BASE}/password-reset/${uid}/${token}/`, { withCredentials: true });
     return res.data;
@@ -177,6 +181,70 @@ 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
+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
+}
+// Complete: Credential an Server schicken
+async function registerPasskeyComplete(credentialJson, name = 'Passkey') {
+    const res = await axios.post(`${HEADLESS_BASE}/account/authenticators/webauthn`, {
+        credential: credentialJson,
+        name,
+    }, { 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.');
+    }
+    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);
+}
+async function loginWithPasskeyStart() {
+    ensureWebAuthnSupport();
+    const res = await axios.get(`${HEADLESS_BASE}/auth/webauthn/login`, { withCredentials: true });
+    return res.data;
+}
+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.');
+    }
+    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;
+}
 export const authApi = {
     fetchCurrentUser,
     updateUserProfile,

package/dist/auth/authConfig.js

@@ -20,6 +20,6 @@ export const SOCIAL_PROVIDERS = {
 };
 // Feature-Flags (falls du später Dinge toggeln willst)
 export const FEATURES = {
-    passkeysEnabled: false, // kannst du später auf true setzen
+    passkeysEnabled: true, // kannst du später auf true setzen
     mfaEnabled: true,
 };

package/dist/auth/webauthnClient.js

@@ -0,0 +1,9 @@
+export async function registerPasskeyStart() {
+    const res = await axios.post(`${HEADLESS_BASE}/mfa/webauthn/register/start`, {}, { withCredentials: true });
+    return res.data; // enthält challenge, rpId etc.
+}
+export async function registerPasskeyComplete(publicKeyCredential) {
+    const payload = serializePublicKeyCredential(publicKeyCredential);
+    const res = await axios.post(`${HEADLESS_BASE}/mfa/webauthn/register/complete`, payload, { withCredentials: true });
+    return res.data;
+}

package/dist/components/AccessCodeManager.js

@@ -50,12 +50,9 @@ export function AccessCodeManager() {
     // Generates a random code with the selected length
     const generateRandomCode = (len) => {
         const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
-        let out = '';
-        for (let i = 0; i < len; i += 1) {
-            const idx = Math.floor(Math.random() * alphabet.length);
-            out += alphabet[idx];
-        }
-        return out;
+        const array = new Uint32Array(len);
+        window.crypto.getRandomValues(array);
+        return Array.from(array, (x) => alphabet[x % alphabet.length]).join('');
     };
     const handleCreateCode = async (code) => {
         var _a, _b;

package/dist/components/LoginForm.js

@@ -19,6 +19,6 @@ error, disabled = false, }) => {
                     alignItems: 'center',
                     mt: 1,
                     gap: 1,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: disabled, children: "Login" }), onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: "Sign up" }))] }), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: "Forgot password?" })] }), _jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin })] }));
+                }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: disabled, children: "Login" }), onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: "Sign up" }))] }), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: "Forgot password?" })] }), _jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin }), _jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(Box, { sx: { mt: 2, textAlign: 'center' }, children: _jsx(Button, { variant: "text", onClick: handlePasskeyLogin, disabled: submitting || !window.PublicKeyCredential, children: "Use passkey" }) })] }));
 };
 export default LoginForm;

package/dist/components/PasswordSetForm.js

@@ -25,6 +25,6 @@ const PasswordSetForm = ({ onSubmit, submitting = false }) => {
             onSubmit(password1);
         }
     };
-    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }, children: [localError && (_jsx(Box, { sx: { colour: 'error.main', fontSize: 14 }, children: localError })), _jsx(TextField, { label: "New password", type: "password", fullWidth: true, autoComplete: "new-password", value: password1, onChange: (e) => setPassword1(e.target.value), disabled: submitting }), _jsx(TextField, { label: "Confirm new password", type: "password", fullWidth: true, autoComplete: "new-password", value: password2, onChange: (e) => setPassword2(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: "Set password" })] }));
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }, children: [localError && (_jsx(Box, { sx: { color: 'error.main', fontSize: 14 }, children: localError })), _jsx(TextField, { label: "New password", type: "password", fullWidth: true, autoComplete: "new-password", value: password1, onChange: (e) => setPassword1(e.target.value), disabled: submitting }), _jsx(TextField, { label: "Confirm new password", type: "password", fullWidth: true, autoComplete: "new-password", value: password2, onChange: (e) => setPassword2(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: "Set password" })] }));
 };
 export default PasswordSetForm;

package/dist/components/SecurityComponent.js

@@ -33,6 +33,16 @@ 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 (coming soon)" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Use passkeys for passwordless sign-in. This section will be active once WebAuthn endpoints are wired in the backend." }), _jsx(Stack, { direction: "row", spacing: 2, children: _jsx(Button, { variant: "outlined", disabled: true, children: "Add passkey" }) })] }));
+    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' }) })] }));
 };
 export default SecurityComponent;

package/dist/pages/SignUpPage.js

@@ -6,6 +6,7 @@ import { Box, TextField, Button, Typography, Alert, } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { NarrowPage } from '../layout/PageLayout';
 import { authApi } from '../auth/authApi';
+import { ACCESS_CODES_BASE } from '../auth/authConfig';
 export function SignUpPage() {
     const navigate = useNavigate();
     const [email, setEmail] = useState('');

package/package.json

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

package/src/auth/authApi.jsx

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { HEADLESS_BASE, USERS_BASE } from './authConfig'; 
+import { HEADLESS_BASE, USERS_BASE, ACCESS_CODES_BASE } from './authConfig'; 
 
 // Helper to normalise error messages from API responses
 function extractErrorMessage(error) {
@@ -23,6 +23,18 @@ function getCsrfToken() {
   return match ? match[1] : null;
 }
 
+const hasJsonWebAuthn =
+  typeof window !== 'undefined' &&
+  window.PublicKeyCredential &&
+  typeof window.PublicKeyCredential.parseCreationOptionsFromJSON === 'function' &&
+  typeof window.PublicKeyCredential.parseRequestOptionsFromJSON === 'function';
+
+function ensureWebAuthnSupport() {
+  if (!window.PublicKeyCredential || !navigator.credentials) {
+    throw new Error('Passkeys are not supported in this browser.');
+  }
+}
+
 /**
  * Fetches the current authenticated user from your own User API.
  */
@@ -51,21 +63,22 @@ export async function loginWithPassword(email, password) {
     await axios.post(
       `${HEADLESS_BASE}/auth/login`,
       {
-        email, 
+        email,
         password,
       },
       { withCredentials: true },
     );
   } catch (error) {
     if (error.response && error.response.status === 409) {
-       // Proceed normally if already logged in
+      // User is already logged in, continue and fetch current user
     } else {
       throw new Error(extractErrorMessage(error));
     }
   }
 
   const user = await fetchCurrentUser();
-  return user;
+  // Normalise return shape so callers always get { user }
+  return { user };
 }
 
 /**
@@ -200,13 +213,7 @@ export async function fetchHeadlessSession() {
   return res.data;
 }
 
-export async function loginWithPasskey() {
-  throw new Error('Passkey login is not implemented yet.');
-}
 
-export async function registerPasskey() {
-  throw new Error('Passkey registration is not implemented yet.');
-}
 
 export async function verifyResetToken(uid, token) {
   const res = await axios.get(
@@ -225,6 +232,108 @@ export async function setNewPassword(uid, token, newPassword) {
   return res.data;
 }
 
+// Start: Optionen für Credential-Erzeugung holen
+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
+}
+
+// Complete: Credential an Server schicken
+async function registerPasskeyComplete(credentialJson, name = 'Passkey') {
+  const res = await axios.post(
+    `${HEADLESS_BASE}/account/authenticators/webauthn`,
+    {
+      credential: credentialJson,
+      name,
+    },
+    { 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.');
+  }
+
+  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);
+}
+
+async function loginWithPasskeyStart() {
+  ensureWebAuthnSupport();
+
+  const res = await axios.get(
+    `${HEADLESS_BASE}/auth/webauthn/login`,
+    { withCredentials: true },
+  );
+  return res.data;
+}
+
+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.');
+  }
+
+  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;
+}
+
 
 export const authApi = {
   fetchCurrentUser,

package/src/auth/authConfig.jsx

@@ -29,6 +29,6 @@ export const SOCIAL_PROVIDERS = {
 
 // Feature-Flags (falls du später Dinge toggeln willst)
 export const FEATURES = {
-  passkeysEnabled: false,  // kannst du später auf true setzen
+  passkeysEnabled: true,  // kannst du später auf true setzen
   mfaEnabled: true,
 };

package/src/auth/webauthnClient.jsx

@@ -0,0 +1,18 @@
+export async function registerPasskeyStart() {
+  const res = await axios.post(
+    `${HEADLESS_BASE}/mfa/webauthn/register/start`,
+    {},
+    { withCredentials: true },
+  );
+  return res.data; // enthält challenge, rpId etc.
+}
+
+export async function registerPasskeyComplete(publicKeyCredential) {
+  const payload = serializePublicKeyCredential(publicKeyCredential);
+  const res = await axios.post(
+    `${HEADLESS_BASE}/mfa/webauthn/register/complete`,
+    payload,
+    { withCredentials: true },
+  );
+  return res.data;
+}

package/src/components/AccessCodeManager.jsx

@@ -63,14 +63,11 @@ export function AccessCodeManager() {
   }, []);
 
   // Generates a random code with the selected length
-  const generateRandomCode = (len) => {
+    const generateRandomCode = (len) => {
     const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
-    let out = '';
-    for (let i = 0; i < len; i += 1) {
-      const idx = Math.floor(Math.random() * alphabet.length);
-      out += alphabet[idx];
-    }
-    return out;
+    const array = new Uint32Array(len);
+    window.crypto.getRandomValues(array);
+    return Array.from(array, (x) => alphabet[x % alphabet.length]).join('');
   };
 
   const handleCreateCode = async (code) => {

package/src/components/LoginForm.jsx

@@ -101,6 +101,18 @@ const LoginForm = ({
       <Divider sx={{ my: 2 }}>or</Divider>
 
       <SocialLoginButtons onProviderClick={onSocialLogin} />
+
+      <Divider sx={{ my: 2 }}>or</Divider>
+
+       <Box sx={{ mt: 2, textAlign: 'center' }}>
+        <Button
+          variant="text"
+          onClick={handlePasskeyLogin}
+          disabled={submitting || !window.PublicKeyCredential}
+        >
+          Use passkey
+        </Button>
+      </Box>
     </Box>
   );
 };

package/src/components/PasswordSetForm.jsx

@@ -37,7 +37,7 @@ const PasswordSetForm = ({ onSubmit, submitting = false }) => {
       sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }}
     >
       {localError && (
-        <Box sx={{ colour: 'error.main', fontSize: 14 }}>
+        <Box sx={{ color: 'error.main', fontSize: 14 }}>
           {localError}
         </Box>
       )}

package/src/components/SecurityComponent.jsx

@@ -75,18 +75,28 @@ const SecurityComponent = () => {
 
       {/* Passkeys Section (Placeholder) */}
       <Typography variant="h6" gutterBottom>
-        Passkeys (coming soon)
+        Passkeys
       </Typography>
       <Typography variant="body2" sx={{ mb: 1 }}>
-        Use passkeys for passwordless sign-in. This section will be active once
-        WebAuthn endpoints are wired in the backend.
+        Use passkeys for passwordless sign-in on this device.
       </Typography>
+
       <Stack direction="row" spacing={2}>
         <Button
           variant="outlined"
-          disabled
+          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.');
+            }
+          }}
         >
-          Add passkey
+          {FEATURES.passkeysEnabled ? 'Add passkey' : 'Passkeys disabled'}
         </Button>
       </Stack>
     </Box>

package/src/pages/SignUpPage.jsx

@@ -11,6 +11,7 @@ import {
 import { Helmet } from 'react-helmet';
 import { NarrowPage } from '../layout/PageLayout';
 import { authApi } from '../auth/authApi';
+import { ACCESS_CODES_BASE } from '../auth/authConfig';
 
 export function SignUpPage() {
   const navigate = useNavigate();