dauth-context-react 6.4.0 → 6.6.0

package/src/api/dauth.api.ts

@@ -9,6 +9,8 @@ import {
   IPasskeyRegistrationFinishResponse,
   IDeletePasskeyResponse,
   IUploadAvatarResponse,
+  IPasskeyAuthStartResponse,
+  IPasskeyAuthFinishResponse,
 } from './interfaces/dauth.api.responses';
 
 function getCsrfToken(): string {
@@ -94,14 +96,11 @@ export async function deleteAccountAPI(
 export async function getPasskeyCredentialsAPI(
   basePath: string
 ): Promise<IPasskeyCredentialsResponse> {
-  const response = await fetch(
-    `${basePath}/passkey/credentials`,
-    {
-      method: 'GET',
-      headers: { 'X-CSRF-Token': getCsrfToken() },
-      credentials: 'include',
-    }
-  );
+  const response = await fetch(`${basePath}/passkey/credentials`, {
+    method: 'GET',
+    headers: { 'X-CSRF-Token': getCsrfToken() },
+    credentials: 'include',
+  });
   const data = await response.json();
   return { response, data };
 }
@@ -109,17 +108,14 @@ export async function getPasskeyCredentialsAPI(
 export async function startPasskeyRegistrationAPI(
   basePath: string
 ): Promise<IPasskeyRegistrationStartResponse> {
-  const response = await fetch(
-    `${basePath}/passkey/register/start`,
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-Token': getCsrfToken(),
-      },
-      credentials: 'include',
-    }
-  );
+  const response = await fetch(`${basePath}/passkey/register/start`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-Token': getCsrfToken(),
+    },
+    credentials: 'include',
+  });
   const data = await response.json();
   return { response, data };
 }
@@ -128,18 +124,45 @@ export async function finishPasskeyRegistrationAPI(
   basePath: string,
   body: { credential: unknown; name?: string }
 ): Promise<IPasskeyRegistrationFinishResponse> {
-  const response = await fetch(
-    `${basePath}/passkey/register/finish`,
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-Token': getCsrfToken(),
-      },
-      credentials: 'include',
-      body: JSON.stringify(body),
-    }
-  );
+  const response = await fetch(`${basePath}/passkey/register/finish`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-Token': getCsrfToken(),
+    },
+    credentials: 'include',
+    body: JSON.stringify(body),
+  });
+  const data = await response.json();
+  return { response, data };
+}
+
+export async function startPasskeyAuthAPI(
+  basePath: string
+): Promise<IPasskeyAuthStartResponse> {
+  const response = await fetch(`${basePath}/passkey/auth-start`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+  });
+  const data = await response.json();
+  return { response, data };
+}
+
+export async function finishPasskeyAuthAPI(
+  basePath: string,
+  body: { credential: unknown; sessionId: string }
+): Promise<IPasskeyAuthFinishResponse> {
+  const response = await fetch(`${basePath}/passkey/auth-finish`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+    body: JSON.stringify(body),
+  });
   const data = await response.json();
   return { response, data };
 }

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

@@ -70,6 +70,24 @@ export interface IDeletePasskeyResponse {
   };
 }
 
+export interface IPasskeyAuthStartResponse {
+  response: Response;
+  data: {
+    status: string;
+    options?: Record<string, unknown>;
+    sessionId?: string;
+  };
+}
+
+export interface IPasskeyAuthFinishResponse {
+  response: Response;
+  data: {
+    status: string;
+    redirect?: string;
+    message?: string;
+  };
+}
+
 export interface IUploadAvatarResponse {
   response: Response;
   data: {

package/src/api/utils/config.ts

@@ -12,15 +12,9 @@ function checkIsLocalhost(): boolean {
   return (
     hostname === 'localhost' ||
     hostname === '[::1]' ||
-    /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(
-      hostname
-    ) ||
-    /^192\.168(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){2}$/.test(
-      hostname
-    ) ||
-    /^10(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(
-      hostname
-    )
+    /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(hostname) ||
+    /^192\.168(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){2}$/.test(hostname) ||
+    /^10(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(hostname)
   );
 }
 

package/src/index.tsx

@@ -21,6 +21,7 @@ import type {
   IModalTheme,
   IPasskeyCredential,
   DauthProfileModalProps,
+  ThemeMode,
 } from './interfaces';
 
 export { DauthProfileModal } from './DauthProfileModal';
@@ -32,6 +33,7 @@ export type {
   IModalTheme,
   IPasskeyCredential,
   DauthProfileModalProps,
+  ThemeMode,
 };
 
 const defaultOnError = (error: Error) => console.error(error);
@@ -92,10 +94,12 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
         telPrefix,
         telSuffix,
         language,
+        theme,
         avatar,
         birthDate,
         country,
         metadata,
+        customFields,
       } = fields;
       const user = {
         name,
@@ -104,10 +108,12 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
         telPrefix,
         telSuffix,
         language,
+        theme,
         avatar,
         birthDate,
         country,
         metadata,
+        customFields,
       } as Partial<IDauthUser>;
       return action.updateUserAction(ctx, user);
     },
@@ -140,6 +146,11 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
     [ctx]
   );
 
+  const loginWithPasskey = useCallback(
+    () => action.loginWithPasskeyAction(ctx),
+    [ctx]
+  );
+
   const memoProvider = useMemo(
     () => ({
       ...dauthState,
@@ -151,6 +162,7 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
       registerPasskey,
       deletePasskeyCredential,
       uploadAvatar,
+      loginWithPasskey,
     }),
     [
       dauthState,
@@ -162,6 +174,7 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
       registerPasskey,
       deletePasskeyCredential,
       uploadAvatar,
+      loginWithPasskey,
     ]
   );
 

package/src/initialDauthState.ts

@@ -6,6 +6,7 @@ const initialDauthState: IDauthState = {
       (typeof window !== 'undefined'
         ? window.document.documentElement.getAttribute('lang')
         : null) || 'es',
+    theme: 'system',
   } as IDauthUser,
   domain: {} as IDauthDomainState,
   isLoading: true,
@@ -18,6 +19,7 @@ const initialDauthState: IDauthState = {
   registerPasskey: () => Promise.resolve(null),
   deletePasskeyCredential: () => Promise.resolve(false),
   uploadAvatar: () => Promise.resolve(false),
+  loginWithPasskey: () => Promise.resolve(false),
 };
 
 export default initialDauthState;

package/src/interfaces.ts

@@ -1,3 +1,5 @@
+export type ThemeMode = 'dark' | 'light' | 'system';
+
 export interface IDauthUser {
   _id: string;
   name: string;
@@ -6,6 +8,7 @@ export interface IDauthUser {
   email: string;
   isVerified: boolean;
   language: string;
+  theme: ThemeMode;
   avatar: {
     id: string;
     url: string;
@@ -83,13 +86,10 @@ export interface IDauthState {
   updateUser: (fields: Partial<IDauthUser>) => Promise<boolean>;
   deleteAccount: () => Promise<boolean>;
   getPasskeyCredentials: () => Promise<IPasskeyCredential[]>;
-  registerPasskey: (
-    name?: string
-  ) => Promise<IPasskeyCredential | null>;
-  deletePasskeyCredential: (
-    credentialId: string
-  ) => Promise<boolean>;
+  registerPasskey: (name?: string) => Promise<IPasskeyCredential | null>;
+  deletePasskeyCredential: (credentialId: string) => Promise<boolean>;
   uploadAvatar: (file: File) => Promise<boolean>;
+  loginWithPasskey: () => Promise<boolean>;
 }
 
 export interface DauthProfileModalProps {

package/src/reducer/dauth.actions.ts

@@ -9,9 +9,11 @@ import {
   finishPasskeyRegistrationAPI,
   deletePasskeyCredentialAPI,
   uploadAvatarAPI,
+  startPasskeyAuthAPI,
+  finishPasskeyAuthAPI,
 } from '../api/dauth.api';
 import type { IPasskeyCredential } from '../api/interfaces/dauth.api.responses';
-import { createPasskeyCredential } from '../webauthn';
+import { createPasskeyCredential, getPasskeyCredential } from '../webauthn';
 import { IDauthDomainState, IDauthUser } from '../interfaces';
 import * as DauthTypes from './dauth.types';
 
@@ -182,38 +184,31 @@ export async function registerPasskeyAction(
   const { authProxyPath, onError } = ctx;
   try {
     // Step 1: Get registration options from server
-    const startResult =
-      await startPasskeyRegistrationAPI(authProxyPath);
+    const startResult = await startPasskeyRegistrationAPI(authProxyPath);
     if (startResult.response.status !== 200) {
       onError(new Error('Failed to start passkey registration'));
       return null;
     }
 
     // Step 2: Execute WebAuthn ceremony in the browser
-    const credential = await createPasskeyCredential(
-      startResult.data
-    );
+    const credential = await createPasskeyCredential(startResult.data);
 
     // Step 3: Send the credential back to the server
-    const finishResult = await finishPasskeyRegistrationAPI(
-      authProxyPath,
-      { credential, name }
-    );
+    const finishResult = await finishPasskeyRegistrationAPI(authProxyPath, {
+      credential,
+      name,
+    });
     if (
       finishResult.response.status === 200 ||
       finishResult.response.status === 201
     ) {
       return finishResult.data.credential;
     }
-    onError(
-      new Error('Failed to finish passkey registration')
-    );
+    onError(new Error('Failed to finish passkey registration'));
     return null;
   } catch (error) {
     onError(
-      error instanceof Error
-        ? error
-        : new Error('Passkey registration error')
+      error instanceof Error ? error : new Error('Passkey registration error')
     );
     return null;
   }
@@ -231,11 +226,7 @@ export async function deletePasskeyCredentialAction(
     );
     return result.response.status === 200;
   } catch (error) {
-    onError(
-      error instanceof Error
-        ? error
-        : new Error('Delete passkey error')
-    );
+    onError(error instanceof Error ? error : new Error('Delete passkey error'));
     return false;
   }
 }
@@ -254,18 +245,84 @@ export async function uploadAvatarAction(
       });
       return true;
     }
-    onError(
-      new Error(
-        'Avatar upload error: ' + result.data.message
-      )
+    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 async function loginWithPasskeyAction(
+  ctx: ActionContext
+): Promise<boolean> {
+  const { dispatch, authProxyPath, onError } = ctx;
+  dispatch({
+    type: DauthTypes.SET_IS_LOADING,
+    payload: { isLoading: true },
+  });
+
+  try {
+    // Step 1: Get authentication options
+    const startResult = await startPasskeyAuthAPI(authProxyPath);
+    if (startResult.data.status !== 'success' || !startResult.data.options) {
+      dispatch({
+        type: DauthTypes.SET_IS_LOADING,
+        payload: { isLoading: false },
+      });
+      return false;
+    }
+
+    // Step 2: Run WebAuthn ceremony
+    const credential = await getPasskeyCredential(
+      startResult.data.options as Record<string, any>
     );
+
+    // Step 3: Verify credential with server
+    const finishResult = await finishPasskeyAuthAPI(authProxyPath, {
+      credential,
+      sessionId: startResult.data.sessionId!,
+    });
+
+    if (
+      finishResult.data.status === 'login-success' &&
+      finishResult.data.redirect
+    ) {
+      // The redirect URL contains ?code=... for the auth code exchange
+      const code = new URL(finishResult.data.redirect).searchParams.get('code');
+      if (code) {
+        const exchangeResult = await exchangeCodeAPI(authProxyPath, code);
+        if (exchangeResult.response.status === 200) {
+          dispatch({
+            type: DauthTypes.LOGIN,
+            payload: {
+              user: exchangeResult.data.user,
+              domain: exchangeResult.data.domain,
+              isAuthenticated: true,
+            },
+          });
+          dispatch({
+            type: DauthTypes.SET_IS_LOADING,
+            payload: { isLoading: false },
+          });
+          return true;
+        }
+      }
+    }
+
+    dispatch({
+      type: DauthTypes.SET_IS_LOADING,
+      payload: { isLoading: false },
+    });
     return false;
   } catch (error) {
     onError(
-      error instanceof Error
-        ? error
-        : new Error('Avatar upload error')
+      error instanceof Error ? error : new Error('Passkey authentication error')
     );
+    dispatch({
+      type: DauthTypes.SET_IS_LOADING,
+      payload: { isLoading: false },
+    });
     return false;
   }
 }

package/src/webauthn.ts

@@ -3,12 +3,8 @@
  * Uses the raw Web Credentials API — no external dependencies.
  */
 
-export function base64urlToBuffer(
-  base64url: string
-): ArrayBuffer {
-  const base64 = base64url
-    .replace(/-/g, '+')
-    .replace(/_/g, '/');
+export function base64urlToBuffer(base64url: string): ArrayBuffer {
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
   const pad = base64.length % 4;
   const padded = pad ? base64 + '='.repeat(4 - pad) : base64;
   const binary = atob(padded);
@@ -19,9 +15,7 @@ export function base64urlToBuffer(
   return bytes.buffer;
 }
 
-export function bufferToBase64url(
-  buffer: ArrayBuffer
-): string {
+export function bufferToBase64url(buffer: ArrayBuffer): string {
   const bytes = new Uint8Array(buffer);
   let binary = '';
   for (let i = 0; i < bytes.length; i++) {
@@ -44,17 +38,16 @@ export async function createPasskeyCredential(
 ): Promise<Record<string, any>> {
   const publicKey = {
     ...options,
+    rp: { ...options.rp, id: window.location.hostname },
     challenge: base64urlToBuffer(options.challenge),
     user: {
       ...options.user,
       id: base64urlToBuffer(options.user.id),
     },
-    excludeCredentials: (options.excludeCredentials ?? []).map(
-      (c: any) => ({
-        ...c,
-        id: base64urlToBuffer(c.id),
-      })
-    ),
+    excludeCredentials: (options.excludeCredentials ?? []).map((c: any) => ({
+      ...c,
+      id: base64urlToBuffer(c.id),
+    })),
   } as PublicKeyCredentialCreationOptions;
 
   const credential = (await navigator.credentials.create({
@@ -65,34 +58,26 @@ export async function createPasskeyCredential(
     throw new Error('Passkey registration was cancelled');
   }
 
-  const attestation =
-    credential.response as AuthenticatorAttestationResponse;
+  const attestation = credential.response as AuthenticatorAttestationResponse;
 
   return {
     id: credential.id,
     rawId: bufferToBase64url(credential.rawId),
     type: credential.type,
     response: {
-      clientDataJSON: bufferToBase64url(
-        attestation.clientDataJSON
-      ),
-      attestationObject: bufferToBase64url(
-        attestation.attestationObject
-      ),
+      clientDataJSON: bufferToBase64url(attestation.clientDataJSON),
+      attestationObject: bufferToBase64url(attestation.attestationObject),
       ...(attestation.getTransports
         ? { transports: attestation.getTransports() }
         : {}),
       ...(attestation.getPublicKeyAlgorithm
         ? {
-            publicKeyAlgorithm:
-              attestation.getPublicKeyAlgorithm(),
+            publicKeyAlgorithm: attestation.getPublicKeyAlgorithm(),
           }
         : {}),
       ...(attestation.getPublicKey
         ? {
-            publicKey: bufferToBase64url(
-              attestation.getPublicKey()!
-            ),
+            publicKey: bufferToBase64url(attestation.getPublicKey()!),
           }
         : {}),
       ...(attestation.getAuthenticatorData
@@ -103,9 +88,54 @@ export async function createPasskeyCredential(
           }
         : {}),
     },
-    clientExtensionResults:
-      credential.getClientExtensionResults(),
-    authenticatorAttachment:
-      credential.authenticatorAttachment ?? undefined,
+    clientExtensionResults: credential.getClientExtensionResults(),
+    authenticatorAttachment: credential.authenticatorAttachment ?? undefined,
+  };
+}
+
+/**
+ * Converts server-provided authentication options (base64url strings)
+ * into the format expected by navigator.credentials.get(),
+ * executes the WebAuthn ceremony, and serializes the response
+ * back to JSON with base64url-encoded ArrayBuffers.
+ */
+export async function getPasskeyCredential(
+  options: Record<string, any>
+): Promise<Record<string, any>> {
+  const publicKey: PublicKeyCredentialRequestOptions = {
+    challenge: base64urlToBuffer(options.challenge),
+    timeout: options.timeout,
+    rpId: window.location.hostname,
+    userVerification: options.userVerification || 'preferred',
+    allowCredentials: (options.allowCredentials || []).map(
+      (c: { id: string; type: string; transports?: string[] }) => ({
+        ...c,
+        id: base64urlToBuffer(c.id),
+      })
+    ),
+  };
+
+  const credential = (await navigator.credentials.get({
+    publicKey,
+  })) as PublicKeyCredential;
+
+  if (!credential) throw new Error('No credential returned');
+
+  const assertion = credential.response as AuthenticatorAssertionResponse;
+
+  return {
+    id: credential.id,
+    rawId: bufferToBase64url(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: bufferToBase64url(assertion.clientDataJSON),
+      authenticatorData: bufferToBase64url(assertion.authenticatorData),
+      signature: bufferToBase64url(assertion.signature),
+      userHandle: assertion.userHandle
+        ? bufferToBase64url(assertion.userHandle)
+        : null,
+    },
+    clientExtensionResults: credential.getClientExtensionResults(),
+    authenticatorAttachment: credential.authenticatorAttachment,
   };
 }