fix(deployment): login

Author: emir-karabeg

apps/sim/app/(auth)/components/social-login-buttons.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { GithubIcon, GoogleIcon } from '@/components/icons'
 import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@@ -23,6 +23,15 @@ export function SocialLoginButtons({
   const [isGithubLoading, setIsGithubLoading] = useState(false)
   const [isGoogleLoading, setIsGoogleLoading] = useState(false)
   const { addNotification } = useNotificationStore()
+  const [mounted, setMounted] = useState(false)
+
+  // Set mounted state to true on client-side
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Only render on the client side to avoid hydration errors
+  if (!mounted) return null
 
   async function signInWithGithub() {
     if (!githubAvailable) return

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

@@ -37,14 +37,14 @@ export default function LoginPage({
   const router = useRouter()
   const searchParams = useSearchParams()
   const [isLoading, setIsLoading] = useState(false)
-  const [, setMounted] = useState(false)
+  const [mounted, setMounted] = useState(false)
   const { addNotification } = useNotificationStore()
   const [showPassword, setShowPassword] = useState(false)
   const [password, setPassword] = useState('')
 
-  // Extract callbackUrl from the URL for both form and OAuth providers
-  const callbackUrl = searchParams?.get('callbackUrl') || '/w'
-  const isInviteFlow = searchParams?.get('invite_flow') === 'true'
+  // Initialize state for URL parameters
+  const [callbackUrl, setCallbackUrl] = useState('/w')
+  const [isInviteFlow, setIsInviteFlow] = useState(false)
 
   // Forgot password states
   const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
@@ -55,9 +55,21 @@ export default function LoginPage({
     message: string
   }>({ type: null, message: '' })
 
+  // Extract URL parameters after component mounts to avoid SSR issues
   useEffect(() => {
     setMounted(true)
-  }, [])
+
+    // Only access search params on the client side
+    if (searchParams) {
+      const callback = searchParams.get('callbackUrl')
+      if (callback) {
+        setCallbackUrl(callback)
+      }
+
+      const inviteFlow = searchParams.get('invite_flow') === 'true'
+      setIsInviteFlow(inviteFlow)
+    }
+  }, [searchParams])
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -228,12 +240,14 @@ export default function LoginPage({
           </CardHeader>
           <CardContent>
             <div className="grid gap-6">
-              <SocialLoginButtons
-                githubAvailable={githubAvailable}
-                googleAvailable={googleAvailable}
-                callbackURL={callbackUrl}
-                isProduction={isProduction}
-              />
+              {mounted && (
+                <SocialLoginButtons
+                  githubAvailable={githubAvailable}
+                  googleAvailable={googleAvailable}
+                  callbackURL={callbackUrl}
+                  isProduction={isProduction}
+                />
+              )}
               <div className="relative">
                 <div className="absolute inset-0 flex items-center">
                   <span className="w-full border-t" />
@@ -300,7 +314,7 @@ export default function LoginPage({
             <p className="text-sm text-gray-500 text-center w-full">
               Don't have an account?{' '}
               <Link
-                href={`/signup${searchParams ? `?${searchParams.toString()}` : ''}`}
+                href={mounted && searchParams ? `/signup?${searchParams.toString()}` : '/signup'}
                 className="text-primary hover:underline"
               >
                 Sign up

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

@@ -1,6 +1,9 @@
 import { getOAuthProviderStatus } from '../components/oauth-provider-checker'
 import LoginForm from './login-form'
 
+// Force dynamic rendering to avoid prerender errors with search params
+export const dynamic = 'force-dynamic'
+
 export default async function LoginPage() {
   const { githubAvailable, googleAvailable, isProduction } = await getOAuthProviderStatus()
 

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

@@ -1,6 +1,9 @@
 import { getOAuthProviderStatus } from '../components/oauth-provider-checker'
 import SignupForm from './signup-form'
 
+// Force dynamic rendering to avoid prerender errors with search params
+export const dynamic = 'force-dynamic'
+
 export default async function SignupPage() {
   const { githubAvailable, googleAvailable, isProduction } = await getOAuthProviderStatus()
 

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

@@ -2,6 +2,9 @@ import { isProd } from '@/lib/environment'
 import { getBaseUrl } from '@/lib/urls/utils'
 import { VerifyContent } from './verify-content'
 
+// Force dynamic rendering to avoid prerender errors with search params
+export const dynamic = 'force-dynamic'
+
 export default function VerifyPage() {
   const baseUrl = getBaseUrl()