dauth-context-react 6.0.0 → 6.2.0

package/src/api/dauth.api.ts

@@ -4,6 +4,10 @@ import {
   ISessionResponse,
   IUpdateUserResponse,
   IDeleteAccountResponse,
+  IPasskeyCredentialsResponse,
+  IPasskeyRegistrationStartResponse,
+  IPasskeyRegistrationFinishResponse,
+  IDeletePasskeyResponse,
 } from './interfaces/dauth.api.responses';
 
 function getCsrfToken(): string {
@@ -85,3 +89,72 @@ export async function deleteAccountAPI(
   const data = await response.json();
   return { response, data };
 }
+
+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 data = await response.json();
+  return { response, data };
+}
+
+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 data = await response.json();
+  return { response, data };
+}
+
+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 data = await response.json();
+  return { response, data };
+}
+
+export async function deletePasskeyCredentialAPI(
+  basePath: string,
+  credentialId: string
+): Promise<IDeletePasskeyResponse> {
+  const response = await fetch(
+    `${basePath}/passkey/credentials/${credentialId}`,
+    {
+      method: 'DELETE',
+      headers: { 'X-CSRF-Token': getCsrfToken() },
+      credentials: 'include',
+    }
+  );
+  const data = await response.json();
+  return { response, data };
+}

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

@@ -33,3 +33,39 @@ export interface IDeleteAccountResponse {
     message: string;
   };
 }
+
+export interface IPasskeyCredential {
+  _id: string;
+  name?: string;
+  deviceType: 'singleDevice' | 'multiDevice';
+  backedUp: boolean;
+  createdAt: string;
+  lastUsedAt?: string;
+}
+
+export interface IPasskeyCredentialsResponse {
+  response: Response;
+  data: {
+    credentials: IPasskeyCredential[];
+  };
+}
+
+export interface IPasskeyRegistrationStartResponse {
+  response: Response;
+  data: Record<string, unknown>;
+}
+
+export interface IPasskeyRegistrationFinishResponse {
+  response: Response;
+  data: {
+    credential: IPasskeyCredential;
+    message: string;
+  };
+}
+
+export interface IDeletePasskeyResponse {
+  response: Response;
+  data: {
+    message: string;
+  };
+}

package/src/index.tsx

@@ -17,6 +17,8 @@ import type {
   IDauthAuthMethods,
   IDauthUser,
   IFormField,
+  IModalTheme,
+  IPasskeyCredential,
   DauthProfileModalProps,
 } from './interfaces';
 
@@ -25,6 +27,8 @@ export type {
   IDauthProviderProps,
   IDauthAuthMethods,
   IFormField,
+  IModalTheme,
+  IPasskeyCredential,
   DauthProfileModalProps,
 };
 
@@ -113,6 +117,22 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
     [ctx]
   );
 
+  const getPasskeyCredentials = useCallback(
+    () => action.getPasskeyCredentialsAction(ctx),
+    [ctx]
+  );
+
+  const registerPasskey = useCallback(
+    (name?: string) => action.registerPasskeyAction(ctx, name),
+    [ctx]
+  );
+
+  const deletePasskeyCredential = useCallback(
+    (credentialId: string) =>
+      action.deletePasskeyCredentialAction(ctx, credentialId),
+    [ctx]
+  );
+
   const memoProvider = useMemo(
     () => ({
       ...dauthState,
@@ -120,8 +140,20 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
       logout,
       updateUser,
       deleteAccount,
+      getPasskeyCredentials,
+      registerPasskey,
+      deletePasskeyCredential,
     }),
-    [dauthState, loginWithRedirect, logout, updateUser, deleteAccount]
+    [
+      dauthState,
+      loginWithRedirect,
+      logout,
+      updateUser,
+      deleteAccount,
+      getPasskeyCredentials,
+      registerPasskey,
+      deletePasskeyCredential,
+    ]
   );
 
   return (

package/src/initialDauthState.ts

@@ -14,6 +14,9 @@ const initialDauthState: IDauthState = {
   logout: () => {},
   updateUser: () => Promise.resolve(false),
   deleteAccount: () => Promise.resolve(false),
+  getPasskeyCredentials: () => Promise.resolve([]),
+  registerPasskey: () => Promise.resolve(null),
+  deletePasskeyCredential: () => Promise.resolve(false),
 };
 
 export default initialDauthState;

package/src/interfaces.ts

@@ -36,6 +36,16 @@ export interface IFormField {
   required: boolean;
 }
 
+export interface IModalTheme {
+  accent?: string;
+  accentHover?: string;
+  surface?: string;
+  surfaceHover?: string;
+  textPrimary?: string;
+  textSecondary?: string;
+  border?: string;
+}
+
 export interface IDauthDomainState {
   name: string;
   environments?: IDauthDomainEnvironment[];
@@ -43,6 +53,16 @@ export interface IDauthDomainState {
   allowedOrigins: string[];
   authMethods?: IDauthAuthMethods;
   formFields?: IFormField[];
+  modalTheme?: IModalTheme;
+}
+
+export interface IPasskeyCredential {
+  _id: string;
+  name?: string;
+  deviceType: 'singleDevice' | 'multiDevice';
+  backedUp: boolean;
+  createdAt: string;
+  lastUsedAt?: string;
 }
 
 export interface IDauthState {
@@ -54,11 +74,22 @@ export interface IDauthState {
   logout: () => void;
   updateUser: (fields: Partial<IDauthUser>) => Promise<boolean>;
   deleteAccount: () => Promise<boolean>;
+  getPasskeyCredentials: () => Promise<IPasskeyCredential[]>;
+  registerPasskey: (
+    name?: string
+  ) => Promise<IPasskeyCredential | null>;
+  deletePasskeyCredential: (
+    credentialId: string
+  ) => Promise<boolean>;
 }
 
 export interface DauthProfileModalProps {
   open: boolean;
   onClose: () => void;
+  /** Optional: provide a function to handle avatar upload.
+   *  Receives a File, should return the URL string.
+   *  If not provided, the avatar edit button is hidden. */
+  onAvatarUpload?: (file: File) => Promise<string>;
 }
 
 export interface IActionStatus {

package/src/reducer/dauth.actions.ts

@@ -4,7 +4,13 @@ import {
   logoutAPI,
   updateUserAPI,
   deleteAccountAPI,
+  getPasskeyCredentialsAPI,
+  startPasskeyRegistrationAPI,
+  finishPasskeyRegistrationAPI,
+  deletePasskeyCredentialAPI,
 } from '../api/dauth.api';
+import type { IPasskeyCredential } from '../api/interfaces/dauth.api.responses';
+import { createPasskeyCredential } from '../webauthn';
 import { IDauthDomainState, IDauthUser } from '../interfaces';
 import * as DauthTypes from './dauth.types';
 
@@ -148,6 +154,91 @@ export async function deleteAccountAction(
   }
 }
 
+export async function getPasskeyCredentialsAction(
+  ctx: ActionContext
+): Promise<IPasskeyCredential[]> {
+  const { authProxyPath, onError } = ctx;
+  try {
+    const result = await getPasskeyCredentialsAPI(authProxyPath);
+    if (result.response.status === 200) {
+      return result.data.credentials ?? [];
+    }
+    return [];
+  } catch (error) {
+    onError(
+      error instanceof Error
+        ? error
+        : new Error('Get passkey credentials error')
+    );
+    return [];
+  }
+}
+
+export async function registerPasskeyAction(
+  ctx: ActionContext,
+  name?: string
+): Promise<IPasskeyCredential | null> {
+  const { authProxyPath, onError } = ctx;
+  try {
+    // Step 1: Get registration options from server
+    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
+    );
+
+    // Step 3: Send the credential back to the server
+    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')
+    );
+    return null;
+  } catch (error) {
+    onError(
+      error instanceof Error
+        ? error
+        : new Error('Passkey registration error')
+    );
+    return null;
+  }
+}
+
+export async function deletePasskeyCredentialAction(
+  ctx: ActionContext,
+  credentialId: string
+): Promise<boolean> {
+  const { authProxyPath, onError } = ctx;
+  try {
+    const result = await deletePasskeyCredentialAPI(
+      authProxyPath,
+      credentialId
+    );
+    return result.response.status === 200;
+  } catch (error) {
+    onError(
+      error instanceof Error
+        ? error
+        : new Error('Delete passkey error')
+    );
+    return false;
+  }
+}
+
 export const resetUser = (dispatch: React.Dispatch<any>) => {
   return dispatch({
     type: DauthTypes.LOGIN,

package/src/webauthn.ts

@@ -0,0 +1,111 @@
+/**
+ * Minimal WebAuthn helpers for passkey registration.
+ * Uses the raw Web Credentials API — no external dependencies.
+ */
+
+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);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+}
+
+export function bufferToBase64url(
+  buffer: ArrayBuffer
+): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+}
+
+/**
+ * Converts server-provided registration options (base64url strings)
+ * into the format expected by navigator.credentials.create(),
+ * executes the WebAuthn ceremony, and serializes the response
+ * back to JSON with base64url-encoded ArrayBuffers.
+ */
+export async function createPasskeyCredential(
+  options: Record<string, any>
+): Promise<Record<string, any>> {
+  const publicKey = {
+    ...options,
+    challenge: base64urlToBuffer(options.challenge),
+    user: {
+      ...options.user,
+      id: base64urlToBuffer(options.user.id),
+    },
+    excludeCredentials: (options.excludeCredentials ?? []).map(
+      (c: any) => ({
+        ...c,
+        id: base64urlToBuffer(c.id),
+      })
+    ),
+  } as PublicKeyCredentialCreationOptions;
+
+  const credential = (await navigator.credentials.create({
+    publicKey,
+  })) as PublicKeyCredential;
+
+  if (!credential) {
+    throw new Error('Passkey registration was cancelled');
+  }
+
+  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
+      ),
+      ...(attestation.getTransports
+        ? { transports: attestation.getTransports() }
+        : {}),
+      ...(attestation.getPublicKeyAlgorithm
+        ? {
+            publicKeyAlgorithm:
+              attestation.getPublicKeyAlgorithm(),
+          }
+        : {}),
+      ...(attestation.getPublicKey
+        ? {
+            publicKey: bufferToBase64url(
+              attestation.getPublicKey()!
+            ),
+          }
+        : {}),
+      ...(attestation.getAuthenticatorData
+        ? {
+            authenticatorData: bufferToBase64url(
+              attestation.getAuthenticatorData()
+            ),
+          }
+        : {}),
+    },
+    clientExtensionResults:
+      credential.getClientExtensionResults(),
+    authenticatorAttachment:
+      credential.authenticatorAttachment ?? undefined,
+  };
+}