chore: import upstream snapshot with attribution

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

@@ -0,0 +1,28 @@
+import { Skeleton } from '@sim/emcn'
+
+export default function SignupLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[100px] rounded-[4px]' />
+      <div className='mt-8 w-full space-y-2'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <div className='mt-4 w-full space-y-2'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <div className='mt-4 w-full space-y-2'>
+        <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-6 h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-6 h-[1px] w-full rounded-[1px]' />
+      <div className='mt-6 flex w-full gap-3'>
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-6 h-[14px] w-[220px] rounded-[4px]' />
+    </div>
+  )
+}

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

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next'
+import { isEmailSignupDisabled, isRegistrationDisabled } from '@/lib/core/config/env-flags'
+import { getOAuthProviderStatus } from '@/app/(auth)/components/oauth-provider-checker'
+import SignupForm from '@/app/(auth)/signup/signup-form'
+
+export const metadata: Metadata = {
+  title: 'Sign Up',
+}
+
+export const dynamic = 'force-dynamic'
+
+export default async function SignupPage() {
+  if (isRegistrationDisabled) {
+    return <div>Registration is disabled, please contact your admin.</div>
+  }
+
+  const { githubAvailable, googleAvailable, microsoftAvailable, isProduction } =
+    await getOAuthProviderStatus()
+
+  return (
+    <SignupForm
+      githubAvailable={githubAvailable}
+      googleAvailable={googleAvailable}
+      microsoftAvailable={microsoftAvailable}
+      isProduction={isProduction}
+      emailSignupEnabled={!isEmailSignupDisabled}
+    />
+  )
+}

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -0,0 +1,498 @@
+'use client'
+
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react'
+import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
+import { createLogger } from '@sim/logger'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
+import { client, useSession } from '@/lib/auth/auth-client'
+import { getEnv, isFalsy, isTruthy } from '@/lib/core/config/env'
+import { validateCallbackUrl } from '@/lib/core/security/input-validation'
+import { quickValidateEmail } from '@/lib/messaging/email/validation'
+import { captureClientEvent, captureEvent } from '@/lib/posthog/client'
+import {
+  AuthDivider,
+  AuthField,
+  AuthFormMessage,
+  AuthHeader,
+  AuthInput,
+  AuthLegalFooter,
+  AuthNavPrompt,
+  AuthSubmitButton,
+  PasswordInput,
+  SocialLoginButtons,
+  SSOLoginButton,
+} from '@/app/(auth)/components'
+
+const logger = createLogger('SignupForm')
+
+const PASSWORD_VALIDATIONS = {
+  minLength: { regex: /.{8,}/, message: 'Password must be at least 8 characters long.' },
+  uppercase: {
+    regex: /(?=.*?[A-Z])/,
+    message: 'Password must include at least one uppercase letter.',
+  },
+  lowercase: {
+    regex: /(?=.*?[a-z])/,
+    message: 'Password must include at least one lowercase letter.',
+  },
+  number: { regex: /(?=.*?[0-9])/, message: 'Password must include at least one number.' },
+  special: {
+    regex: /(?=.*?[#?!@$%^&*-])/,
+    message: 'Password must include at least one special character.',
+  },
+}
+
+const NAME_VALIDATIONS = {
+  required: {
+    test: (value: string) => Boolean(value && typeof value === 'string'),
+    message: 'Name is required.',
+  },
+  notEmpty: {
+    test: (value: string) => value.trim().length > 0,
+    message: 'Name cannot be empty.',
+  },
+  validCharacters: {
+    regex: /^[\p{L}\s\-']+$/u,
+    message: 'Name can only contain letters, spaces, hyphens, and apostrophes.',
+  },
+  noConsecutiveSpaces: {
+    regex: /^(?!.*\s\s).*$/,
+    message: 'Name cannot contain consecutive spaces.',
+  },
+}
+
+const validateEmailField = (emailValue: string): string[] => {
+  const errors: string[] = []
+
+  if (!emailValue || !emailValue.trim()) {
+    errors.push('Email is required.')
+    return errors
+  }
+
+  const validation = quickValidateEmail(emailValue.trim().toLowerCase())
+  if (!validation.isValid) {
+    errors.push(validation.reason || 'Please enter a valid email address.')
+  }
+
+  return errors
+}
+
+interface SignupFormProps {
+  githubAvailable: boolean
+  googleAvailable: boolean
+  microsoftAvailable: boolean
+  isProduction: boolean
+  emailSignupEnabled: boolean
+}
+
+function SignupFormContent({
+  githubAvailable,
+  googleAvailable,
+  microsoftAvailable,
+  isProduction,
+  emailSignupEnabled,
+}: SignupFormProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { refetch: refetchSession } = useSession()
+  const posthog = usePostHog()
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    captureClientEvent('signup_page_viewed', {})
+  }, [])
+  const [password, setPassword] = useState('')
+  const [passwordErrors, setPasswordErrors] = useState<string[]>([])
+  const [showValidationError, setShowValidationError] = useState(false)
+  const [email, setEmail] = useState(() => searchParams.get('email') ?? '')
+  const [emailError, setEmailError] = useState('')
+  const [emailErrors, setEmailErrors] = useState<string[]>([])
+  const [showEmailValidationError, setShowEmailValidationError] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
+  const turnstileRef = useRef<TurnstileInstance>(null)
+  const [turnstileSiteKey] = useState(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'))
+  const rawRedirectUrl = searchParams.get('redirect') || searchParams.get('callbackUrl') || ''
+  const isValidRedirectUrl = rawRedirectUrl ? validateCallbackUrl(rawRedirectUrl) : false
+  const invalidCallbackRef = useRef(false)
+  if (rawRedirectUrl && !isValidRedirectUrl && !invalidCallbackRef.current) {
+    invalidCallbackRef.current = true
+    logger.warn('Invalid callback URL detected and blocked:', { url: rawRedirectUrl })
+  }
+  const redirectUrl = isValidRedirectUrl ? rawRedirectUrl : ''
+  const isInviteFlow = useMemo(
+    () => searchParams.get('invite_flow') === 'true' || redirectUrl.startsWith('/invite/'),
+    [searchParams, redirectUrl]
+  )
+
+  const [name, setName] = useState('')
+  const [nameErrors, setNameErrors] = useState<string[]>([])
+  const [showNameValidationError, setShowNameValidationError] = useState(false)
+
+  const validatePassword = (passwordValue: string): string[] => {
+    const errors: string[] = []
+
+    if (!PASSWORD_VALIDATIONS.minLength.regex.test(passwordValue)) {
+      errors.push(PASSWORD_VALIDATIONS.minLength.message)
+    }
+
+    if (!PASSWORD_VALIDATIONS.uppercase.regex.test(passwordValue)) {
+      errors.push(PASSWORD_VALIDATIONS.uppercase.message)
+    }
+
+    if (!PASSWORD_VALIDATIONS.lowercase.regex.test(passwordValue)) {
+      errors.push(PASSWORD_VALIDATIONS.lowercase.message)
+    }
+
+    if (!PASSWORD_VALIDATIONS.number.regex.test(passwordValue)) {
+      errors.push(PASSWORD_VALIDATIONS.number.message)
+    }
+
+    if (!PASSWORD_VALIDATIONS.special.regex.test(passwordValue)) {
+      errors.push(PASSWORD_VALIDATIONS.special.message)
+    }
+
+    return errors
+  }
+
+  const validateName = (nameValue: string): string[] => {
+    const errors: string[] = []
+
+    if (!NAME_VALIDATIONS.required.test(nameValue)) {
+      errors.push(NAME_VALIDATIONS.required.message)
+      return errors
+    }
+
+    if (!NAME_VALIDATIONS.notEmpty.test(nameValue)) {
+      errors.push(NAME_VALIDATIONS.notEmpty.message)
+      return errors
+    }
+
+    if (!NAME_VALIDATIONS.validCharacters.regex.test(nameValue.trim())) {
+      errors.push(NAME_VALIDATIONS.validCharacters.message)
+    }
+
+    if (!NAME_VALIDATIONS.noConsecutiveSpaces.regex.test(nameValue)) {
+      errors.push(NAME_VALIDATIONS.noConsecutiveSpaces.message)
+    }
+
+    return errors
+  }
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newPassword = e.target.value
+    setPassword(newPassword)
+
+    const errors = validatePassword(newPassword)
+    setPasswordErrors(errors)
+    setShowValidationError(false)
+  }
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = e.target.value
+    setName(rawValue)
+
+    const errors = validateName(rawValue)
+    setNameErrors(errors)
+    setShowNameValidationError(false)
+  }
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newEmail = e.target.value
+    setEmail(newEmail)
+
+    const errors = validateEmailField(newEmail)
+    setEmailErrors(errors)
+    setShowEmailValidationError(false)
+
+    if (emailError) {
+      setEmailError('')
+    }
+  }
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setIsLoading(true)
+
+    const formData = new FormData(e.currentTarget)
+    const emailValueRaw = formData.get('email') as string
+    const emailValue = emailValueRaw.trim().toLowerCase()
+    const passwordValue = formData.get('password') as string
+    const nameValue = formData.get('name') as string
+
+    const trimmedName = nameValue.trim()
+
+    const nameValidationErrors = validateName(trimmedName)
+    setNameErrors(nameValidationErrors)
+    setShowNameValidationError(nameValidationErrors.length > 0)
+
+    const emailValidationErrors = validateEmailField(emailValue)
+    setEmailErrors(emailValidationErrors)
+    setShowEmailValidationError(emailValidationErrors.length > 0)
+
+    const errors = validatePassword(passwordValue)
+    setPasswordErrors(errors)
+
+    setShowValidationError(errors.length > 0)
+
+    try {
+      if (
+        nameValidationErrors.length > 0 ||
+        emailValidationErrors.length > 0 ||
+        errors.length > 0
+      ) {
+        setIsLoading(false)
+        return
+      }
+
+      if (trimmedName.length > 100) {
+        setNameErrors(['Name will be truncated to 100 characters. Please shorten your name.'])
+        setShowNameValidationError(true)
+        setIsLoading(false)
+        return
+      }
+
+      let token: string | undefined
+      const widget = turnstileRef.current
+      if (turnstileSiteKey && widget) {
+        try {
+          widget.reset()
+          widget.execute()
+          token = await widget.getResponsePromise()
+        } catch {
+          captureEvent(posthog, 'signup_failed', {
+            error_code: 'captcha_client_failure',
+          })
+          setFormError('Captcha verification failed. Please try again.')
+          setIsLoading(false)
+          return
+        }
+      }
+
+      setFormError(null)
+      const response = await client.signUp.email(
+        {
+          email: emailValue,
+          password: passwordValue,
+          name: trimmedName,
+        },
+        {
+          headers: {
+            ...(token ? { 'x-captcha-response': token } : {}),
+          },
+          onError: (ctx) => {
+            logger.warn('Signup error:', ctx.error)
+            const errorMessage: string[] = ['Failed to create account']
+
+            let errorCode = 'unknown'
+            if (ctx.error.code?.includes('USER_ALREADY_EXISTS')) {
+              errorCode = 'user_already_exists'
+              setEmailError('An account with this email already exists. Please sign in instead.')
+            } else if (
+              ctx.error.code?.includes('BAD_REQUEST') ||
+              ctx.error.message?.includes('Email and password sign up is not enabled')
+            ) {
+              errorCode = 'signup_disabled'
+              errorMessage.push('Email signup is currently disabled.')
+              setEmailError(errorMessage[0])
+            } else if (ctx.error.code?.includes('INVALID_EMAIL')) {
+              errorCode = 'invalid_email'
+              errorMessage.push('Please enter a valid email address.')
+              setEmailError(errorMessage[0])
+            } else if (ctx.error.code?.includes('PASSWORD_TOO_SHORT')) {
+              errorCode = 'password_too_short'
+              errorMessage.push('Password must be at least 8 characters long.')
+              setPasswordErrors(errorMessage)
+              setShowValidationError(true)
+            } else if (ctx.error.code?.includes('PASSWORD_TOO_LONG')) {
+              errorCode = 'password_too_long'
+              errorMessage.push('Password must be less than 128 characters long.')
+              setPasswordErrors(errorMessage)
+              setShowValidationError(true)
+            } else if (ctx.error.code?.includes('network')) {
+              errorCode = 'network_error'
+              errorMessage.push('Network error. Please check your connection and try again.')
+              setPasswordErrors(errorMessage)
+              setShowValidationError(true)
+            } else if (ctx.error.code?.includes('rate limit')) {
+              errorCode = 'rate_limited'
+              errorMessage.push('Too many requests. Please wait a moment before trying again.')
+              setPasswordErrors(errorMessage)
+              setShowValidationError(true)
+            } else {
+              setPasswordErrors(errorMessage)
+              setShowValidationError(true)
+            }
+
+            captureEvent(posthog, 'signup_failed', { error_code: errorCode })
+          },
+        }
+      )
+
+      if (!response || response.error) {
+        setIsLoading(false)
+        return
+      }
+
+      try {
+        await refetchSession()
+        logger.info('Session refreshed after successful signup')
+      } catch (sessionError) {
+        logger.error('Failed to refresh session after signup:', sessionError)
+      }
+
+      if (typeof window !== 'undefined') {
+        sessionStorage.setItem('verificationEmail', emailValue)
+        if (isInviteFlow && redirectUrl) {
+          sessionStorage.setItem('inviteRedirectUrl', redirectUrl)
+          sessionStorage.setItem('isInviteFlow', 'true')
+        }
+      }
+
+      router.push('/verify?fromSignup=true')
+    } catch (error) {
+      logger.error('Signup error:', error)
+      setIsLoading(false)
+    }
+  }
+
+  const ssoEnabled = isTruthy(getEnv('NEXT_PUBLIC_SSO_ENABLED'))
+  const emailEnabled =
+    !isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) && emailSignupEnabled
+  const hasSocial = githubAvailable || googleAvailable || microsoftAvailable
+  const hasOnlySSO = ssoEnabled && !emailEnabled && !hasSocial
+  const showBottomSection = hasSocial || (ssoEnabled && !hasOnlySSO)
+  const showDivider = (emailEnabled || hasOnlySSO) && showBottomSection
+
+  const nameFieldErrors = showNameValidationError && nameErrors.length > 0 ? nameErrors : []
+  const emailHasError = Boolean(emailError) || (showEmailValidationError && emailErrors.length > 0)
+  const emailFieldErrors =
+    showEmailValidationError && emailErrors.length > 0
+      ? emailErrors
+      : emailError && !showEmailValidationError
+        ? [emailError]
+        : []
+  const passwordFieldErrors = showValidationError && passwordErrors.length > 0 ? passwordErrors : []
+  const canSubmit = name.trim().length > 0 && email.trim().length > 0 && password.length > 0
+
+  return (
+    <div className='space-y-6'>
+      <AuthHeader title='Create an account' description='Create an account or log in' />
+
+      {hasOnlySSO && <SSOLoginButton callbackURL={redirectUrl || '/workspace'} variant='primary' />}
+
+      {emailEnabled && (
+        <form onSubmit={onSubmit} className='space-y-6'>
+          <div className='space-y-5'>
+            <AuthField htmlFor='name' label='Full name' errors={nameFieldErrors}>
+              <AuthInput
+                id='name'
+                name='name'
+                placeholder='Enter your name'
+                type='text'
+                autoCapitalize='words'
+                autoComplete='name'
+                title='Name can only contain letters, spaces, hyphens, and apostrophes'
+                value={name}
+                onChange={handleNameChange}
+                error={nameFieldErrors.length > 0}
+              />
+            </AuthField>
+            <AuthField htmlFor='email' label='Email' errors={emailFieldErrors}>
+              <AuthInput
+                id='email'
+                name='email'
+                placeholder='Enter your email'
+                autoCapitalize='none'
+                autoComplete='email'
+                autoCorrect='off'
+                value={email}
+                onChange={handleEmailChange}
+                error={emailHasError}
+              />
+            </AuthField>
+            <AuthField htmlFor='password' label='Password' errors={passwordFieldErrors}>
+              <PasswordInput
+                id='password'
+                name='password'
+                autoCapitalize='none'
+                autoComplete='new-password'
+                placeholder='Enter your password'
+                autoCorrect='off'
+                value={password}
+                onChange={handlePasswordChange}
+                error={passwordFieldErrors.length > 0}
+              />
+            </AuthField>
+          </div>
+
+          {turnstileSiteKey && (
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              options={{ execution: 'execute', appearance: 'execute' }}
+            />
+          )}
+
+          {formError && (
+            <AuthFormMessage type='error'>
+              <p>{formError}</p>
+            </AuthFormMessage>
+          )}
+
+          <AuthSubmitButton
+            loading={isLoading}
+            loadingLabel='Creating account…'
+            disabled={!canSubmit}
+          >
+            Create account
+          </AuthSubmitButton>
+        </form>
+      )}
+
+      {showDivider && <AuthDivider label='Or continue with' />}
+
+      {showBottomSection && (
+        <SocialLoginButtons
+          githubAvailable={githubAvailable}
+          googleAvailable={googleAvailable}
+          microsoftAvailable={microsoftAvailable}
+          callbackURL={redirectUrl || '/workspace'}
+          isProduction={isProduction}
+        >
+          {ssoEnabled && !hasOnlySSO && (
+            <SSOLoginButton callbackURL={redirectUrl || '/workspace'} variant='outline' />
+          )}
+        </SocialLoginButtons>
+      )}
+
+      <AuthNavPrompt
+        prompt='Already have an account?'
+        href={isInviteFlow ? `/login?invite_flow=true&callbackUrl=${redirectUrl}` : '/login'}
+        linkLabel='Sign in'
+      />
+
+      <AuthLegalFooter action='creating an account' />
+    </div>
+  )
+}
+
+export default function SignupPage({
+  githubAvailable,
+  googleAvailable,
+  microsoftAvailable,
+  isProduction,
+  emailSignupEnabled,
+}: SignupFormProps) {
+  return (
+    <Suspense fallback={<div className='flex h-screen items-center justify-center'>Loading…</div>}>
+      <SignupFormContent
+        githubAvailable={githubAvailable}
+        googleAvailable={googleAvailable}
+        microsoftAvailable={microsoftAvailable}
+        isProduction={isProduction}
+        emailSignupEnabled={emailSignupEnabled}
+      />
+    </Suspense>
+  )
+}