dauth-context-react 6.3.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dauth-context-react",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "React provider and hook for passwordless authentication via the Dauth service (BFF pattern with httpOnly cookies)",
   "license": "MIT",
   "author": "David T. Pizarro Frick",

package/src/DauthProfileModal.tsx

@@ -299,6 +299,7 @@ export function DauthProfileModal({
     getPasskeyCredentials,
     registerPasskey,
     deletePasskeyCredential,
+    uploadAvatar,
   } = useDauth();
   const isDesktop = useMediaQuery('(min-width: 641px)');
   const phase = useModalAnimation(open);
@@ -570,20 +571,22 @@ export function DauthProfileModal({
   );
 
   const handleAvatarClick = useCallback(() => {
-    if (onAvatarUpload) {
-      avatarInputRef.current?.click();
-    }
-  }, [onAvatarUpload]);
+    avatarInputRef.current?.click();
+  }, []);
 
   const handleAvatarChange = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0];
-      if (!file || !onAvatarUpload) return;
+      if (!file) return;
       setUploadingAvatar(true);
       try {
-        const url = await onAvatarUpload(file);
-        if (url) {
-          await updateUser({ avatar: url } as any);
+        if (onAvatarUpload) {
+          const url = await onAvatarUpload(file);
+          if (url) {
+            await updateUser({ avatar: url } as any);
+          }
+        } else {
+          await uploadAvatar(file);
         }
       } catch {
         // Error handled by onError callback
@@ -593,7 +596,7 @@ export function DauthProfileModal({
         avatarInputRef.current.value = '';
       }
     },
-    [onAvatarUpload, updateUser]
+    [onAvatarUpload, updateUser, uploadAvatar]
   );
 
   const handleSignOut = useCallback(() => {
@@ -776,9 +779,7 @@ export function DauthProfileModal({
                   <div
                     style={{
                       ...avatarCircle,
-                      cursor: onAvatarUpload
-                        ? 'pointer'
-                        : 'default',
+                      cursor: 'pointer',
                       position: 'relative' as const,
                     }}
                     onClick={handleAvatarClick}
@@ -798,22 +799,20 @@ export function DauthProfileModal({
                     ) : (
                       avatarInitial
                     )}
-                    {onAvatarUpload && !uploadingAvatar && (
+                    {!uploadingAvatar && (
                       <div style={avatarOverlay}>
                         <IconCamera />
                       </div>
                     )}
                   </div>
                   <div style={emailText}>{user.email}</div>
-                  {onAvatarUpload && (
-                    <input
-                      ref={avatarInputRef}
-                      type="file"
-                      accept="image/*"
-                      style={{ display: 'none' }}
-                      onChange={handleAvatarChange}
-                    />
-                  )}
+                  <input
+                    ref={avatarInputRef}
+                    type="file"
+                    accept="image/*"
+                    style={{ display: 'none' }}
+                    onChange={handleAvatarChange}
+                  />
                 </div>
 
                 {/* Status */}

package/src/api/dauth.api.ts

@@ -8,6 +8,7 @@ import {
   IPasskeyRegistrationStartResponse,
   IPasskeyRegistrationFinishResponse,
   IDeletePasskeyResponse,
+  IUploadAvatarResponse,
 } from './interfaces/dauth.api.responses';
 
 function getCsrfToken(): string {
@@ -158,3 +159,19 @@ export async function deletePasskeyCredentialAPI(
   const data = await response.json();
   return { response, data };
 }
+
+export async function uploadAvatarAPI(
+  basePath: string,
+  file: File
+): Promise<IUploadAvatarResponse> {
+  const formData = new FormData();
+  formData.append('avatar', file);
+  const response = await fetch(`${basePath}/avatar`, {
+    method: 'POST',
+    headers: { 'X-CSRF-Token': getCsrfToken() },
+    credentials: 'include',
+    body: formData,
+  });
+  const data = await response.json();
+  return { response, data };
+}

package/src/api/interfaces/dauth.api.responses.ts

@@ -69,3 +69,12 @@ export interface IDeletePasskeyResponse {
     message: string;
   };
 }
+
+export interface IUploadAvatarResponse {
+  response: Response;
+  data: {
+    status: string;
+    user: IDauthUser;
+    message: string;
+  };
+}

package/src/index.tsx

@@ -135,6 +135,11 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
     [ctx]
   );
 
+  const uploadAvatar = useCallback(
+    (file: File) => action.uploadAvatarAction(ctx, file),
+    [ctx]
+  );
+
   const memoProvider = useMemo(
     () => ({
       ...dauthState,
@@ -145,6 +150,7 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
       getPasskeyCredentials,
       registerPasskey,
       deletePasskeyCredential,
+      uploadAvatar,
     }),
     [
       dauthState,
@@ -155,6 +161,7 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
       getPasskeyCredentials,
       registerPasskey,
       deletePasskeyCredential,
+      uploadAvatar,
     ]
   );
 

package/src/initialDauthState.ts

@@ -17,6 +17,7 @@ const initialDauthState: IDauthState = {
   getPasskeyCredentials: () => Promise.resolve([]),
   registerPasskey: () => Promise.resolve(null),
   deletePasskeyCredential: () => Promise.resolve(false),
+  uploadAvatar: () => Promise.resolve(false),
 };
 
 export default initialDauthState;

package/src/interfaces.ts

@@ -89,14 +89,15 @@ export interface IDauthState {
   deletePasskeyCredential: (
     credentialId: string
   ) => Promise<boolean>;
+  uploadAvatar: (file: File) => Promise<boolean>;
 }
 
 export interface DauthProfileModalProps {
   open: boolean;
   onClose: () => void;
-  /** Optional: provide a function to handle avatar upload.
+  /** Optional override for avatar upload.
    *  Receives a File, should return the URL string.
-   *  If not provided, the avatar edit button is hidden. */
+   *  If not provided, uses the built-in upload via the auth proxy. */
   onAvatarUpload?: (file: File) => Promise<string>;
 }
 

package/src/reducer/dauth.actions.ts

@@ -8,6 +8,7 @@ import {
   startPasskeyRegistrationAPI,
   finishPasskeyRegistrationAPI,
   deletePasskeyCredentialAPI,
+  uploadAvatarAPI,
 } from '../api/dauth.api';
 import type { IPasskeyCredential } from '../api/interfaces/dauth.api.responses';
 import { createPasskeyCredential } from '../webauthn';
@@ -239,6 +240,36 @@ export async function deletePasskeyCredentialAction(
   }
 }
 
+export async function uploadAvatarAction(
+  ctx: ActionContext,
+  file: File
+): Promise<boolean> {
+  const { dispatch, authProxyPath, onError } = ctx;
+  try {
+    const result = await uploadAvatarAPI(authProxyPath, file);
+    if (result.response.status === 200) {
+      dispatch({
+        type: DauthTypes.UPDATE_USER,
+        payload: result.data.user,
+      });
+      return true;
+    }
+    onError(
+      new Error(
+        'Avatar upload error: ' + result.data.message
+      )
+    );
+    return false;
+  } catch (error) {
+    onError(
+      error instanceof Error
+        ? error
+        : new Error('Avatar upload error')
+    );
+    return false;
+  }
+}
+
 export const resetUser = (dispatch: React.Dispatch<any>) => {
   return dispatch({
     type: DauthTypes.LOGIN,