chore: import upstream snapshot with attribution

apps/sim/app/(auth)/verify/loading.tsx

@@ -0,0 +1,12 @@
+import { Skeleton } from '@sim/emcn'
+
+export default function VerifyLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[180px] rounded-[4px]' />
+      <Skeleton className='mt-3 h-[14px] w-[300px] rounded-[4px]' />
+      <Skeleton className='mt-1 h-[14px] w-[240px] rounded-[4px]' />
+      <Skeleton className='mt-8 h-[44px] w-full rounded-[10px]' />
+    </div>
+  )
+}

apps/sim/app/(auth)/verify/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import { isEmailVerificationEnabled, isProd } from '@/lib/core/config/env-flags'
+import { hasEmailService } from '@/lib/messaging/email/mailer'
+import { VerifyContent } from '@/app/(auth)/verify/verify-content'
+
+export const metadata: Metadata = {
+  title: 'Verify Email',
+}
+
+export const dynamic = 'force-dynamic'
+
+export default function VerifyPage() {
+  const emailServiceConfigured = hasEmailService()
+
+  return (
+    <VerifyContent
+      hasEmailService={emailServiceConfigured}
+      isProduction={isProd}
+      isEmailVerificationEnabled={isEmailVerificationEnabled}
+    />
+  )
+}

apps/sim/app/(auth)/verify/use-verification.ts

@@ -0,0 +1,257 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { createLogger } from '@sim/logger'
+import { normalizeEmail } from '@sim/utils/string'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { client, useSession } from '@/lib/auth/auth-client'
+import { validateCallbackUrl } from '@/lib/core/security/input-validation'
+
+const logger = createLogger('useVerification')
+
+/**
+ * Mutually-exclusive phases of the email-OTP verification machine.
+ * - `idle`: awaiting input
+ * - `verifying`: a verify request is in flight
+ * - `verified`: code accepted, redirecting
+ * - `error`: last verify attempt failed (paired with `errorMessage`)
+ */
+type VerificationStatus = 'idle' | 'verifying' | 'verified' | 'error'
+
+interface UseVerificationParams {
+  hasEmailService: boolean
+  isProduction: boolean
+  isEmailVerificationEnabled: boolean
+}
+
+interface UseVerificationReturn {
+  otp: string
+  email: string
+  status: VerificationStatus
+  isResending: boolean
+  errorMessage: string
+  isOtpComplete: boolean
+  hasEmailService: boolean
+  isProduction: boolean
+  isEmailVerificationEnabled: boolean
+  verifyCode: () => Promise<void>
+  resendCode: () => void
+  handleOtpChange: (value: string) => void
+}
+
+export function useVerification({
+  hasEmailService,
+  isProduction,
+  isEmailVerificationEnabled,
+}: UseVerificationParams): UseVerificationReturn {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { refetch: refetchSession } = useSession()
+  const [otp, setOtp] = useState('')
+  const [email, setEmail] = useState('')
+  const [status, setStatus] = useState<VerificationStatus>('idle')
+  const [isResending, setIsResending] = useState(false)
+  const [isSendingInitialOtp, setIsSendingInitialOtp] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+  const [redirectUrl, setRedirectUrl] = useState<string | null>(null)
+  const [isInviteFlow, setIsInviteFlow] = useState(false)
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const storedEmail = sessionStorage.getItem('verificationEmail')
+      if (storedEmail) {
+        setEmail(storedEmail)
+      }
+
+      const storedRedirectUrl = sessionStorage.getItem('inviteRedirectUrl')
+      if (storedRedirectUrl && validateCallbackUrl(storedRedirectUrl)) {
+        setRedirectUrl(storedRedirectUrl)
+      } else if (storedRedirectUrl) {
+        logger.warn('Ignoring unsafe stored invite redirect URL', { url: storedRedirectUrl })
+        sessionStorage.removeItem('inviteRedirectUrl')
+      }
+
+      const storedIsInviteFlow = sessionStorage.getItem('isInviteFlow')
+      if (storedIsInviteFlow === 'true') {
+        setIsInviteFlow(true)
+      }
+    }
+
+    const redirectParam = searchParams.get('redirectAfter')
+    if (redirectParam) {
+      if (validateCallbackUrl(redirectParam)) {
+        setRedirectUrl(redirectParam)
+      } else {
+        logger.warn('Ignoring unsafe redirectAfter parameter', { url: redirectParam })
+      }
+    }
+
+    const inviteFlowParam = searchParams.get('invite_flow')
+    if (inviteFlowParam === 'true') {
+      setIsInviteFlow(true)
+    }
+  }, [searchParams])
+
+  useEffect(() => {
+    if (email && !isSendingInitialOtp && hasEmailService) {
+      setIsSendingInitialOtp(true)
+    }
+  }, [email, isSendingInitialOtp, hasEmailService])
+
+  const isOtpComplete = otp.length === 6
+
+  async function verifyCode() {
+    if (!isOtpComplete || !email) return
+
+    setStatus('verifying')
+    setErrorMessage('')
+
+    try {
+      const normalizedEmail = normalizeEmail(email)
+      const response = await client.emailOtp.verifyEmail({
+        email: normalizedEmail,
+        otp,
+      })
+
+      if (response && !response.error) {
+        setStatus('verified')
+
+        try {
+          await refetchSession()
+        } catch (e) {
+          logger.warn('Failed to refetch session after verification', e)
+        }
+
+        if (typeof window !== 'undefined') {
+          sessionStorage.removeItem('verificationEmail')
+
+          if (isInviteFlow) {
+            sessionStorage.removeItem('inviteRedirectUrl')
+            sessionStorage.removeItem('isInviteFlow')
+          }
+        }
+
+        setTimeout(() => {
+          if (isInviteFlow && redirectUrl) {
+            window.location.href = redirectUrl
+          } else {
+            window.location.href = '/workspace'
+          }
+        }, 1000)
+      } else {
+        logger.info('Setting invalid OTP state - API error response')
+        const message = 'Invalid verification code. Please check and try again.'
+        setStatus('error')
+        setErrorMessage(message)
+        logger.info('Error state after API error:', { errorMessage: message })
+        setOtp('')
+      }
+    } catch (error: any) {
+      let message = 'Verification failed. Please check your code and try again.'
+
+      if (error.message?.includes('expired')) {
+        message = 'The verification code has expired. Please request a new one.'
+      } else if (error.message?.includes('invalid')) {
+        logger.info('Setting invalid OTP state - caught error')
+        message = 'Invalid verification code. Please check and try again.'
+      } else if (error.message?.includes('attempts')) {
+        message = 'Too many failed attempts. Please request a new code.'
+      }
+
+      setStatus('error')
+      setErrorMessage(message)
+      logger.info('Error state after caught error:', { errorMessage: message })
+
+      setOtp('')
+    }
+  }
+
+  function resendCode() {
+    if (!email || !hasEmailService || !isEmailVerificationEnabled) return
+
+    setIsResending(true)
+    setErrorMessage('')
+
+    const normalizedEmail = normalizeEmail(email)
+    client.emailOtp
+      .sendVerificationOtp({
+        email: normalizedEmail,
+        type: 'email-verification',
+      })
+      .then(() => {})
+      .catch(() => {
+        setErrorMessage('Failed to resend verification code. Please try again later.')
+      })
+      .finally(() => {
+        setIsResending(false)
+      })
+  }
+
+  /**
+   * On a complete (6-char) code, clear any lingering message — including a
+   * resend failure (which sets `errorMessage` while `status` stays `idle`) — and
+   * exit the error state, matching the prior unconditional reset on a full OTP.
+   */
+  function handleOtpChange(value: string) {
+    if (value.length === 6) {
+      if (status === 'error') setStatus('idle')
+      setErrorMessage('')
+    }
+    setOtp(value)
+  }
+
+  useEffect(() => {
+    if (
+      otp.length === 6 &&
+      email &&
+      status !== 'verifying' &&
+      status !== 'verified' &&
+      !isResending
+    ) {
+      const timeoutId = setTimeout(() => {
+        verifyCode()
+      }, 300)
+
+      return () => clearTimeout(timeoutId)
+    }
+  }, [otp, email, status, isResending])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (!isEmailVerificationEnabled) {
+        setStatus('verified')
+
+        const handleRedirect = async () => {
+          try {
+            await refetchSession()
+          } catch (error) {
+            logger.warn('Failed to refetch session during verification skip:', error)
+          }
+
+          if (isInviteFlow && redirectUrl) {
+            window.location.href = redirectUrl
+          } else {
+            router.push('/workspace')
+          }
+        }
+
+        handleRedirect()
+      }
+    }
+  }, [isEmailVerificationEnabled, router, isInviteFlow, redirectUrl])
+
+  return {
+    otp,
+    email,
+    status,
+    isResending,
+    errorMessage,
+    isOtpComplete,
+    hasEmailService,
+    isProduction,
+    isEmailVerificationEnabled,
+    verifyCode,
+    resendCode,
+    handleOtpChange,
+  }
+}

apps/sim/app/(auth)/verify/verify-content.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import { cn, InputOTP, InputOTPGroup, InputOTPSlot } from '@sim/emcn'
+import {
+  AuthFormMessage,
+  AuthHeader,
+  AuthNavPrompt,
+  AuthSubmitButton,
+  AuthTextLink,
+} from '@/app/(auth)/components'
+import { useVerification } from '@/app/(auth)/verify/use-verification'
+
+interface VerifyContentProps {
+  hasEmailService: boolean
+  isProduction: boolean
+  isEmailVerificationEnabled: boolean
+}
+
+const OTP_SLOTS = [0, 1, 2, 3, 4, 5] as const
+
+function VerificationForm({
+  hasEmailService,
+  isProduction,
+  isEmailVerificationEnabled,
+}: {
+  hasEmailService: boolean
+  isProduction: boolean
+  isEmailVerificationEnabled: boolean
+}) {
+  const {
+    otp,
+    email,
+    status,
+    isResending,
+    errorMessage,
+    isOtpComplete,
+    verifyCode,
+    resendCode,
+    handleOtpChange,
+  } = useVerification({ hasEmailService, isProduction, isEmailVerificationEnabled })
+
+  const isVerified = status === 'verified'
+  const isLoading = status === 'verifying' || isResending
+  const isInvalidOtp = status === 'error'
+
+  const [countdown, setCountdown] = useState(0)
+  const [isResendDisabled, setIsResendDisabled] = useState(false)
+
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown((c) => c - 1), 1000)
+      return () => clearTimeout(timer)
+    }
+    if (countdown === 0 && isResendDisabled) {
+      setIsResendDisabled(false)
+    }
+  }, [countdown, isResendDisabled])
+
+  const handleResend = () => {
+    resendCode()
+    setIsResendDisabled(true)
+    setCountdown(30)
+  }
+
+  return (
+    <div className='space-y-6'>
+      <AuthHeader
+        title={isVerified ? 'Email Verified' : 'Verify your email'}
+        description={
+          isVerified
+            ? 'Your email has been verified. Redirecting to dashboard...'
+            : !isEmailVerificationEnabled
+              ? 'Email verification is disabled. Redirecting to dashboard...'
+              : hasEmailService
+                ? `A verification code has been sent to ${email || 'your email'}`
+                : !isProduction
+                  ? 'Development mode: Check your console logs for the verification code'
+                  : 'Error: Email verification is enabled but no email service is configured'
+        }
+      />
+
+      {!isVerified && isEmailVerificationEnabled && (
+        <div className='space-y-6'>
+          <div className='space-y-5'>
+            <p className='text-center text-[var(--text-muted)] text-sm'>
+              Enter the 6-digit code to verify your account.
+              {hasEmailService ? " If you don't see it in your inbox, check your spam folder." : ''}
+            </p>
+
+            <div className='flex justify-center'>
+              <InputOTP maxLength={6} value={otp} onChange={handleOtpChange} disabled={isLoading}>
+                <InputOTPGroup>
+                  {OTP_SLOTS.map((index) => (
+                    <InputOTPSlot
+                      key={index}
+                      index={index}
+                      className={cn(isInvalidOtp && 'border-[var(--text-error)]')}
+                    />
+                  ))}
+                </InputOTPGroup>
+              </InputOTP>
+            </div>
+
+            {errorMessage && (
+              <AuthFormMessage type='error' align='center'>
+                <p>{errorMessage}</p>
+              </AuthFormMessage>
+            )}
+          </div>
+
+          <AuthSubmitButton
+            type='button'
+            onClick={verifyCode}
+            loading={isLoading}
+            loadingLabel='Verifying…'
+            disabled={!isOtpComplete}
+          >
+            Verify Email
+          </AuthSubmitButton>
+
+          {hasEmailService && (
+            <p className='text-center text-[var(--text-muted)] text-sm'>
+              Didn't receive a code?{' '}
+              {countdown > 0 ? (
+                <span>
+                  Resend in <span className='text-[var(--text-primary)]'>{countdown}s</span>
+                </span>
+              ) : (
+                <AuthTextLink onClick={handleResend} disabled={isLoading || isResendDisabled}>
+                  Resend
+                </AuthTextLink>
+              )}
+            </p>
+          )}
+
+          <AuthNavPrompt
+            href='/signup'
+            linkLabel='Back to signup'
+            onNavigate={() => {
+              if (typeof window !== 'undefined') {
+                sessionStorage.removeItem('verificationEmail')
+                sessionStorage.removeItem('inviteRedirectUrl')
+                sessionStorage.removeItem('isInviteFlow')
+              }
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function VerificationFormFallback() {
+  return (
+    <div className='text-center'>
+      <div className='animate-pulse'>
+        <div className='mx-auto mb-4 h-8 w-48 rounded bg-[var(--surface-4)]' />
+        <div className='mx-auto h-4 w-64 rounded bg-[var(--surface-4)]' />
+      </div>
+    </div>
+  )
+}
+
+export function VerifyContent({
+  hasEmailService,
+  isProduction,
+  isEmailVerificationEnabled,
+}: VerifyContentProps) {
+  return (
+    <Suspense fallback={<VerificationFormFallback />}>
+      <VerificationForm
+        hasEmailService={hasEmailService}
+        isProduction={isProduction}
+        isEmailVerificationEnabled={isEmailVerificationEnabled}
+      />
+    </Suspense>
+  )
+}