Biometric Authentication for Sensitive JSON Operations

// Assume 'sensitivePayload' is the JSON data for the operation
// Assume user's credentials (Credential ID) are known or discovered by the browser

async function performSensitiveOperationWithBiometrics(sensitivePayload: any) {
  try {
    // 1. Get challenge from backend
    const authOptions = await fetch('/api/settings/update/auth-challenge', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      // Optional: Send context about the operation if needed for challenge generation
      body: JSON.stringify({ operation: 'update_settings' })
    }).then(res => res.json());

    // 2. Perform WebAuthn authentication
    const assertion = await navigator.credentials.get({
      publicKey: {
         challenge: new Uint8Array(authOptions.challenge), // Decode challenge
         allowCredentials: authOptions.allowCredentials.map((cred: any) => ({ // Use allowed credentials
           id: new Uint8Array(cred.id),
           type: cred.type,
           transports: cred.transports
         })),
         userVerification: authOptions.userVerification, // 'required', 'preferred', or 'discouraged'
         timeout: authOptions.timeout
         // rpId: authOptions.rpId // Usually required
      }
    });

    // 3. Send sensitive data AND assertion to backend
    const response = await fetch('/api/settings/update', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        payload: sensitivePayload,
        authAssertion: { // Serialize the assertion for sending
          id: assertion.id,
          rawId: Array.from(new Uint8Array(assertion.rawId)), // Convert Uint8Array to array
          response: {
            clientDataJSON: Array.from(new Uint8Array(assertion.response.clientDataJSON)),
            authenticatorData: Array.from(new Uint8Array(assertion.response.authenticatorData)),
            signature: Array.from(new Uint8Array(assertion.response.signature)),
            userHandle: assertion.response.userHandle ? Array.from(new Uint8Array(assertion.response.userHandle)) : null,
          },
          type: assertion.type,
        }
      })
    });

    if (response.ok) {
      console.log('Sensitive operation successful and verified.');
      // Handle successful response (e.g., update UI)
    } else {
      console.error('Sensitive operation failed:', response.statusText);
      // Handle errors (e.g., display error message)
    }

  } catch (error) {
    console.error('Biometric authentication or operation failed:', error);
    // Handle errors (e.g., user cancelled biometric prompt, device error)
  }
}

// Example call (conceptual button click handler)
// const mySensitiveData = { username: 'alice', criticalSetting: true };
// performSensitiveOperationWithBiometrics(mySensitiveData);

// Example Backend Endpoint handler (e.g., in a Next.js API route)
// POST /api/settings/update

import type { NextApiRequest, NextApiResponse } from 'next';
// import { verifyAuthenticationResponse } from '@simplewebauthn/server'; // Example library

type SensitiveOperationRequest = {
  payload: any; // The sensitive JSON data
  authAssertion: any; // The serialized WebAuthn assertion
};

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method Not Allowed' });
  }

  const { payload, authAssertion }: SensitiveOperationRequest = req.body;

  if (!payload || !authAssertion) {
    return res.status(400).json({ message: 'Missing payload or authentication assertion' });
  }

  try {
    // 1. Get user & stored credential data (replace with your database lookup)
    const userId = '...'; // Get user ID from session or payload context
    const user = await getUserFromDatabase(userId);
    if (!user) {
      return res.status(404).json({ message: 'User not found' });
    }

    // Find the credential used for this authentication attempt by ID
    const userCredential = user.webauthnCredentials.find((cred: any) => cred.credentialId === authAssertion.id);
    if (!userCredential) {
         return res.status(400).json({ message: 'Credential not registered for user' });
    }

    // 2. Get the challenge that was issued for THIS specific operation request
    // This challenge must have been stored temporarily, linked to the user and request intent
    const expectedChallenge = await getStoredChallenge(userId, 'update_settings');
    if (!expectedChallenge) {
        return res.status(400).json({ message: 'No valid challenge found for this operation' });
    }

    // 3. Define verification options (replace with your relying party settings)
    const rpId = process.env.WEBAUTHN_RP_ID || 'localhost'; // Your website domain
    const origin = `https://${rpId}`; // Or http://localhost:port

    // NOTE: Replace with actual library function call and necessary parameters
    // Example using conceptual verifyAuthenticationResponse:
    /*
    const verification = await verifyAuthenticationResponse({
       assertion: authAssertion,
       expectedChallenge: expectedChallenge,
       expectedOrigin: origin,
       expectedRPID: rpId,
       authenticator: {
           credentialPublicKey: userCredential.publicKey, // Your stored key
           credentialID: userCredential.credentialId,
           counter: userCredential.counter, // Stored signature counter
       },
       requireUserVerification: true // Match what you requested on the frontend
    });

    const { verified, authenticationInfo } = verification; // Assuming structure from a library
    */

    // --- Dummy verification logic for demonstration ---
    // In a real app, replace the block above and below this with library call
    const verified = true; // ASSUME VERIFIED FOR DEMO PURPOSES
    const authenticationInfo = { newCounter: userCredential.counter + 1 }; // Dummy counter update

    if (verified) {
      // Update the stored counter (replace with your database update)
      await updateUserCredentialCounter(userCredential.credentialId, authenticationInfo.newCounter);

      // --- 8. ALL VERIFICATION STEPS PASSED! EXECUTE SENSITIVE OPERATION ---
      console.log('Biometric authentication verified. Executing sensitive operation...');
      await executeSensitiveSettingsUpdate(userId, payload); // Your core business logic

      // 9. Respond success
      res.status(200).json({ message: 'Settings updated successfully' });

    } else {
      // 10. Respond failure
      console.error('Biometric verification failed.');
      res.status(401).json({ message: 'Authentication failed' });
    }

  } catch (error: any) {
    console.error('Backend verification error:', error);
    // Handle specific WebAuthn verification errors
    res.status(500).json({ message: 'Internal server error during verification', error: error.message });
  }
}

// Dummy helper functions (replace with your actual implementation)
async function getUserFromDatabase(userId: string): Promise<any> {
    // Lookup user and their stored webauthn credentials
    // Return { id: userId, webauthnCredentials: [...] }
    console.log(`Fetching user ${userId}...`);
    return {
        id: userId,
        webauthnCredentials: [
             {
                 credentialId: 'dummy-credential-id', // Base64 or similar
                 publicKey: 'dummy-public-key',    // Base64 or PEM
                 counter: 0,
                 // ... other credential data
             }
        ]
    };
}

async function getStoredChallenge(userId: string, operation: string): Promise<string | null> {
    // Retrieve the unique challenge generated earlier for this user/operation
    // and clear it or mark it as used immediately after retrieval.
    console.log(`Getting challenge for user ${userId}, operation ${operation}...`);
    return 'generated-challenge-for-this-request'; // Base64 or ArrayBuffer represented as string
}

async function updateUserCredentialCounter(credentialId: string, newCounter: number): Promise<void> {
     // Update the counter value for the specific credential in your database
     console.log(`Updating counter for credential ${credentialId} to ${newCounter}`);
     // ... save settings to database ...
}

async function executeSensitiveSettingsUpdate(userId: string, payload: any): Promise<void> {
     // Implement the actual logic to update settings based on the payload
     console.log(`Executing update for user ${userId} with payload:`, payload);
     // ... save settings to database ...
}

// Note: A real implementation would require a robust WebAuthn library on the backend
// to handle the complex ASN.1 parsing and cryptographic verification details.
// Libraries like @simplewebauthn/server are highly recommended.