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

Author: emir-karabeg

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 { 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'
+
   // Forgot password states
   const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
   const [forgotPasswordEmail, setForgotPasswordEmail] = useState('')
@@ -62,11 +67,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,14 +220,18 @@ 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"
+                callbackURL={callbackUrl}
                 isProduction={isProduction}
               />
               <div className="relative">
@@ -289,7 +299,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={`/signup${searchParams ? `?${searchParams.toString()}` : ''}`}
+                className="text-primary hover:underline"
+              >
                 Sign up
               </Link>
             </p>

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/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/workspaces/invitations/accept/route.ts

@@ -17,8 +17,9 @@ export async function GET(req: NextRequest) {
   const session = await getSession()
 
   if (!session?.user?.id) {
-    // Store the token in a query param and redirect to login page
-    return NextResponse.redirect(new URL(`/auth/signin?callbackUrl=${encodeURIComponent(`/api/workspaces/invitations/accept?token=${token}`)}`, process.env.NEXT_PUBLIC_APP_URL || 'https://simstudio.ai'))
+    // No need to encode API URL as callback, just redirect to invite page
+    // The middleware will handle proper login flow and return to invite page
+    return NextResponse.redirect(new URL(`/invite/${token}?token=${token}`, process.env.NEXT_PUBLIC_APP_URL || 'https://simstudio.ai'))
   }
 
   try {
@@ -43,9 +44,25 @@ export async function GET(req: NextRequest) {
       return NextResponse.redirect(new URL('/invite/invite-error?reason=already-processed', process.env.NEXT_PUBLIC_APP_URL || 'https://simstudio.ai'))
     }
 
+    // Get the user's email from the session
+    const userEmail = session.user.email.toLowerCase()
+    const invitationEmail = invitation.email.toLowerCase()
+    
     // Check if invitation email matches the logged-in user
-    if (invitation.email.toLowerCase() !== session.user.email.toLowerCase()) {
-      return NextResponse.redirect(new URL('/invite/invite-error?reason=email-mismatch', process.env.NEXT_PUBLIC_APP_URL || 'https://simstudio.ai'))
+    // For new users who just signed up, we'll be more flexible by comparing domain parts
+    const isExactMatch = userEmail === invitationEmail
+    const isPartialMatch = userEmail.split('@')[1] === invitationEmail.split('@')[1] && 
+                           userEmail.split('@')[0].includes(invitationEmail.split('@')[0].substring(0, 3))
+    
+    if (!isExactMatch && !isPartialMatch) {
+      // Get user info to include in the error message
+      const userData = await db
+        .select()
+        .from(user)
+        .where(eq(user.id, session.user.id))
+        .then(rows => rows[0])
+        
+      return NextResponse.redirect(new URL(`/invite/invite-error?reason=email-mismatch&details=${encodeURIComponent(`Invitation was sent to ${invitation.email}, but you're logged in as ${userData?.email || session.user.email}`)}`, process.env.NEXT_PUBLIC_APP_URL || 'https://simstudio.ai'))
     }
 
     // Get the workspace details

apps/sim/app/api/workspaces/invitations/details/route.ts

@@ -0,0 +1,58 @@
+import { and, eq } from 'drizzle-orm'
+import { NextRequest, NextResponse } from 'next/server'
+import { getSession } from '@/lib/auth'
+import { db } from '@/db'
+import { workspace, workspaceInvitation } from '@/db/schema'
+
+// GET /api/workspaces/invitations/details - Get invitation details by token
+export async function GET(req: NextRequest) {
+  const token = req.nextUrl.searchParams.get('token')
+  
+  if (!token) {
+    return NextResponse.json({ error: 'Token is required' }, { status: 400 })
+  }
+  
+  const session = await getSession()
+  
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+  
+  try {
+    // Find the invitation by token
+    const invitation = await db
+      .select()
+      .from(workspaceInvitation)
+      .where(eq(workspaceInvitation.token, token))
+      .then(rows => rows[0])
+    
+    if (!invitation) {
+      return NextResponse.json({ error: 'Invitation not found or has expired' }, { status: 404 })
+    }
+    
+    // Check if invitation has expired
+    if (new Date() > new Date(invitation.expiresAt)) {
+      return NextResponse.json({ error: 'Invitation has expired' }, { status: 400 })
+    }
+    
+    // Get workspace details
+    const workspaceDetails = await db
+      .select()
+      .from(workspace)
+      .where(eq(workspace.id, invitation.workspaceId))
+      .then(rows => rows[0])
+    
+    if (!workspaceDetails) {
+      return NextResponse.json({ error: 'Workspace not found' }, { status: 404 })
+    }
+    
+    // Return the invitation with workspace name
+    return NextResponse.json({
+      ...invitation,
+      workspaceName: workspaceDetails.name
+    })
+  } catch (error) {
+    console.error('Error fetching workspace invitation:', error)
+    return NextResponse.json({ error: 'Failed to fetch invitation details' }, { status: 500 })
+  }
+} 

apps/sim/app/api/workspaces/invitations/route.ts

@@ -198,7 +198,8 @@ async function sendInvitationEmail({
 }) {
   try {
     const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://simstudio.ai'
-    const invitationLink = `${baseUrl}/api/workspaces/invitations/accept?token=${token}`
+    // Always use the client-side invite route with token parameter
+    const invitationLink = `${baseUrl}/invite/${token}?token=${token}`
 
     const emailHtml = await render(
       WorkspaceInvitationEmail({
@@ -211,7 +212,7 @@ async function sendInvitationEmail({
     await resend.emails.send({
       from: process.env.RESEND_FROM_EMAIL || '[email protected]',
       to,
-      subject: `You've been invited to join "${workspaceName}" on SimStudio`,
+      subject: `You've been invited to join "${workspaceName}" on Sim Studio`,
       html: emailHtml,
     })