@massimo.mazzoleni/cognito-max 1.0.0

package/src/ui/components/SignInForm.tsx

@@ -0,0 +1,296 @@
+import { useEffect, useId, useRef, type ReactNode } from 'react'
+import { useSignInForm, type UseSignInFormOptions } from '../hooks/useSignInForm'
+
+export interface SignInFormProps extends UseSignInFormOptions {
+  className?: string
+  labels?: {
+    email?: string
+    password?: string
+    submit?: string
+    mfaCode?: string
+    mfaSubmit?: string
+    newPassword?: string
+    confirmNewPassword?: string
+    newPasswordSubmit?: string
+    mfaSetupScanInstruction?: string
+    mfaSetupSecretLabel?: string
+    mfaSetupCode?: string
+    mfaSetupSubmit?: string
+  }
+  /** Slot per il link "Password dimenticata?" */
+  forgotPasswordLink?: ReactNode
+  /** Slot per il link "Crea account" */
+  registerLink?: ReactNode
+  /**
+   * Render del QR code per lo step mfa_setup.
+   * Riceve il URI otpauth:// — usa react-qr-code o simile.
+   * Default: mostra il URI come testo copiabile.
+   */
+  renderQrCode?: (uri: string) => ReactNode
+}
+
+export function SignInForm({
+  className,
+  labels = {},
+  forgotPasswordLink,
+  registerLink,
+  renderQrCode,
+  onSuccess,
+  onError,
+}: SignInFormProps) {
+  const uid = useId()
+  const form = useSignInForm({ onSuccess, onError })
+  const firstInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    firstInputRef.current?.focus()
+    // Auto-start TOTP challenge setup when step transitions to mfa_setup
+    if (form.step === 'mfa_setup') {
+      void form.mfaSetup.start()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form.step])
+
+  const l = {
+    email: labels.email ?? 'Email',
+    password: labels.password ?? 'Password',
+    submit: labels.submit ?? 'Accedi',
+    mfaCode: labels.mfaCode ?? 'Codice',
+    mfaSubmit: labels.mfaSubmit ?? 'Verifica',
+    newPassword: labels.newPassword ?? 'Nuova password',
+    confirmNewPassword: labels.confirmNewPassword ?? 'Conferma password',
+    newPasswordSubmit: labels.newPasswordSubmit ?? 'Imposta password',
+    mfaSetupScanInstruction:
+      labels.mfaSetupScanInstruction ??
+      "Scansiona il QR code con la tua app authenticator (Google Authenticator, Authy, 1Password…)",
+    mfaSetupSecretLabel: labels.mfaSetupSecretLabel ?? 'Oppure inserisci il codice manualmente',
+    mfaSetupCode: labels.mfaSetupCode ?? 'Codice a 6 cifre',
+    mfaSetupSubmit: labels.mfaSetupSubmit ?? 'Verifica e attiva',
+  }
+
+  const errorId = `${uid}-error`
+
+  if (form.step === 'mfa') {
+    return (
+      <form
+        onSubmit={form.mfa.onSubmit}
+        className={className}
+        aria-label="Verifica codice MFA"
+      >
+        <p>
+          Inserisci il codice{' '}
+          {form.mfaType === 'TOTP' ? "dall'app authenticator" : 'ricevuto via SMS'}
+        </p>
+        <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+          {form.error?.message}
+        </div>
+        <div>
+          <label htmlFor={`${uid}-mfa-code`}>{l.mfaCode}</label>
+          <input
+            id={`${uid}-mfa-code`}
+            ref={firstInputRef}
+            type="text"
+            inputMode="numeric"
+            maxLength={6}
+            autoComplete="one-time-code"
+            autoFocus
+            required
+            aria-required="true"
+            aria-invalid={!!form.error}
+            aria-describedby={form.error ? errorId : undefined}
+            value={form.mfa.code}
+            onChange={(e) => form.mfa.setCode(e.target.value)}
+          />
+        </div>
+        <button type="submit" disabled={form.isLoading} aria-busy={form.isLoading}>
+          {form.isLoading ? (
+            <>
+              <span aria-hidden="true">...</span>
+              <span className="sr-only">Caricamento...</span>
+            </>
+          ) : (
+            l.mfaSubmit
+          )}
+        </button>
+      </form>
+    )
+  }
+
+  if (form.step === 'new_password') {
+    return (
+      <form
+        onSubmit={form.newPassword.onSubmit}
+        className={className}
+        aria-label="Imposta nuova password"
+      >
+        <p>Devi impostare una nuova password per continuare.</p>
+        <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+          {form.error?.message}
+        </div>
+        <div>
+          <label htmlFor={`${uid}-new-password`}>{l.newPassword}</label>
+          <input
+            id={`${uid}-new-password`}
+            ref={firstInputRef}
+            type="password"
+            autoComplete="new-password"
+            autoFocus
+            required
+            aria-required="true"
+            aria-invalid={!!form.error}
+            aria-describedby={form.error ? errorId : undefined}
+            value={form.newPassword.password}
+            onChange={(e) => form.newPassword.setPassword(e.target.value)}
+          />
+        </div>
+        <div>
+          <label htmlFor={`${uid}-confirm-password`}>{l.confirmNewPassword}</label>
+          <input
+            id={`${uid}-confirm-password`}
+            type="password"
+            autoComplete="new-password"
+            required
+            aria-required="true"
+            aria-invalid={!!form.error}
+            value={form.newPassword.confirmPassword}
+            onChange={(e) => form.newPassword.setConfirmPassword(e.target.value)}
+          />
+        </div>
+        <button type="submit" disabled={form.isLoading} aria-busy={form.isLoading}>
+          {form.isLoading ? (
+            <>
+              <span aria-hidden="true">...</span>
+              <span className="sr-only">Caricamento...</span>
+            </>
+          ) : (
+            l.newPasswordSubmit
+          )}
+        </button>
+      </form>
+    )
+  }
+
+  if (form.step === 'mfa_setup') {
+    return (
+      <div className={className}>
+        <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+          {form.error?.message}
+        </div>
+
+        {form.isLoading && !form.mfaSetup.qrCodeUri && (
+          <p aria-live="polite" aria-atomic="true">
+            Inizializzazione in corso...
+          </p>
+        )}
+
+        {form.mfaSetup.qrCodeUri && (
+          <div>
+            <p>{l.mfaSetupScanInstruction}</p>
+            {renderQrCode ? (
+              renderQrCode(form.mfaSetup.qrCodeUri)
+            ) : (
+              <code style={{ wordBreak: 'break-all', fontSize: '0.75em' }}>
+                {form.mfaSetup.qrCodeUri}
+              </code>
+            )}
+            {form.mfaSetup.secretCode && (
+              <p>
+                {l.mfaSetupSecretLabel}: <code>{form.mfaSetup.secretCode}</code>
+              </p>
+            )}
+          </div>
+        )}
+
+        <form onSubmit={form.mfaSetup.onVerify} aria-label="Verifica configurazione MFA">
+          <div>
+            <label htmlFor={`${uid}-totp-code`}>{l.mfaSetupCode}</label>
+            <input
+              id={`${uid}-totp-code`}
+              ref={firstInputRef}
+              type="text"
+              inputMode="numeric"
+              maxLength={6}
+              autoComplete="one-time-code"
+              autoFocus
+              required
+              aria-required="true"
+              aria-invalid={!!form.error}
+              aria-describedby={form.error ? errorId : undefined}
+              disabled={form.isLoading && !form.mfaSetup.qrCodeUri}
+              value={form.mfaSetup.totpCode}
+              onChange={(e) => form.mfaSetup.setTotpCode(e.target.value)}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={form.isLoading || form.mfaSetup.totpCode.length !== 6}
+            aria-busy={form.isLoading}
+          >
+            {form.isLoading ? (
+              <>
+                <span aria-hidden="true">...</span>
+                <span className="sr-only">Caricamento...</span>
+              </>
+            ) : (
+              l.mfaSetupSubmit
+            )}
+          </button>
+        </form>
+      </div>
+    )
+  }
+
+  // Default: credentials step
+  return (
+    <form
+      onSubmit={form.credentials.onSubmit}
+      className={className}
+      aria-label="Accedi al tuo account"
+    >
+      <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+        {form.error?.message}
+      </div>
+      <div>
+        <label htmlFor={`${uid}-email`}>{l.email}</label>
+        <input
+          id={`${uid}-email`}
+          ref={firstInputRef}
+          type="email"
+          autoComplete="email"
+          autoFocus
+          required
+          aria-required="true"
+          aria-invalid={!!form.error}
+          aria-describedby={form.error ? errorId : undefined}
+          value={form.credentials.email}
+          onChange={(e) => form.credentials.setEmail(e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor={`${uid}-password`}>{l.password}</label>
+        <input
+          id={`${uid}-password`}
+          type="password"
+          autoComplete="current-password"
+          required
+          aria-required="true"
+          aria-invalid={!!form.error}
+          value={form.credentials.password}
+          onChange={(e) => form.credentials.setPassword(e.target.value)}
+        />
+      </div>
+      {forgotPasswordLink}
+      <button type="submit" disabled={form.isLoading} aria-busy={form.isLoading}>
+        {form.isLoading ? (
+          <>
+            <span aria-hidden="true">...</span>
+            <span className="sr-only">Caricamento...</span>
+          </>
+        ) : (
+          l.submit
+        )}
+      </button>
+      {registerLink}
+    </form>
+  )
+}

package/src/ui/hooks/useChangePasswordForm.ts

@@ -0,0 +1,81 @@
+import { useCallback, useState, type FormEvent } from 'react'
+import { useAuth } from '../../react/hooks/useAuth'
+import type { CognitoAuthError } from '../../core/errors'
+
+export interface UseChangePasswordFormOptions {
+  onSuccess?: () => void
+  onError?: (error: CognitoAuthError) => void
+}
+
+export interface UseChangePasswordFormReturn {
+  isLoading: boolean
+  error: CognitoAuthError | null
+  success: boolean
+  currentPassword: string
+  newPassword: string
+  confirmPassword: string
+  setCurrentPassword(v: string): void
+  setNewPassword(v: string): void
+  setConfirmPassword(v: string): void
+  onSubmit(e: FormEvent): void
+  reset(): void
+}
+
+export function useChangePasswordForm(
+  options: UseChangePasswordFormOptions = {},
+): UseChangePasswordFormReturn {
+  const { changePassword } = useAuth()
+
+  const [isLoading, setLoading] = useState(false)
+  const [error, setError] = useState<CognitoAuthError | null>(null)
+  const [success, setSuccess] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      if (newPassword !== confirmPassword) {
+        setError({ message: 'Le nuove password non coincidono', code: 'INVALID_PASSWORD' } as CognitoAuthError)
+        return
+      }
+      setError(null)
+      setLoading(true)
+      try {
+        await changePassword(currentPassword, newPassword)
+        setSuccess(true)
+        options.onSuccess?.()
+      } catch (err) {
+        const authErr = err as CognitoAuthError
+        setError(authErr)
+        options.onError?.(authErr)
+      } finally {
+        setLoading(false)
+      }
+    },
+    [currentPassword, newPassword, confirmPassword, changePassword, options],
+  )
+
+  const reset = useCallback(() => {
+    setCurrentPassword('')
+    setNewPassword('')
+    setConfirmPassword('')
+    setError(null)
+    setSuccess(false)
+  }, [])
+
+  return {
+    isLoading,
+    error,
+    success,
+    currentPassword,
+    newPassword,
+    confirmPassword,
+    setCurrentPassword,
+    setNewPassword,
+    setConfirmPassword,
+    onSubmit: handleSubmit,
+    reset,
+  }
+}

package/src/ui/hooks/useForgotPasswordForm.ts

@@ -0,0 +1,109 @@
+import { useCallback, useState, type FormEvent } from 'react'
+import { useAuth } from '../../react/hooks/useAuth'
+import type { CognitoAuthError } from '../../core/errors'
+
+export type ForgotPasswordStep = 'request' | 'reset'
+
+export interface UseForgotPasswordFormOptions {
+  onSuccess?: () => void
+  onError?: (error: CognitoAuthError) => void
+}
+
+export interface UseForgotPasswordFormReturn {
+  step: ForgotPasswordStep
+  isLoading: boolean
+  error: CognitoAuthError | null
+
+  request: {
+    email: string
+    setEmail(v: string): void
+    onSubmit(e: FormEvent): void
+  }
+
+  reset: {
+    email: string
+    code: string
+    newPassword: string
+    confirmPassword: string
+    setCode(v: string): void
+    setNewPassword(v: string): void
+    setConfirmPassword(v: string): void
+    onSubmit(e: FormEvent): void
+  }
+
+  restart(): void
+}
+
+export function useForgotPasswordForm(
+  options: UseForgotPasswordFormOptions = {},
+): UseForgotPasswordFormReturn {
+  const { forgotPassword, confirmForgotPassword } = useAuth()
+
+  const [step, setStep] = useState<ForgotPasswordStep>('request')
+  const [isLoading, setLoading] = useState(false)
+  const [error, setError] = useState<CognitoAuthError | null>(null)
+
+  const [email, setEmail] = useState('')
+  const [code, setCode] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+
+  const handleRequestSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      setError(null)
+      setLoading(true)
+      try {
+        await forgotPassword(email)
+        setStep('reset')
+      } catch (err) {
+        const authErr = err as CognitoAuthError
+        setError(authErr)
+        options.onError?.(authErr)
+      } finally {
+        setLoading(false)
+      }
+    },
+    [email, forgotPassword, options],
+  )
+
+  const handleResetSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      if (newPassword !== confirmPassword) {
+        setError({ message: 'Le password non coincidono', code: 'INVALID_PASSWORD' } as CognitoAuthError)
+        return
+      }
+      setError(null)
+      setLoading(true)
+      try {
+        await confirmForgotPassword(email, code, newPassword)
+        options.onSuccess?.()
+      } catch (err) {
+        const authErr = err as CognitoAuthError
+        setError(authErr)
+        options.onError?.(authErr)
+      } finally {
+        setLoading(false)
+      }
+    },
+    [email, code, newPassword, confirmPassword, confirmForgotPassword, options],
+  )
+
+  const restart = useCallback(() => {
+    setStep('request')
+    setCode('')
+    setNewPassword('')
+    setConfirmPassword('')
+    setError(null)
+  }, [])
+
+  return {
+    step,
+    isLoading,
+    error,
+    request: { email, setEmail, onSubmit: handleRequestSubmit },
+    reset: { email, code, newPassword, confirmPassword, setCode, setNewPassword, setConfirmPassword, onSubmit: handleResetSubmit },
+    restart,
+  }
+}

package/src/ui/hooks/useMfaSetup.ts

@@ -0,0 +1,93 @@
+import { useCallback, useState, type FormEvent } from 'react'
+import { useMfa } from '../../react/hooks/useMfa'
+import type { CognitoAuthError } from '../../core/errors'
+
+export type MfaSetupStep = 'idle' | 'loading' | 'scan' | 'verify' | 'done'
+
+export interface UseMfaSetupOptions {
+  onSuccess?: () => void
+  onError?: (error: CognitoAuthError) => void
+}
+
+export interface UseMfaSetupReturn {
+  step: MfaSetupStep
+  isLoading: boolean
+  error: CognitoAuthError | null
+  /** URI otpauth:// da passare a un QR code renderer */
+  qrCodeUri: string | null
+  /** Secret testuale (per inserimento manuale nell'app) */
+  secretCode: string | null
+  totpCode: string
+  setTotpCode(v: string): void
+  /** Avvia il setup TOTP */
+  start(): Promise<void>
+  /** Verifica il codice inserito dall'app authenticator */
+  onVerify(e: FormEvent): void
+  reset(): void
+}
+
+export function useMfaSetup(options: UseMfaSetupOptions = {}): UseMfaSetupReturn {
+  const { setup, verifySetup } = useMfa()
+
+  const [step, setStep] = useState<MfaSetupStep>('idle')
+  const [error, setError] = useState<CognitoAuthError | null>(null)
+  const [qrCodeUri, setQrCodeUri] = useState<string | null>(null)
+  const [secretCode, setSecretCode] = useState<string | null>(null)
+  const [totpCode, setTotpCode] = useState('')
+
+  const start = useCallback(async () => {
+    setError(null)
+    setStep('loading')
+    try {
+      const result = await setup()
+      setQrCodeUri(result.qrCodeUri)
+      setSecretCode(result.secretCode)
+      setStep('scan')
+    } catch (err) {
+      const authErr = err as CognitoAuthError
+      setError(authErr)
+      setStep('idle')
+      options.onError?.(authErr)
+    }
+  }, [setup, options])
+
+  const handleVerify = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      setError(null)
+      setStep('loading')
+      try {
+        await verifySetup(totpCode)
+        setStep('done')
+        options.onSuccess?.()
+      } catch (err) {
+        const authErr = err as CognitoAuthError
+        setError(authErr)
+        setStep('verify')
+        options.onError?.(authErr)
+      }
+    },
+    [totpCode, verifySetup, options],
+  )
+
+  const reset = useCallback(() => {
+    setStep('idle')
+    setError(null)
+    setQrCodeUri(null)
+    setSecretCode(null)
+    setTotpCode('')
+  }, [])
+
+  return {
+    step,
+    isLoading: step === 'loading',
+    error,
+    qrCodeUri,
+    secretCode,
+    totpCode,
+    setTotpCode,
+    start,
+    onVerify: handleVerify,
+    reset,
+  }
+}

package/src/ui/hooks/useRegisterForm.ts

@@ -0,0 +1,120 @@
+import { useCallback, useState, type FormEvent } from 'react'
+import { useAuth } from '../../react/hooks/useAuth'
+import type { CognitoAuthError } from '../../core/errors'
+
+export type RegisterStep = 'register' | 'confirm'
+
+export interface UseRegisterFormOptions {
+  onSuccess?: () => void
+  onError?: (error: CognitoAuthError) => void
+  /** Attributi aggiuntivi (es. name, phone_number) */
+  extraAttributes?: Record<string, string>
+}
+
+export interface UseRegisterFormReturn {
+  step: RegisterStep
+  isLoading: boolean
+  error: CognitoAuthError | null
+
+  register: {
+    email: string
+    password: string
+    confirmPassword: string
+    setEmail(v: string): void
+    setPassword(v: string): void
+    setConfirmPassword(v: string): void
+    onSubmit(e: FormEvent): void
+  }
+
+  confirm: {
+    email: string
+    code: string
+    setCode(v: string): void
+    onSubmit(e: FormEvent): void
+    resend(): Promise<void>
+  }
+
+  reset(): void
+}
+
+export function useRegisterForm(options: UseRegisterFormOptions = {}): UseRegisterFormReturn {
+  const { signUp, confirmSignUp, resendConfirmationCode } = useAuth()
+
+  const [step, setStep] = useState<RegisterStep>('register')
+  const [isLoading, setLoading] = useState(false)
+  const [error, setError] = useState<CognitoAuthError | null>(null)
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [code, setCode] = useState('')
+
+  const handleRegisterSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      if (password !== confirmPassword) {
+        setError({ message: 'Le password non coincidono', code: 'INVALID_PASSWORD' } as CognitoAuthError)
+        return
+      }
+      setError(null)
+      setLoading(true)
+      try {
+        await signUp(email, password, options.extraAttributes)
+        setStep('confirm')
+      } catch (err) {
+        const authErr = err as CognitoAuthError
+        setError(authErr)
+        options.onError?.(authErr)
+      } finally {
+        setLoading(false)
+      }
+    },
+    [email, password, confirmPassword, signUp, options],
+  )
+
+  const handleConfirmSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault()
+      setError(null)
+      setLoading(true)
+      try {
+        await confirmSignUp(email, code)
+        options.onSuccess?.()
+      } catch (err) {
+        const authErr = err as CognitoAuthError
+        setError(authErr)
+        options.onError?.(authErr)
+      } finally {
+        setLoading(false)
+      }
+    },
+    [email, code, confirmSignUp, options],
+  )
+
+  const resend = useCallback(async () => {
+    setError(null)
+    try {
+      await resendConfirmationCode(email)
+    } catch (err) {
+      setError(err as CognitoAuthError)
+    }
+  }, [email, resendConfirmationCode])
+
+  const reset = useCallback(() => {
+    setStep('register')
+    setEmail('')
+    setPassword('')
+    setConfirmPassword('')
+    setCode('')
+    setError(null)
+  }, [])
+
+  return {
+    step,
+    isLoading,
+    error,
+    register: { email, password, confirmPassword, setEmail, setPassword, setConfirmPassword, onSubmit: handleRegisterSubmit },
+    confirm: { email, code, setCode, onSubmit: handleConfirmSubmit, resend },
+    reset,
+  }
+}