feat(invite-workspace) (#358)

* feat(invite-workspace): added invite UI and capabilites; improved tooltips; added keyboard shortcuts; adjusted clay desc

* improvement: restructured error and invite pages

* feat(invite-workspace): users can now join workspaces; protected delete from members

* fix(deployment): login

* feat(invite-workspace): members registries and variables loaded from workspace

* feat(invite-workspace): ran migrations

* fix: delete workflows on initial sync

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
@@ -35,12 +35,17 @@ export default function LoginPage({
   isProduction: boolean
 }) {
   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('')
 
+  // Initialize state for URL parameters
+  const [callbackUrl, setCallbackUrl] = useState('/w')
+  const [isInviteFlow, setIsInviteFlow] = useState(false)
+
   // Forgot password states
   const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
   const [forgotPasswordEmail, setForgotPasswordEmail] = useState('')
@@ -50,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()
@@ -62,11 +79,12 @@ export default function LoginPage({
     const email = formData.get('email') as string
 
     try {
+      // Use the extracted callbackUrl instead of hardcoded value
       const result = await client.signIn.email(
         {
           email,
           password,
-          callbackURL: '/w',
+          callbackURL: callbackUrl,
         },
         {
           onError: (ctx) => {
@@ -214,16 +232,22 @@ export default function LoginPage({
         <Card className="w-full">
           <CardHeader>
             <CardTitle>Welcome back</CardTitle>
-            <CardDescription>Enter your credentials to access your account</CardDescription>
+            <CardDescription>
+              {isInviteFlow
+                ? 'Sign in to continue to the invitation'
+                : 'Enter your credentials to access your account'}
+            </CardDescription>
           </CardHeader>
           <CardContent>
             <div className="grid gap-6">
-              <SocialLoginButtons
-                githubAvailable={githubAvailable}
-                googleAvailable={googleAvailable}
-                callbackURL="/w"
-                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" />
@@ -289,7 +313,10 @@ export default function LoginPage({
           <CardFooter>
             <p className="text-sm text-gray-500 text-center w-full">
               Don't have an account?{' '}
-              <Link href="/signup" className="text-primary hover:underline">
+              <Link
+                href={mounted && searchParams ? `/signup?${searchParams.toString()}` : '/signup'}
+                className="text-primary hover:underline"
+              >
                 Sign up
               </Link>
             </p>

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)/signup/signup-form.tsx

@@ -57,6 +57,8 @@ function SignupFormContent({
   const [showValidationError, setShowValidationError] = useState(false)
   const [email, setEmail] = useState('')
   const [waitlistToken, setWaitlistToken] = useState('')
+  const [redirectUrl, setRedirectUrl] = useState('')
+  const [isInviteFlow, setIsInviteFlow] = useState(false)
 
   useEffect(() => {
     setMounted(true)
@@ -72,6 +74,23 @@ function SignupFormContent({
       // Verify the token and get the email
       verifyWaitlistToken(tokenParam)
     }
+
+    // Handle redirection for invitation flow
+    const redirectParam = searchParams.get('redirect')
+    if (redirectParam) {
+      setRedirectUrl(redirectParam)
+
+      // Check if this is part of an invitation flow
+      if (redirectParam.startsWith('/invite/')) {
+        setIsInviteFlow(true)
+      }
+    }
+
+    // Explicitly check for invite_flow parameter
+    const inviteFlowParam = searchParams.get('invite_flow')
+    if (inviteFlowParam === 'true') {
+      setIsInviteFlow(true)
+    }
   }, [searchParams])
 
   // Verify waitlist token and pre-fill email
@@ -207,9 +226,22 @@ function SignupFormContent({
 
       if (typeof window !== 'undefined') {
         sessionStorage.setItem('verificationEmail', emailValue)
+
+        // If this is an invitation flow, store that information for after verification
+        if (isInviteFlow && redirectUrl) {
+          sessionStorage.setItem('inviteRedirectUrl', redirectUrl)
+          sessionStorage.setItem('isInviteFlow', 'true')
+        }
       }
 
-      router.push(`/verify?fromSignup=true`)
+      // If verification is required, go to verify page with proper redirect
+      if (isInviteFlow && redirectUrl) {
+        router.push(
+          `/verify?fromSignup=true&redirectAfter=${encodeURIComponent(redirectUrl)}&invite_flow=true`
+        )
+      } else {
+        router.push(`/verify?fromSignup=true`)
+      }
     } catch (err: any) {
       console.error('Uncaught signup error:', err)
     } finally {

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()
 

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

@@ -42,6 +42,8 @@ export function useVerification({
   const [isSendingInitialOtp, setIsSendingInitialOtp] = useState(false)
   const [isInvalidOtp, setIsInvalidOtp] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
+  const [redirectUrl, setRedirectUrl] = useState<string | null>(null)
+  const [isInviteFlow, setIsInviteFlow] = useState(false)
 
   // Debug notification store
   useEffect(() => {
@@ -50,11 +52,35 @@ export function useVerification({
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
+      // Get stored email
       const storedEmail = sessionStorage.getItem('verificationEmail')
       if (storedEmail) {
         setEmail(storedEmail)
-        return
       }
+      
+      // Check for redirect information
+      const storedRedirectUrl = sessionStorage.getItem('inviteRedirectUrl')
+      if (storedRedirectUrl) {
+        setRedirectUrl(storedRedirectUrl)
+      }
+      
+      // Check if this is an invite flow
+      const storedIsInviteFlow = sessionStorage.getItem('isInviteFlow')
+      if (storedIsInviteFlow === 'true') {
+        setIsInviteFlow(true)
+      }
+    }
+    
+    // Also check URL parameters for redirect information
+    const redirectParam = searchParams.get('redirectAfter')
+    if (redirectParam) {
+      setRedirectUrl(redirectParam)
+    }
+    
+    // Check for invite_flow parameter
+    const inviteFlowParam = searchParams.get('invite_flow')
+    if (inviteFlowParam === 'true') {
+      setIsInviteFlow(true)
     }
   }, [searchParams])
 
@@ -104,10 +130,24 @@ export function useVerification({
         // Clear email from sessionStorage after successful verification
         if (typeof window !== 'undefined') {
           sessionStorage.removeItem('verificationEmail')
+          
+          // Also clear invite-related items
+          if (isInviteFlow) {
+            sessionStorage.removeItem('inviteRedirectUrl')
+            sessionStorage.removeItem('isInviteFlow')
+          }
         }
 
-        // Redirect to dashboard after a short delay
-        setTimeout(() => router.push('/w'), 2000)
+        // Redirect to proper page after a short delay
+        setTimeout(() => {
+          if (isInviteFlow && redirectUrl) {
+            // For invitation flow, redirect to the invitation page
+            router.push(redirectUrl)
+          } else {
+            // Default redirect to dashboard
+            router.push('/w')
+          }
+        }, 2000)
       } else {
         logger.info('Setting invalid OTP state - API error response')
         const message = 'Invalid verification code. Please check and try again.'

apps/sim/app/api/workflows/[id]/variables/route.ts

@@ -1,11 +1,11 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { eq } from 'drizzle-orm'
+import { and, eq } from 'drizzle-orm'
 import { z } from 'zod'
 import { getSession } from '@/lib/auth'
 import { createLogger } from '@/lib/logs/console-logger'
 import { Variable } from '@/stores/panel/variables/types'
 import { db } from '@/db'
-import { workflow } from '@/db/schema'
+import { workflow, workspaceMember } from '@/db/schema'
 
 const logger = createLogger('WorkflowVariablesAPI')
 
@@ -33,7 +33,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
-    // Check if the workflow belongs to the user
+    // Get the workflow record
     const workflowRecord = await db
       .select()
       .from(workflow)
@@ -45,9 +45,31 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
       return NextResponse.json({ error: 'Workflow not found' }, { status: 404 })
     }
 
-    if (workflowRecord[0].userId !== session.user.id) {
+    const workflowData = workflowRecord[0]
+    const workspaceId = workflowData.workspaceId
+
+    // Check authorization - either the user owns the workflow or is a member of the workspace
+    let isAuthorized = workflowData.userId === session.user.id
+
+    // If not authorized by ownership and the workflow belongs to a workspace, check workspace membership
+    if (!isAuthorized && workspaceId) {
+      const membership = await db
+        .select()
+        .from(workspaceMember)
+        .where(
+          and(
+            eq(workspaceMember.workspaceId, workspaceId),
+            eq(workspaceMember.userId, session.user.id)
+          )
+        )
+        .limit(1)
+
+      isAuthorized = membership.length > 0
+    }
+
+    if (!isAuthorized) {
       logger.warn(
-        `[${requestId}] User ${session.user.id} attempted to update variables for workflow ${workflowId} owned by ${workflowRecord[0].userId}`
+        `[${requestId}] User ${session.user.id} attempted to update variables for workflow ${workflowId} without permission`
       )
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
@@ -115,7 +137,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ id:
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
-    // Check if the workflow belongs to the user
+    // Get the workflow record
     const workflowRecord = await db
       .select()
       .from(workflow)
@@ -127,15 +149,37 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ id:
       return NextResponse.json({ error: 'Workflow not found' }, { status: 404 })
     }
 
-    if (workflowRecord[0].userId !== session.user.id) {
+    const workflowData = workflowRecord[0]
+    const workspaceId = workflowData.workspaceId
+
+    // Check authorization - either the user owns the workflow or is a member of the workspace
+    let isAuthorized = workflowData.userId === session.user.id
+
+    // If not authorized by ownership and the workflow belongs to a workspace, check workspace membership
+    if (!isAuthorized && workspaceId) {
+      const membership = await db
+        .select()
+        .from(workspaceMember)
+        .where(
+          and(
+            eq(workspaceMember.workspaceId, workspaceId),
+            eq(workspaceMember.userId, session.user.id)
+          )
+        )
+        .limit(1)
+
+      isAuthorized = membership.length > 0
+    }
+
+    if (!isAuthorized) {
       logger.warn(
-        `[${requestId}] User ${session.user.id} attempted to access variables for workflow ${workflowId} owned by ${workflowRecord[0].userId}`
+        `[${requestId}] User ${session.user.id} attempted to access variables for workflow ${workflowId} without permission`
       )
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
     // Return variables if they exist
-    const variables = (workflowRecord[0].variables as Record<string, Variable>) || {}
+    const variables = (workflowData.variables as Record<string, Variable>) || {}
 
     // Add cache headers to prevent frequent reloading
     const headers = new Headers({