invite flow

icecrasher321 · icecrasher321 · commit 223d1e852324 · 2026-01-06T11:25:50.000-08:00
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -109,11 +109,15 @@ function SignupFormContent({
       setEmail(emailParam)
     }
 
-    const redirectParam = searchParams.get('redirect')
+    // Check both 'redirect' and 'callbackUrl' params (login page uses callbackUrl)
+    const redirectParam = searchParams.get('redirect') || searchParams.get('callbackUrl')
     if (redirectParam) {
       setRedirectUrl(redirectParam)
 
-      if (redirectParam.startsWith('/invite/')) {
+      if (
+        redirectParam.startsWith('/invite/') ||
+        redirectParam.startsWith('/credential-account/')
+      ) {
         setIsInviteFlow(true)
       }
     }
diff --git a/apps/sim/app/api/credential-sets/invite/[token]/route.ts b/apps/sim/app/api/credential-sets/invite/[token]/route.ts
@@ -24,6 +24,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ toke
       status: credentialSetInvitation.status,
       expiresAt: credentialSetInvitation.expiresAt,
       credentialSetName: credentialSet.name,
+      providerId: credentialSet.providerId,
       organizationId: credentialSet.organizationId,
       organizationName: organization.name,
     })
@@ -54,6 +55,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ toke
     invitation: {
       credentialSetName: invitation.credentialSetName,
       organizationName: invitation.organizationName,
+      providerId: invitation.providerId,
       email: invitation.email,
     },
   })
@@ -68,16 +70,27 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ tok
   }
 
   try {
-    const [invitation] = await db
-      .select()
+    const [invitationData] = await db
+      .select({
+        id: credentialSetInvitation.id,
+        credentialSetId: credentialSetInvitation.credentialSetId,
+        email: credentialSetInvitation.email,
+        status: credentialSetInvitation.status,
+        expiresAt: credentialSetInvitation.expiresAt,
+        invitedBy: credentialSetInvitation.invitedBy,
+        providerId: credentialSet.providerId,
+      })
       .from(credentialSetInvitation)
+      .innerJoin(credentialSet, eq(credentialSetInvitation.credentialSetId, credentialSet.id))
       .where(eq(credentialSetInvitation.token, token))
       .limit(1)
 
-    if (!invitation) {
+    if (!invitationData) {
       return NextResponse.json({ error: 'Invitation not found' }, { status: 404 })
     }
 
+    const invitation = invitationData
+
     if (invitation.status !== 'pending') {
       return NextResponse.json({ error: 'Invitation is no longer valid' }, { status: 410 })
     }
@@ -174,6 +187,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ tok
     return NextResponse.json({
       success: true,
       credentialSetId: invitation.credentialSetId,
+      providerId: invitation.providerId,
     })
   } catch (error) {
     logger.error('Error accepting invitation', error)
diff --git a/apps/sim/app/credential-account/[token]/page.tsx b/apps/sim/app/credential-account/[token]/page.tsx
@@ -1,17 +1,33 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import { AlertCircle, CheckCircle2, Loader2, Shield } from 'lucide-react'
+import { AlertCircle, CheckCircle2, Loader2, Mail } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { Button } from '@/components/emcn'
-import { useSession } from '@/lib/auth/auth-client'
+import { GmailIcon, OutlookIcon } from '@/components/icons'
+import { client, useSession } from '@/lib/auth/auth-client'
 
 interface InvitationInfo {
   credentialSetName: string
   organizationName: string
+  providerId: string | null
   email: string | null
 }
 
+type AcceptedState = 'connecting' | 'already-connected'
+
+/**
+ * Maps credential set provider IDs to OAuth provider IDs
+ * The credential set stores 'gmail' but the OAuth provider is 'google-email'
+ */
+function getOAuthProviderId(credentialSetProviderId: string): string {
+  if (credentialSetProviderId === 'gmail') {
+    return 'google-email'
+  }
+  // outlook is the same in both
+  return credentialSetProviderId
+}
+
 export default function CredentialAccountInvitePage() {
   const params = useParams()
   const router = useRouter()
@@ -23,7 +39,7 @@ export default function CredentialAccountInvitePage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [accepting, setAccepting] = useState(false)
-  const [accepted, setAccepted] = useState(false)
+  const [acceptedState, setAcceptedState] = useState<AcceptedState | null>(null)
 
   useEffect(() => {
     async function fetchInvitation() {
@@ -48,7 +64,9 @@ export default function CredentialAccountInvitePage() {
 
   const handleAccept = useCallback(async () => {
     if (!session?.user?.id) {
-      router.push(`/login?callbackUrl=${encodeURIComponent(`/credential-account/${token}`)}`)
+      // Include invite_flow=true so the login page preserves callbackUrl when linking to signup
+      const callbackUrl = encodeURIComponent(`/credential-account/${token}`)
+      router.push(`/login?invite_flow=true&callbackUrl=${callbackUrl}`)
       return
     }
 
@@ -64,13 +82,63 @@ export default function CredentialAccountInvitePage() {
         return
       }
 
-      setAccepted(true)
+      const data = await res.json()
+      const credentialSetProviderId = data.providerId || invitation?.providerId
+
+      // Check if user already has this provider connected
+      let isAlreadyConnected = false
+      if (credentialSetProviderId) {
+        const oauthProviderId = getOAuthProviderId(credentialSetProviderId)
+        try {
+          const connectionsRes = await fetch('/api/auth/oauth/connections')
+          if (connectionsRes.ok) {
+            const connectionsData = await connectionsRes.json()
+            const connections = connectionsData.connections || []
+            isAlreadyConnected = connections.some(
+              (conn: { provider: string; accounts?: { id: string }[] }) =>
+                conn.provider === oauthProviderId && conn.accounts && conn.accounts.length > 0
+            )
+          }
+        } catch {
+          // If we can't check connections, proceed with OAuth flow
+        }
+      }
+
+      if (isAlreadyConnected) {
+        // Already connected - redirect to workspace
+        setAcceptedState('already-connected')
+        setTimeout(() => {
+          router.push('/workspace')
+        }, 2000)
+      } else if (credentialSetProviderId === 'gmail' || credentialSetProviderId === 'outlook') {
+        // Not connected - start OAuth flow
+        setAcceptedState('connecting')
+
+        // Small delay to show success message before redirect
+        setTimeout(async () => {
+          try {
+            const oauthProviderId = getOAuthProviderId(credentialSetProviderId)
+            await client.oauth2.link({
+              providerId: oauthProviderId,
+              callbackURL: `${window.location.origin}/workspace`,
+            })
+          } catch (oauthError) {
+            // OAuth redirect will happen, this catch is for any pre-redirect errors
+            console.error('OAuth initiation error:', oauthError)
+            // If OAuth fails, redirect to workspace where they can connect manually
+            router.push('/workspace')
+          }
+        }, 1500)
+      } else {
+        // No provider specified - just redirect to workspace
+        router.push('/workspace')
+      }
     } catch {
       setError('Failed to accept invitation')
     } finally {
       setAccepting(false)
     }
-  }, [session?.user?.id, token, router])
+  }, [session?.user?.id, token, router, invitation?.providerId])
 
   if (loading || sessionLoading) {
     return (
@@ -94,19 +162,49 @@ export default function CredentialAccountInvitePage() {
     )
   }
 
-  if (accepted) {
+  const ProviderIcon =
+    invitation?.providerId === 'outlook'
+      ? OutlookIcon
+      : invitation?.providerId === 'gmail'
+        ? GmailIcon
+        : Mail
+  const providerName =
+    invitation?.providerId === 'outlook'
+      ? 'Outlook'
+      : invitation?.providerId === 'gmail'
+        ? 'Gmail'
+        : 'email'
+
+  if (acceptedState === 'already-connected') {
     return (
       <div className='flex min-h-screen items-center justify-center bg-[var(--bg)]'>
         <div className='flex max-w-[400px] flex-col items-center gap-[24px] p-[32px]'>
           <CheckCircle2 className='h-[48px] w-[48px] text-green-500' />
-          <p className='font-medium text-[20px] text-[var(--text-primary)]'>Welcome!</p>
+          <p className='font-medium text-[20px] text-[var(--text-primary)]'>You're all set!</p>
+          <p className='text-center text-[13px] text-[var(--text-secondary)]'>
+            You've joined {invitation?.credentialSetName}. Your {providerName} account is already
+            connected.
+          </p>
+          <p className='text-[12px] text-[var(--text-tertiary)]'>Redirecting to workspace...</p>
+          <Loader2 className='h-[24px] w-[24px] animate-spin text-[var(--text-muted)]' />
+        </div>
+      </div>
+    )
+  }
+
+  if (acceptedState === 'connecting') {
+    return (
+      <div className='flex min-h-screen items-center justify-center bg-[var(--bg)]'>
+        <div className='flex max-w-[400px] flex-col items-center gap-[24px] p-[32px]'>
+          <ProviderIcon className='h-[48px] w-[48px]' />
+          <p className='font-medium text-[20px] text-[var(--text-primary)]'>
+            Connecting to {providerName}...
+          </p>
           <p className='text-center text-[13px] text-[var(--text-secondary)]'>
-            You've successfully joined {invitation?.credentialSetName}. Connect your OAuth
-            credentials in Settings → Integrations.
+            You've joined {invitation?.credentialSetName}. You'll be redirected to connect your{' '}
+            {providerName} account.
           </p>
-          <Button variant='tertiary' onClick={() => router.push('/workspace')}>
-            Go to Dashboard
-          </Button>
+          <Loader2 className='h-[24px] w-[24px] animate-spin text-[var(--text-muted)]' />
         </div>
       </div>
     )
@@ -116,15 +214,22 @@ export default function CredentialAccountInvitePage() {
     <div className='flex min-h-screen items-center justify-center bg-[var(--bg)]'>
       <div className='w-full max-w-[400px] p-[32px]'>
         <div className='flex flex-col items-center gap-[8px]'>
-          <Shield className='h-[48px] w-[48px] text-[var(--brand-400)]' />
-          <p className='font-medium text-[20px] text-[var(--text-primary)]'>Join Credential Set</p>
+          <ProviderIcon className='h-[48px] w-[48px]' />
+          <p className='font-medium text-[20px] text-[var(--text-primary)]'>
+            Join Email Polling Group
+          </p>
           <p className='text-center text-[13px] text-[var(--text-secondary)]'>
             You've been invited to join{' '}
             <span className='font-medium text-[var(--text-primary)]'>
               {invitation?.credentialSetName}
             </span>{' '}
             by {invitation?.organizationName}
           </p>
+          {invitation?.providerId && (
+            <p className='mt-[8px] text-center text-[12px] text-[var(--text-tertiary)]'>
+              You'll be asked to connect your {providerName} account after accepting.
+            </p>
+          )}
         </div>
 
         <div className='mt-[32px] flex flex-col gap-[16px]'>
@@ -141,7 +246,10 @@ export default function CredentialAccountInvitePage() {
                     Joining...
                   </>
                 ) : (
-                  'Accept Invitation'
+                  <>
+                    <ProviderIcon className='mr-[8px] h-[16px] w-[16px]' />
+                    Accept & Connect {providerName}
+                  </>
                 )}
               </Button>
             </>
@@ -158,8 +266,8 @@ export default function CredentialAccountInvitePage() {
         </div>
 
         <p className='mt-[24px] text-center text-[11px] text-[var(--text-muted)]'>
-          By joining, you agree to share your OAuth credentials with this credential set for use in
-          automated workflows.
+          By joining, you agree to share your {providerName} credentials with this polling group for
+          use in automated email workflows.
         </p>
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credential-sets/credential-sets.tsx
@@ -80,6 +80,7 @@ export function CredentialSets() {
   const [newSetName, setNewSetName] = useState('')
   const [newSetDescription, setNewSetDescription] = useState('')
   const [newSetProvider, setNewSetProvider] = useState<'gmail' | 'outlook'>('gmail')
+  const [createError, setCreateError] = useState<string | null>(null)
   const [inviteEmails, setInviteEmails] = useState('')
   const [isDragging, setIsDragging] = useState(false)
   const [leavingMembership, setLeavingMembership] = useState<{
@@ -204,6 +205,7 @@ export function CredentialSets() {
 
   const handleCreateCredentialSet = useCallback(async () => {
     if (!newSetName.trim() || !activeOrganization?.id) return
+    setCreateError(null)
     try {
       await createCredentialSet.mutateAsync({
         organizationId: activeOrganization.id,
@@ -218,6 +220,11 @@ export function CredentialSets() {
       setNewSetProvider('gmail')
     } catch (error) {
       logger.error('Failed to create polling group', error)
+      if (error instanceof Error) {
+        setCreateError(error.message)
+      } else {
+        setCreateError('Failed to create polling group')
+      }
     }
   }, [newSetName, newSetDescription, newSetProvider, activeOrganization?.id, createCredentialSet])
 
@@ -247,6 +254,14 @@ export function CredentialSets() {
     }
   }, [selectedSetId, inviteEmails, createInvitation])
 
+  const handleCloseCreateModal = useCallback(() => {
+    setShowCreateModal(false)
+    setNewSetName('')
+    setNewSetDescription('')
+    setNewSetProvider('gmail')
+    setCreateError(null)
+  }, [])
+
   const handleCloseInviteModal = useCallback(() => {
     setShowInviteModal(false)
     setInviteEmails('')
@@ -573,7 +588,7 @@ export function CredentialSets() {
         </div>
       )}
 
-      <Modal open={showCreateModal} onOpenChange={setShowCreateModal}>
+      <Modal open={showCreateModal} onOpenChange={handleCloseCreateModal}>
         <ModalContent size='sm'>
           <ModalHeader>Create Polling Group</ModalHeader>
           <ModalBody>
@@ -582,7 +597,10 @@ export function CredentialSets() {
                 <Label>Name</Label>
                 <Input
                   value={newSetName}
-                  onChange={(e) => setNewSetName(e.target.value)}
+                  onChange={(e) => {
+                    setNewSetName(e.target.value)
+                    if (createError) setCreateError(null)
+                  }}
                   placeholder='e.g., Marketing Team'
                 />
               </div>
@@ -619,10 +637,11 @@ export function CredentialSets() {
                   account for email polling
                 </p>
               </div>
+              {createError && <p className='text-[12px] text-[var(--text-error)]'>{createError}</p>}
             </div>
           </ModalBody>
           <ModalFooter>
-            <Button variant='default' onClick={() => setShowCreateModal(false)}>
+            <Button variant='default' onClick={handleCloseCreateModal}>
               Cancel
             </Button>
             <Button

Original file line number	Diff line number	Diff line change
`@@ -109,11 +109,15 @@ function SignupFormContent({`
`109`	`109`	`setEmail(emailParam)`
`110`	`110`	`}`
`111`	`111`
`112`		`- const redirectParam = searchParams.get('redirect')`
	`112`	`+ // Check both 'redirect' and 'callbackUrl' params (login page uses callbackUrl)`
	`113`	`+ const redirectParam = searchParams.get('redirect') \|\| searchParams.get('callbackUrl')`
`113`	`114`	`if (redirectParam) {`
`114`	`115`	`setRedirectUrl(redirectParam)`
`115`	`116`
`116`		`- if (redirectParam.startsWith('/invite/')) {`
	`117`	`+ if (`
	`118`	`+ redirectParam.startsWith('/invite/') \|\|`
	`119`	`+ redirectParam.startsWith('/credential-account/')`
	`120`	`+ ) {`
`117`	`121`	`setIsInviteFlow(true)`
`118`	`122`	`}`
`119`	`123`	`}`