@striae-org/striae 5.3.1 → 5.4.0

package/app/components/auth/mfa-enrollment.tsx

@@ -11,7 +11,8 @@ import {
 import { handleAuthError, getValidationError } from '~/services/firebase/errors';
 import { SignOut } from '~/components/actions/signout';
 import { auditService } from '~/services/audit';
-import styles from './mfa-enrollment.module.css';
+import { MfaTotpEnrollment } from './mfa-totp-enrollment';
+import styles from './auth.module.css';
 
 interface MFAEnrollmentProps {
   user: User;
@@ -28,6 +29,7 @@ export const MFAEnrollment: React.FC<MFAEnrollmentProps> = ({
   onSkip,
   mandatory = true
 }) => {
+  const [enrollmentMethod, setEnrollmentMethod] = useState<'choice' | 'sms' | 'totp'>('choice');
   const [phoneNumber, setPhoneNumber] = useState('');
   const [verificationCode, setVerificationCode] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -273,12 +275,12 @@ export const MFAEnrollment: React.FC<MFAEnrollmentProps> = ({
 
   return (
     <div className={styles.overlay}>
-      <div className={styles.modal}>
+      <div className={styles.enrollmentModal}>
         <div className={styles.header}>
           <h2>Security Setup Required</h2>
           <p>
             {mandatory 
-              ? 'Two-factor authentication is required for all accounts. Please set up SMS verification to continue.'
+              ? 'Two-factor authentication is required for all accounts. Please set up a second factor to continue.'
               : 'Enhance your account security with two-factor authentication.'
             }
           </p>
@@ -290,91 +292,142 @@ export const MFAEnrollment: React.FC<MFAEnrollmentProps> = ({
               {errorMessage}
             </div>
           )}
-          
-          {!codeSent ? (
-            <div className={styles.phoneStep}>
-              <h3>Step 1: Enter Your Mobile Number</h3>
-              <input
-                type="tel"
-                value={phoneNumber}
-                onChange={(e) => {
-                  setPhoneNumber(e.target.value);
-                  if (errorMessage) setErrorMessage(''); // Clear error on input
-                }}
-                placeholder="ex. +15551234567"
-                className={styles.input}
-                disabled={isLoading}
-              />
-              <p className={styles.note}>
-                We&apos;ll send a verification code to this number.
-              </p>
+
+          {enrollmentMethod === 'choice' && (
+            <div className={styles.methodChoice}>
+              <h3>Choose a Verification Method</h3>
+              <button
+                type="button"
+                onClick={() => setEnrollmentMethod('sms')}
+                className={styles.methodButton}
+              >
+                <span className={styles.methodButtonTitle}>Text Message (SMS)</span>
+                <span className={styles.methodButtonDesc}>Receive a code by text message</span>
+              </button>
               <button
-                onClick={sendVerificationCode}
-                disabled={isLoading || !phoneNumber.trim()}
-                className={styles.primaryButton}
+                type="button"
+                onClick={() => setEnrollmentMethod('totp')}
+                className={styles.methodButton}
               >
-                {isLoading ? 'Sending...' : 'Send Verification Code'}
+                <span className={styles.methodButtonTitle}>Authenticator App</span>
+                <span className={styles.methodButtonDesc}>Use Google Authenticator, Authy, or similar</span>
               </button>
             </div>
-          ) : (
-            <div className={styles.codeStep}>
-              <h3>Step 2: Enter Verification Code</h3>
-              <p className={styles.note}>
-                Enter the 6-digit code sent to {phoneNumber}
-              </p>
-              <input
-                type="text"
-                value={verificationCode}
-                onChange={(e) => {
-                  setVerificationCode(e.target.value.replace(/\D/g, ''));
-                  if (errorMessage) setErrorMessage(''); // Clear error on input
-                }}
-                placeholder="123456"
-                maxLength={6}
-                className={styles.input}
-                disabled={isLoading}
-              />
-              
-              <div className={styles.buttonGroup}>
-                <button
-                  onClick={enrollMFA}
-                  disabled={isLoading || verificationCode.length !== 6}
-                  className={styles.primaryButton}
-                >
-                  {isLoading ? 'Verifying...' : 'Complete Setup'}
-                </button>
-                
-                <button
-                  onClick={() => {
-                    setCodeSent(false);
-                    setVerificationCode('');
-                    setErrorMessage(''); // Clear errors when changing phone number
-                  }}
-                  disabled={isLoading}
-                  className={styles.secondaryButton}
-                >
-                  Change Phone Number
-                </button>
-                
-                {resendTimer === 0 ? (
-                  <button
-                    onClick={sendVerificationCode}
+          )}
+
+          {enrollmentMethod === 'totp' && (
+            <MfaTotpEnrollment
+              user={user}
+              onSuccess={onSuccess}
+              onError={onError}
+              onBack={() => {
+                setEnrollmentMethod('choice');
+                setErrorMessage('');
+              }}
+            />
+          )}
+          
+          {enrollmentMethod === 'sms' && (
+            <>
+              {!codeSent ? (
+                <div className={styles.phoneStep}>
+                  <h3>Step 1: Enter Your Mobile Number</h3>
+                  <input
+                    type="tel"
+                    value={phoneNumber}
+                    onChange={(e) => {
+                      setPhoneNumber(e.target.value);
+                      if (errorMessage) setErrorMessage(''); // Clear error on input
+                    }}
+                    placeholder="ex. +15551234567"
+                    className={styles.enrollmentInput}
                     disabled={isLoading}
-                    className={styles.secondaryButton}
-                  >
-                    Resend Code
-                  </button>
-                ) : (
-                  <p className={styles.resendTimer}>
-                    Resend code in {resendTimer}s
+                  />
+                  <p className={styles.note}>
+                    We&apos;ll send a verification code to this number.
                   </p>
-                )}
-              </div>
-            </div>
+                  <div className={styles.buttonGroup}>
+                    <button
+                      onClick={sendVerificationCode}
+                      disabled={isLoading || !phoneNumber.trim()}
+                      className={styles.primaryButton}
+                    >
+                      {isLoading ? 'Sending...' : 'Send Verification Code'}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setEnrollmentMethod('choice');
+                        setErrorMessage('');
+                      }}
+                      disabled={isLoading}
+                      className={styles.enrollmentSecondaryButton}
+                    >
+                      Back
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className={styles.codeStep}>
+                  <h3>Step 2: Enter Verification Code</h3>
+                  <p className={styles.note}>
+                    Enter the 6-digit code sent to {phoneNumber}
+                  </p>
+                  <input
+                    type="text"
+                    value={verificationCode}
+                    onChange={(e) => {
+                      setVerificationCode(e.target.value.replace(/\D/g, ''));
+                      if (errorMessage) setErrorMessage(''); // Clear error on input
+                    }}
+                    placeholder="123456"
+                    maxLength={6}
+                    className={styles.enrollmentInput}
+                    disabled={isLoading}
+                  />
+                  
+                  <div className={styles.buttonGroup}>
+                    <button
+                      onClick={enrollMFA}
+                      disabled={isLoading || verificationCode.length !== 6}
+                      className={styles.primaryButton}
+                    >
+                      {isLoading ? 'Verifying...' : 'Complete Setup'}
+                    </button>
+                    
+                    <button
+                      onClick={() => {
+                        setCodeSent(false);
+                        setVerificationCode('');
+                        setErrorMessage(''); // Clear errors when changing phone number
+                      }}
+                      disabled={isLoading}
+                      className={styles.enrollmentSecondaryButton}
+                    >
+                      Change Phone Number
+                    </button>
+                    
+                    {resendTimer === 0 ? (
+                      <button
+                        onClick={sendVerificationCode}
+                        disabled={isLoading}
+                        className={styles.enrollmentSecondaryButton}
+                      >
+                        Resend Code
+                      </button>
+                    ) : (
+                      <p className={styles.resendTimer}>
+                        Resend code in {resendTimer}s
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+            </>
           )}
         </div>
 
-        {!mandatory && (
+        {!mandatory && enrollmentMethod === 'choice' && (
           <div className={styles.footer}>
             <button
               onClick={handleSkip}

package/app/components/auth/mfa-totp-enrollment.tsx

@@ -0,0 +1,231 @@
+/* eslint-disable react/prop-types */
+import { useState, useEffect, useRef } from 'react';
+import { multiFactor, TotpMultiFactorGenerator, type TotpSecret, type User } from 'firebase/auth';
+import { toDataURL as qrToDataURL } from 'qrcode';
+import { handleAuthError, getValidationError } from '~/services/firebase/errors';
+import { auditService } from '~/services/audit';
+import styles from './auth.module.css';
+
+interface MfaTotpEnrollmentProps {
+  user: User;
+  onSuccess: () => void;
+  onError: (error: string) => void;
+  onBack?: () => void;
+}
+
+export const MfaTotpEnrollment: React.FC<MfaTotpEnrollmentProps> = ({
+  user,
+  onSuccess,
+  onError,
+  onBack,
+}) => {
+  const [totpSecret, setTotpSecret] = useState<TotpSecret | null>(null);
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
+  const [verificationCode, setVerificationCode] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isFetchingSecret, setIsFetchingSecret] = useState(true);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [showSecretKey, setShowSecretKey] = useState(false);
+  // Persists the secret across re-renders to avoid regenerating it
+  const secretRef = useRef<TotpSecret | null>(null);
+
+  useEffect(() => {
+    if (secretRef.current) {
+      setTotpSecret(secretRef.current);
+      setIsFetchingSecret(false);
+      return;
+    }
+
+    const generateSecret = async () => {
+      setIsFetchingSecret(true);
+      setErrorMessage('');
+      try {
+        const session = await multiFactor(user).getSession();
+        const secret = await TotpMultiFactorGenerator.generateSecret(session);
+        secretRef.current = secret;
+        setTotpSecret(secret);
+
+        const qrUrl = secret.generateQrCodeUrl(user.email ?? 'user', 'Striae');
+        const dataUrl = await qrToDataURL(qrUrl, { width: 200, margin: 1 });
+        setQrCodeDataUrl(dataUrl);
+      } catch (err) {
+        const { message } = handleAuthError(err);
+        setErrorMessage(message);
+        onError(message);
+      } finally {
+        setIsFetchingSecret(false);
+      }
+    };
+
+    void generateSecret();
+  }, [user, onError]);
+
+  const handleVerify = async () => {
+    if (!totpSecret) {
+      const error = getValidationError('MFA_TOTP_SETUP_ERROR');
+      setErrorMessage(error);
+      onError(error);
+      return;
+    }
+
+    if (verificationCode.length !== 6) {
+      const error = getValidationError('MFA_CODE_REQUIRED');
+      setErrorMessage(error);
+      onError(error);
+      return;
+    }
+
+    setIsLoading(true);
+    setErrorMessage('');
+
+    try {
+      const assertion = TotpMultiFactorGenerator.assertionForEnrollment(
+        totpSecret,
+        verificationCode
+      );
+      await multiFactor(user).enroll(assertion, 'Authenticator App');
+
+      try {
+        await auditService.logMfaEnrollment(
+          user,
+          undefined,
+          'totp',
+          'success',
+          1,
+          undefined,
+          navigator.userAgent
+        );
+      } catch (auditErr) {
+        console.error('Failed to log TOTP enrollment audit:', auditErr);
+      }
+
+      onSuccess();
+    } catch (err) {
+      const authError = err as { code?: string; message?: string };
+      let errorMsg = '';
+
+      if (authError.code === 'auth/invalid-verification-code') {
+        errorMsg = getValidationError('MFA_INVALID_CODE');
+      } else if (authError.code === 'auth/code-expired') {
+        errorMsg = getValidationError('MFA_CODE_EXPIRED');
+      } else {
+        errorMsg = handleAuthError(authError).message;
+      }
+
+      setErrorMessage(errorMsg);
+      onError(errorMsg);
+
+      try {
+        await auditService.logSecurityViolation(
+          user,
+          'unauthorized-access',
+          authError.code === 'auth/invalid-verification-code' ? 'high' : 'medium',
+          `Failed TOTP enrollment: ${authError.code} - ${errorMsg}`,
+          'mfa-totp-enrollment-endpoint',
+          true
+        );
+      } catch (auditErr) {
+        console.error('Failed to log TOTP enrollment security violation audit:', auditErr);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isFetchingSecret) {
+    return (
+      <div className={styles.totpStep}>
+        <p className={styles.note}>Setting up authenticator&hellip;</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.totpStep}>
+      <h3>Set Up Authenticator App</h3>
+
+      {errorMessage && (
+        <div className={styles.errorMessage}>{errorMessage}</div>
+      )}
+
+      {qrCodeDataUrl && (
+        <div className={styles.qrCodeContainer}>
+          <p className={styles.note}>
+            Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.).
+          </p>
+          <img
+            src={qrCodeDataUrl}
+            alt="TOTP QR Code — scan with your authenticator app"
+            className={styles.qrCodeImage}
+            width={200}
+            height={200}
+          />
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => setShowSecretKey((v) => !v)}
+        className={styles.enrollmentSecondaryButton}
+        style={{ marginBottom: '1rem' }}
+      >
+        {showSecretKey ? 'Hide' : 'Show'} setup key
+      </button>
+
+      {showSecretKey && totpSecret && (
+        <div className={styles.secretKeyDisplay}>
+          <p className={styles.note}>
+            If you cannot scan the QR code, enter this key manually in your authenticator app:
+          </p>
+          <code className={styles.secretKey}>{totpSecret.secretKey}</code>
+        </div>
+      )}
+
+      <p className={styles.note}>
+        After scanning, enter the 6-digit code from your authenticator app below.
+      </p>
+      <input
+        type="text"
+        inputMode="numeric"
+        value={verificationCode}
+        onChange={(e) => {
+          setVerificationCode(e.target.value.replace(/\D/g, ''));
+          if (errorMessage) setErrorMessage('');
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && verificationCode.length === 6) {
+            e.preventDefault();
+            void handleVerify();
+          }
+        }}
+        placeholder="123456"
+        maxLength={6}
+        className={styles.enrollmentInput}
+        disabled={isLoading}
+        autoComplete="one-time-code"
+      />
+
+      <div className={styles.buttonGroup}>
+        <button
+          type="button"
+          onClick={handleVerify}
+          disabled={isLoading || verificationCode.length !== 6}
+          className={styles.primaryButton}
+        >
+          {isLoading ? 'Verifying…' : 'Complete Setup'}
+        </button>
+
+        {onBack && (
+          <button
+            type="button"
+            onClick={onBack}
+            disabled={isLoading}
+            className={styles.enrollmentSecondaryButton}
+          >
+            Back
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};