fix adding client ID and secret fields to supprot ouath

Author: priyanshu.solanki

apps/docs/components/icons.tsx

@@ -2452,6 +2452,56 @@ export const GeminiIcon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 )
 
+export const VertexIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    id='standard_product_icon'
+    xmlns='http://www.w3.org/2000/svg'
+    version='1.1'
+    viewBox='0 0 512 512'
+  >
+    <g id='bounding_box'>
+      <rect width='512' height='512' fill='none' />
+    </g>
+    <g id='art'>
+      <path
+        d='M128,244.99c-8.84,0-16-7.16-16-16v-95.97c0-8.84,7.16-16,16-16s16,7.16,16,16v95.97c0,8.84-7.16,16-16,16Z'
+        fill='#ea4335'
+      />
+      <path
+        d='M256,458c-2.98,0-5.97-.83-8.59-2.5l-186-122c-7.46-4.74-9.65-14.63-4.91-22.09,4.75-7.46,14.64-9.65,22.09-4.91l177.41,116.53,177.41-116.53c7.45-4.74,17.34-2.55,22.09,4.91,4.74,7.46,2.55,17.34-4.91,22.09l-186,122c-2.62,1.67-5.61,2.5-8.59,2.5Z'
+        fill='#fbbc04'
+      />
+      <path
+        d='M256,388.03c-8.84,0-16-7.16-16-16v-73.06c0-8.84,7.16-16,16-16s16,7.16,16,16v73.06c0,8.84-7.16,16-16,16Z'
+        fill='#34a853'
+      />
+      <circle cx='128' cy='70' r='16' fill='#ea4335' />
+      <circle cx='128' cy='292' r='16' fill='#ea4335' />
+      <path
+        d='M384.23,308.01c-8.82,0-15.98-7.14-16-15.97l-.23-94.01c-.02-8.84,7.13-16.02,15.97-16.03h.04c8.82,0,15.98,7.14,16,15.97l.23,94.01c.02,8.84-7.13,16.02-15.97,16.03h-.04Z'
+        fill='#4285f4'
+      />
+      <circle cx='384' cy='70' r='16' fill='#4285f4' />
+      <circle cx='384' cy='134' r='16' fill='#4285f4' />
+      <path
+        d='M320,220.36c-8.84,0-16-7.16-16-16v-103.02c0-8.84,7.16-16,16-16s16,7.16,16,16v103.02c0,8.84-7.16,16-16,16Z'
+        fill='#fbbc04'
+      />
+      <circle cx='256' cy='171' r='16' fill='#34a853' />
+      <circle cx='256' cy='235' r='16' fill='#34a853' />
+      <circle cx='320' cy='265' r='16' fill='#fbbc04' />
+      <circle cx='320' cy='329' r='16' fill='#fbbc04' />
+      <path
+        d='M192,217.36c-8.84,0-16-7.16-16-16v-100.02c0-8.84,7.16-16,16-16s16,7.16,16,16v100.02c0,8.84-7.16,16-16,16Z'
+        fill='#fbbc04'
+      />
+      <circle cx='192' cy='265' r='16' fill='#fbbc04' />
+      <circle cx='192' cy='329' r='16' fill='#fbbc04' />
+    </g>
+  </svg>
+)
+
 export const CerebrasIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}

apps/docs/content/docs/en/tools/translate.mdx

@@ -50,6 +50,8 @@ Send a chat completion request to any supported LLM provider
 | `maxTokens` | number | No | Maximum tokens in the response |
 | `azureEndpoint` | string | No | Azure OpenAI endpoint URL |
 | `azureApiVersion` | string | No | Azure OpenAI API version |
+| `vertexProject` | string | No | Google Cloud project ID for Vertex AI |
+| `vertexLocation` | string | No | Google Cloud location for Vertex AI \(defaults to us-central1\) |
 
 #### Output
 

apps/sim/app/api/auth/oauth2/callback/servicenow/route.ts

@@ -1,6 +1,5 @@
 import { type NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
-import { env } from '@/lib/core/config/env'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createLogger } from '@/lib/logs/console/logger'
 
@@ -34,11 +33,12 @@ export async function GET(request: NextRequest) {
     const storedState = request.cookies.get('servicenow_oauth_state')?.value
     const storedInstanceUrl = request.cookies.get('servicenow_instance_url')?.value
 
-    const clientId = env.SERVICENOW_CLIENT_ID
-    const clientSecret = env.SERVICENOW_CLIENT_SECRET
+    // Retrieve client credentials from cookies (set during authorize)
+    const clientId = request.cookies.get('servicenow_client_id')?.value
+    const clientSecret = request.cookies.get('servicenow_client_secret')?.value
 
     if (!clientId || !clientSecret) {
-      logger.error('ServiceNow credentials not configured')
+      logger.error('ServiceNow client credentials not found in cookies')
       return NextResponse.redirect(`${baseUrl}/workspace?error=servicenow_config_error`)
     }
 
@@ -154,9 +154,11 @@ export async function GET(request: NextRequest) {
       })
     }
 
-    // Clean up OAuth state cookies
+    // Clean up OAuth state and credentials cookies
     response.cookies.delete('servicenow_oauth_state')
     response.cookies.delete('servicenow_instance_url')
+    response.cookies.delete('servicenow_client_id')
+    response.cookies.delete('servicenow_client_secret')
 
     return response
   } catch (error) {

apps/sim/app/api/auth/servicenow/authorize/route.ts

@@ -1,6 +1,5 @@
 import { type NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
-import { env } from '@/lib/core/config/env'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createLogger } from '@/lib/logs/console/logger'
 
@@ -38,17 +37,13 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
-    const clientId = env.SERVICENOW_CLIENT_ID
-
-    if (!clientId) {
-      logger.error('SERVICENOW_CLIENT_ID not configured')
-      return NextResponse.json({ error: 'ServiceNow client ID not configured' }, { status: 500 })
-    }
-
     const instanceUrl = request.nextUrl.searchParams.get('instanceUrl')
+    const clientId = request.nextUrl.searchParams.get('clientId')
+    const clientSecret = request.nextUrl.searchParams.get('clientSecret')
     const returnUrl = request.nextUrl.searchParams.get('returnUrl')
 
-    if (!instanceUrl) {
+    // If any required parameter is missing, show the form
+    if (!instanceUrl || !clientId || !clientSecret) {
       const returnUrlParam = returnUrl ? encodeURIComponent(returnUrl) : ''
       return new NextResponse(
         `<!DOCTYPE html>
@@ -63,9 +58,11 @@ export async function GET(request: NextRequest) {
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 100vh;
+        min-height: 100vh;
         margin: 0;
         background: linear-gradient(135deg, #81B5A1 0%, #5A8A75 100%);
+        padding: 20px;
+        box-sizing: border-box;
       }
       .container {
         background: white;
@@ -74,7 +71,7 @@ export async function GET(request: NextRequest) {
         box-shadow: 0 10px 40px rgba(0,0,0,0.1);
         text-align: center;
         max-width: 450px;
-        width: 90%;
+        width: 100%;
       }
       h2 {
         color: #111827;
@@ -84,13 +81,23 @@ export async function GET(request: NextRequest) {
         color: #6b7280;
         margin: 0 0 1.5rem 0;
       }
+      .form-group {
+        text-align: left;
+        margin-bottom: 1rem;
+      }
+      label {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #374151;
+        margin-bottom: 0.25rem;
+      }
       input {
         width: 100%;
         padding: 0.75rem;
         border: 1px solid #d1d5db;
         border-radius: 8px;
         font-size: 1rem;
-        margin-bottom: 1rem;
         box-sizing: border-box;
       }
       input:focus {
@@ -108,14 +115,15 @@ export async function GET(request: NextRequest) {
         font-size: 1rem;
         cursor: pointer;
         font-weight: 500;
+        margin-top: 0.5rem;
       }
       button:hover {
         background: #6A9A87;
       }
       .help {
-        font-size: 0.875rem;
+        font-size: 0.75rem;
         color: #9ca3af;
-        margin-top: 1rem;
+        margin-top: 0.25rem;
       }
       .error {
         color: #dc2626;
@@ -128,18 +136,41 @@ export async function GET(request: NextRequest) {
   <body>
     <div class="container">
       <h2>Connect Your ServiceNow Instance</h2>
-      <p>Enter your ServiceNow instance URL to continue</p>
+      <p>Enter your ServiceNow credentials to continue</p>
       <div id="error" class="error"></div>
       <form onsubmit="handleSubmit(event)">
-        <input
-          type="text"
-          id="instanceUrl"
-          placeholder="https://mycompany.service-now.com"
-          required
-        />
+        <div class="form-group">
+          <label for="instanceUrl">Instance URL</label>
+          <input
+            type="text"
+            id="instanceUrl"
+            placeholder="https://mycompany.service-now.com"
+            required
+          />
+          <p class="help">Your ServiceNow instance URL (e.g., https://yourcompany.service-now.com)</p>
+        </div>
+        <div class="form-group">
+          <label for="clientId">Client ID</label>
+          <input
+            type="text"
+            id="clientId"
+            placeholder="Enter your OAuth Client ID"
+            required
+          />
+          <p class="help">OAuth Client ID from your ServiceNow Application Registry</p>
+        </div>
+        <div class="form-group">
+          <label for="clientSecret">Client Secret</label>
+          <input
+            type="password"
+            id="clientSecret"
+            placeholder="Enter your OAuth Client Secret"
+            required
+          />
+          <p class="help">OAuth Client Secret from your ServiceNow Application Registry</p>
+        </div>
         <button type="submit">Connect Instance</button>
       </form>
-      <p class="help">Your instance URL looks like: https://yourcompany.service-now.com</p>
     </div>
 
     <script>
@@ -148,6 +179,8 @@ export async function GET(request: NextRequest) {
         e.preventDefault();
         const errorEl = document.getElementById('error');
         let instanceUrl = document.getElementById('instanceUrl').value.trim();
+        const clientId = document.getElementById('clientId').value.trim();
+        const clientSecret = document.getElementById('clientSecret').value.trim();
 
         // Ensure https:// prefix
         if (!instanceUrl.startsWith('https://') && !instanceUrl.startsWith('http://')) {
@@ -170,7 +203,21 @@ export async function GET(request: NextRequest) {
           return;
         }
 
+        if (!clientId) {
+          errorEl.textContent = 'Please enter your Client ID';
+          errorEl.style.display = 'block';
+          return;
+        }
+
+        if (!clientSecret) {
+          errorEl.textContent = 'Please enter your Client Secret';
+          errorEl.style.display = 'block';
+          return;
+        }
+
         let url = window.location.pathname + '?instanceUrl=' + encodeURIComponent(instanceUrl);
+        url += '&clientId=' + encodeURIComponent(clientId);
+        url += '&clientSecret=' + encodeURIComponent(clientSecret);
         if (returnUrl) {
           url += '&returnUrl=' + returnUrl;
         }
@@ -229,7 +276,7 @@ export async function GET(request: NextRequest) {
 
     const response = NextResponse.redirect(oauthUrl)
 
-    // Store state and instance URL in cookies for validation in callback
+    // Store state, instance URL, and credentials in cookies for validation in callback
     response.cookies.set('servicenow_oauth_state', state, {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
@@ -246,6 +293,23 @@ export async function GET(request: NextRequest) {
       path: '/',
     })
 
+    // Store client credentials in cookies for the callback to use
+    response.cookies.set('servicenow_client_id', clientId, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      maxAge: 60 * 10,
+      path: '/',
+    })
+
+    response.cookies.set('servicenow_client_secret', clientSecret, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      maxAge: 60 * 10,
+      path: '/',
+    })
+
     if (returnUrl) {
       response.cookies.set('servicenow_return_url', returnUrl, {
         httpOnly: true,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx

@@ -22,6 +22,11 @@ export interface OAuthRequiredModalProps {
   requiredScopes?: string[]
   serviceId?: string
   newScopes?: string[]
+  servicenowCredentials?: {
+    instanceUrl: string
+    clientId: string
+    clientSecret: string
+  }
 }
 
 const SCOPE_DESCRIPTIONS: Record<string, string> = {
@@ -297,6 +302,7 @@ export function OAuthRequiredModal({
   requiredScopes = [],
   serviceId,
   newScopes = [],
+  servicenowCredentials,
 }: OAuthRequiredModalProps) {
   const effectiveServiceId = serviceId || getServiceIdFromScopes(provider, requiredScopes)
   const { baseProvider } = parseProvider(provider)
@@ -348,9 +354,24 @@ export function OAuthRequiredModal({
       }
 
       if (providerId === 'servicenow') {
-        // Pass the current URL so we can redirect back after OAuth
+        // ServiceNow requires credentials from the block
+        if (
+          !servicenowCredentials?.instanceUrl ||
+          !servicenowCredentials?.clientId ||
+          !servicenowCredentials?.clientSecret
+        ) {
+          // If credentials are missing, redirect to authorize which will show a form
+          const returnUrl = encodeURIComponent(window.location.href)
+          window.location.href = `/api/auth/servicenow/authorize?returnUrl=${returnUrl}`
+          return
+        }
+
+        // Pass the current URL and credentials so we can redirect back after OAuth
         const returnUrl = encodeURIComponent(window.location.href)
-        window.location.href = `/api/auth/servicenow/authorize?returnUrl=${returnUrl}`
+        const instanceUrl = encodeURIComponent(servicenowCredentials.instanceUrl)
+        const clientId = encodeURIComponent(servicenowCredentials.clientId)
+        const clientSecret = encodeURIComponent(servicenowCredentials.clientSecret)
+        window.location.href = `/api/auth/servicenow/authorize?returnUrl=${returnUrl}&instanceUrl=${instanceUrl}&clientId=${clientId}&clientSecret=${clientSecret}`
         return
       }