dauth-context-react 6.2.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dauth-context-react",
-  "version": "6.2.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);
@@ -314,6 +315,12 @@ export function DauthProfileModal({
   const [lastname, setLastname] = useState('');
   const [nickname, setNickname] = useState('');
   const [country, setCountry] = useState('');
+  const [telPrefix, setTelPrefix] = useState('');
+  const [telSuffix, setTelSuffix] = useState('');
+  const [birthDate, setBirthDate] = useState('');
+  const [customFieldValues, setCustomFieldValues] = useState<
+    Record<string, string>
+  >({});
   const [populated, setPopulated] = useState(false);
 
   // Status
@@ -352,6 +359,20 @@ export function DauthProfileModal({
       setLastname(user.lastname || '');
       setNickname(user.nickname || '');
       setCountry(user.country || '');
+      setTelPrefix(user.telPrefix || '');
+      setTelSuffix(user.telSuffix || '');
+      setBirthDate(
+        user.birthDate
+          ? new Date(user.birthDate)
+              .toISOString()
+              .split('T')[0]
+          : ''
+      );
+      const cf: Record<string, string> = {};
+      for (const f of domain.customFields ?? []) {
+        cf[f.key] = user.customFields?.[f.key] ?? '';
+      }
+      setCustomFieldValues(cf);
       setPopulated(true);
     }
     if (!open) {
@@ -414,13 +435,36 @@ export function DauthProfileModal({
 
   const hasChanges = useMemo(() => {
     if (!user?._id) return false;
+    const origBirthDate = user.birthDate
+      ? new Date(user.birthDate).toISOString().split('T')[0]
+      : '';
+    const cfChanged = (domain.customFields ?? []).some(
+      (f) =>
+        (customFieldValues[f.key] ?? '') !==
+        (user.customFields?.[f.key] ?? '')
+    );
     return (
       name !== (user.name || '') ||
       lastname !== (user.lastname || '') ||
       nickname !== (user.nickname || '') ||
-      country !== (user.country || '')
+      country !== (user.country || '') ||
+      telPrefix !== (user.telPrefix || '') ||
+      telSuffix !== (user.telSuffix || '') ||
+      birthDate !== origBirthDate ||
+      cfChanged
     );
-  }, [name, lastname, nickname, country, user]);
+  }, [
+    name,
+    lastname,
+    nickname,
+    country,
+    telPrefix,
+    telSuffix,
+    birthDate,
+    customFieldValues,
+    user,
+    domain.customFields,
+  ]);
 
   const canSave =
     name.trim().length > 0 && hasChanges && !saving;
@@ -428,10 +472,18 @@ export function DauthProfileModal({
   const handleSave = useCallback(async () => {
     setSaving(true);
     setStatus(null);
-    const fields: Record<string, string> = { name };
+    const fields: Record<string, any> = { name };
     if (hasField('lastname')) fields.lastname = lastname;
     if (hasField('nickname')) fields.nickname = nickname;
     if (hasField('country')) fields.country = country;
+    if (hasField('tel_prefix'))
+      fields.telPrefix = telPrefix;
+    if (hasField('tel_suffix'))
+      fields.telSuffix = telSuffix;
+    if (hasField('birth_date') && birthDate)
+      fields.birthDate = birthDate;
+    if ((domain.customFields ?? []).length > 0)
+      fields.customFields = customFieldValues;
     const ok = await updateUser(fields);
     setSaving(false);
     if (ok) {
@@ -445,7 +497,19 @@ export function DauthProfileModal({
         message: 'Something went wrong. Please try again.',
       });
     }
-  }, [name, lastname, nickname, country, hasField, updateUser]);
+  }, [
+    name,
+    lastname,
+    nickname,
+    country,
+    telPrefix,
+    telSuffix,
+    birthDate,
+    customFieldValues,
+    hasField,
+    updateUser,
+    domain.customFields,
+  ]);
 
   const handleDelete = useCallback(async () => {
     setDeleting(true);
@@ -507,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
@@ -530,7 +596,7 @@ export function DauthProfileModal({
         avatarInputRef.current.value = '';
       }
     },
-    [onAvatarUpload, updateUser]
+    [onAvatarUpload, updateUser, uploadAvatar]
   );
 
   const handleSignOut = useCallback(() => {
@@ -713,9 +779,7 @@ export function DauthProfileModal({
                   <div
                     style={{
                       ...avatarCircle,
-                      cursor: onAvatarUpload
-                        ? 'pointer'
-                        : 'default',
+                      cursor: 'pointer',
                       position: 'relative' as const,
                     }}
                     onClick={handleAvatarClick}
@@ -735,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 */}
@@ -862,6 +924,133 @@ export function DauthProfileModal({
                       />
                     </div>
                   )}
+
+                  {(hasField('tel_prefix') ||
+                    hasField('tel_suffix')) && (
+                    <div style={fieldGroup}>
+                      <div style={label}>
+                        Phone
+                        {isRequired('tel_prefix') ||
+                        isRequired('tel_suffix')
+                          ? ' *'
+                          : ''}
+                      </div>
+                      <div
+                        style={{
+                          display: 'flex',
+                          gap: 8,
+                        }}
+                      >
+                        {hasField('tel_prefix') && (
+                          <input
+                            id="dauth-tel-prefix"
+                            type="text"
+                            value={telPrefix}
+                            onChange={(e) =>
+                              setTelPrefix(e.target.value)
+                            }
+                            placeholder="+34"
+                            disabled={saving}
+                            style={{
+                              ...input,
+                              width: 80,
+                              flexShrink: 0,
+                            }}
+                            onFocus={inputFocusHandler}
+                            onBlur={inputBlurHandler}
+                            aria-label="Phone prefix"
+                          />
+                        )}
+                        {hasField('tel_suffix') && (
+                          <input
+                            id="dauth-tel-suffix"
+                            type="tel"
+                            value={telSuffix}
+                            onChange={(e) =>
+                              setTelSuffix(e.target.value)
+                            }
+                            placeholder="612 345 678"
+                            disabled={saving}
+                            style={{
+                              ...input,
+                              flex: 1,
+                            }}
+                            onFocus={inputFocusHandler}
+                            onBlur={inputBlurHandler}
+                            aria-label="Phone number"
+                          />
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {hasField('birth_date') && (
+                    <div style={fieldGroup}>
+                      <label
+                        htmlFor="dauth-birthdate"
+                        style={label}
+                      >
+                        Birth date
+                        {isRequired('birth_date')
+                          ? ' *'
+                          : ''}
+                      </label>
+                      <input
+                        id="dauth-birthdate"
+                        type="date"
+                        value={birthDate}
+                        onChange={(e) =>
+                          setBirthDate(e.target.value)
+                        }
+                        disabled={saving}
+                        style={input}
+                        onFocus={inputFocusHandler}
+                        onBlur={inputBlurHandler}
+                      />
+                    </div>
+                  )}
+
+                  {(domain.customFields ?? []).length >
+                    0 && (
+                    <>
+                      <hr style={separator} />
+                      {domain.customFields!.map((cf) => (
+                        <div
+                          key={cf.key}
+                          style={fieldGroup}
+                        >
+                          <label
+                            htmlFor={`dauth-cf-${cf.key}`}
+                            style={label}
+                          >
+                            {cf.label}
+                            {cf.required ? ' *' : ''}
+                          </label>
+                          <input
+                            id={`dauth-cf-${cf.key}`}
+                            type="text"
+                            value={
+                              customFieldValues[cf.key] ??
+                              ''
+                            }
+                            onChange={(e) =>
+                              setCustomFieldValues(
+                                (prev) => ({
+                                  ...prev,
+                                  [cf.key]:
+                                    e.target.value,
+                                })
+                              )
+                            }
+                            disabled={saving}
+                            style={input}
+                            onFocus={inputFocusHandler}
+                            onBlur={inputBlurHandler}
+                          />
+                        </div>
+                      ))}
+                    </>
+                  )}
                 </div>
 
                 {/* Language selector */}

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

@@ -17,6 +17,7 @@ import type {
   IDauthAuthMethods,
   IDauthUser,
   IFormField,
+  ICustomField,
   IModalTheme,
   IPasskeyCredential,
   DauthProfileModalProps,
@@ -27,6 +28,7 @@ export type {
   IDauthProviderProps,
   IDauthAuthMethods,
   IFormField,
+  ICustomField,
   IModalTheme,
   IPasskeyCredential,
   DauthProfileModalProps,
@@ -133,6 +135,11 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
     [ctx]
   );
 
+  const uploadAvatar = useCallback(
+    (file: File) => action.uploadAvatarAction(ctx, file),
+    [ctx]
+  );
+
   const memoProvider = useMemo(
     () => ({
       ...dauthState,
@@ -143,6 +150,7 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
       getPasskeyCredentials,
       registerPasskey,
       deletePasskeyCredential,
+      uploadAvatar,
     }),
     [
       dauthState,
@@ -153,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

@@ -16,6 +16,7 @@ export interface IDauthUser {
   birthDate?: Date;
   country?: string;
   metadata?: Record<string, unknown>;
+  customFields?: Record<string, string>;
   createdAt: Date;
   updatedAt: Date;
   lastLogin: Date;
@@ -36,6 +37,12 @@ export interface IFormField {
   required: boolean;
 }
 
+export interface ICustomField {
+  key: string;
+  label: string;
+  required: boolean;
+}
+
 export interface IModalTheme {
   accent?: string;
   accentHover?: string;
@@ -53,6 +60,7 @@ export interface IDauthDomainState {
   allowedOrigins: string[];
   authMethods?: IDauthAuthMethods;
   formFields?: IFormField[];
+  customFields?: ICustomField[];
   modalTheme?: IModalTheme;
 }
 
@@ -81,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,