@micha.bigler/ui-core-micha 1.4.20 → 1.4.23

package/src/pages/LoginPage.jsx

@@ -4,7 +4,8 @@ import { Helmet } from 'react-helmet';
 import { Typography, Box, Alert } from '@mui/material';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
-import { authApi } from '../auth/authApi';
+import { loginWithRecoveryPassword, loginWithPassword } from '../auth/authApi';
+import { loginWithPasskey, startSocialLogin } from '../utils/authService';
 import LoginForm from '../components/LoginForm';
 import MfaLoginComponent from '../components/MfaLoginComponent';
 import { useTranslation } from 'react-i18next';
@@ -32,7 +33,7 @@ export function LoginPage() {
     try {
       // Recovery flow: password login via special endpoint, no MFA
       if (recoveryToken) {
-        const result = await authApi.loginWithRecoveryPassword(
+        const result = await loginWithRecoveryPassword(
           identifier,
           password,
           recoveryToken,
@@ -45,7 +46,7 @@ export function LoginPage() {
       }
 
       // Normal login flow via headless allauth
-      const result = await authApi.loginWithPassword(identifier, password);
+      const result = await loginWithPassword(identifier, password);
 
       if (result.needsMfa) {
         setMfaState({
@@ -77,7 +78,7 @@ export function LoginPage() {
     setErrorKey(null);
     setSubmitting(true);
     try {
-      const { user } = await authApi.loginWithPasskey();
+      const { user } = await loginWithPasskey();
       login(user);
 
       const requiresExtra =
@@ -95,7 +96,7 @@ export function LoginPage() {
     }
   };
 
-  const handleSocialLogin = (provider) => authApi.startSocialLogin(provider);
+  const handleSocialLogin = (provider) => startSocialLogin(provider);
   const handleSignUp = () => navigate('/signup');
   const handleForgotPassword = () => navigate('/reset-request-password');
 

package/src/pages/PasswordInvitePage.jsx

@@ -6,7 +6,7 @@ import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import PasswordSetForm from '../components/PasswordSetForm';
-import { authApi } from '../auth/authApi';
+import { verifyResetToken, setNewPassword } from '../auth/authApi';
 
 export function PasswordInvitePage() {
   const { uid, token } = useParams();
@@ -40,7 +40,7 @@ export function PasswordInvitePage() {
 
     const check = async () => {
       try {
-        await authApi.verifyResetToken(uid, token);
+        await verifyResetToken(uid, token);
         setChecked(true);
       } catch (err) {
         setErrorKey(err.code || 'Auth.RESET_LINK_INVALID');
@@ -62,7 +62,7 @@ export function PasswordInvitePage() {
     setSuccessKey(null);
 
     try {
-      await authApi.setNewPassword(uid, token, newPassword);
+      await setNewPassword(uid, token, newPassword);
       setSuccessKey(
         isInvite
           ? 'Auth.RESET_PASSWORD_SUCCESS_INVITE'

package/src/pages/SignUpPage.jsx

@@ -11,7 +11,7 @@ import {
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
-import { authApi } from '../auth/authApi';
+import { validateAccessCode, requestInviteWithCode } from '../auth/authApi';
 
 export function SignUpPage() {
   const navigate = useNavigate();
@@ -41,14 +41,14 @@ export function SignUpPage() {
 
     try {
       // 1) Access-Code prüfen
-      const res = await authApi.validateAccessCode(accessCode);
+      const res = await validateAccessCode(accessCode);
       if (!res?.valid) {
         setErrorKey('Auth.ACCESS_CODE_INVALID_OR_INACTIVE');
         return;
       }
 
       // 2) Invite anfordern
-      await authApi.requestInviteWithCode(email, accessCode);
+      await requestInviteWithCode(email, accessCode);
 
       setSuccessKey('Auth.INVITE_REQUEST_SUCCESS');
     } catch (err) {

package/src/utils/authService.js

@@ -0,0 +1,68 @@
+// src/utils/authService.js
+import { getPasskeyRegistrationOptions, completePasskeyRegistration, getPasskeyLoginOptions, completePasskeyLogin, fetchCurrentUser } from '../auth/authApi';
+
+import { 
+    ensureWebAuthnSupport, 
+    serializeCredential 
+} from '../utils/webauthn';
+import { normaliseApiError } from '../utils/auth-errors';
+
+export async function registerPasskey(name = 'Passkey') {
+  ensureWebAuthnSupport();
+  
+  // 1. Get Options from Server
+  const creationOptions = await getPasskeyRegistrationOptions();
+  
+  // 2. Call Browser API
+  let credential;
+  try {
+      // Note: Parse JSON to Options needs a helper if creationOptions is raw JSON strings
+      // modern browsers/allauth usually provide correct types, but check your library version
+      // For standard Allauth headless, you might need window.PublicKeyCredential.parseCreationOptionsFromJSON
+      const pubKey = window.PublicKeyCredential.parseCreationOptionsFromJSON(creationOptions);
+      credential = await navigator.credentials.create({ publicKey: pubKey });
+  } catch (err) {
+      if (err.name === 'NotAllowedError') {
+          throw normaliseApiError(new Error('Auth.PASSKEY_CANCELLED'), 'Auth.PASSKEY_CANCELLED');
+      }
+      throw err;
+  }
+
+  // 3. Send back to Server
+  const credentialJson = serializeCredential(credential);
+  return completePasskeyRegistration(credentialJson, name);
+}
+
+export async function loginWithPasskey() {
+    ensureWebAuthnSupport();
+    
+    // 1. Get Challenge
+    const requestOptions = await getPasskeyLoginOptions();
+    
+    // 2. Browser Sign
+    let assertion;
+    try {
+        const pubKey = window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptions);
+        assertion = await navigator.credentials.get({ publicKey: pubKey });
+    } catch (err) {
+         throw normaliseApiError(new Error('Auth.PASSKEY_CANCELLED'), 'Auth.PASSKEY_CANCELLED');
+    }
+
+    // 3. Complete
+    const credentialJson = serializeCredential(assertion);
+    await completePasskeyLogin(credentialJson);
+    
+    // 4. Reload User
+    return fetchCurrentUser();
+}
+
+export function startSocialLogin(provider) {
+  if (typeof window === 'undefined') {
+    throw normaliseApiError(
+      new Error('Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'), 
+      'Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'
+    );
+  }
+  // Browser-Redirect ist ein Side-Effect -> Service Layer
+  window.location.href = `/accounts/${provider}/login/?process=login`;
+}

package/src/utils/errors.js

@@ -0,0 +1,39 @@
+// src/utils/errors.js
+export function extractErrorInfo(error) {
+  const status = error.response?.status ?? null;
+  const data = error.response?.data ?? null;
+
+  if (!data) {
+    return { status, code: null, message: error.message || null, raw: null };
+  }
+
+  // Allauth Headless structure often nests errors in "errors" array or "status" key
+  if (Array.isArray(data.errors) && data.errors.length > 0) {
+      // Pick the first error code
+      const first = data.errors[0];
+      return { status, code: first.code, message: first.message, raw: data };
+  }
+
+  if (typeof data.code === 'string') {
+    return { status, code: data.code, message: null, raw: data };
+  }
+  
+  // Fallback for generic Django errors
+  if (typeof data.detail === 'string') {
+    return { status, code: 'GENERIC', message: data.detail, raw: data };
+  }
+
+  return { status, code: null, message: null, raw: data };
+}
+
+export function normaliseApiError(error, defaultCode = 'Auth.GENERIC_ERROR') {
+  const info = extractErrorInfo(error);
+  const code = info.code || defaultCode;
+  const message = info.message || code || defaultCode;
+
+  const err = new Error(message);
+  err.code = code;
+  err.status = info.status;
+  err.raw = info.raw;
+  return err;
+}

package/src/utils/webauthn.js

@@ -0,0 +1,51 @@
+// src/utils/webauthn.js
+export 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, '');
+}
+
+export function serializeCredential(credential) {
+  const p = {
+    id: credential.id,
+    rawId: bufferToBase64URL(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: bufferToBase64URL(credential.response.clientDataJSON),
+    },
+  };
+
+  if (credential.response.attestationObject) {
+    p.response.attestationObject = bufferToBase64URL(credential.response.attestationObject);
+  }
+  if (credential.response.authenticatorData) {
+    p.response.authenticatorData = bufferToBase64URL(credential.response.authenticatorData);
+  }
+  if (credential.response.signature) {
+    p.response.signature = bufferToBase64URL(credential.response.signature);
+  }
+  if (credential.response.userHandle) {
+    p.response.userHandle = bufferToBase64URL(credential.response.userHandle);
+  }
+  
+  if (typeof credential.getClientExtensionResults === 'function') {
+    p.clientExtensionResults = credential.getClientExtensionResults();
+  }
+
+  return p;
+}
+
+export function ensureWebAuthnSupport() {
+  if (
+    typeof window === 'undefined' ||
+    typeof navigator === 'undefined' ||
+    !window.PublicKeyCredential ||
+    !navigator.credentials
+  ) {
+    throw new Error('Auth.PASSKEY_NOT_SUPPORTED');
+  }
+}