fixed google OAuth issues in Tauri wrapper, updated docs with google OAuth config info

Author: code-forge-temple

client/bun.lock

@@ -9,6 +9,7 @@
         "@google-cloud/local-auth": "^3.0.1",
         "@mui/lab": "^7.0.0-beta.13",
         "@mui/material": "^7.1.0",
+        "@tauri-apps/api": "^2.9.0",
         "@xyflow/react": "^12.6.4",
         "ace-builds": "^1.42.0",
         "ajv": "^8.17.1",
@@ -338,6 +339,8 @@
 
     "@svgr/plugin-jsx": ["@svgr/[email protected]", "", { "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", "@svgr/hast-util-to-babel-ast": "8.0.0", "svg-parser": "^2.0.4" }, "peerDependencies": { "@svgr/core": "*" } }, "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA=="],
 
+    "@tauri-apps/api": ["@tauri-apps/[email protected]", "", {}, "sha512-qD5tMjh7utwBk9/5PrTA/aGr3i5QaJ/Mlt7p8NilQ45WgbifUNPyKWsA63iQ8YfQq6R8ajMapU+/Q8nMcPRLNw=="],
+
     "@types/babel__core": ["@types/[email protected]", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
 
     "@types/babel__generator": ["@types/[email protected]", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],

client/package.json

@@ -15,6 +15,7 @@
         "@google-cloud/local-auth": "^3.0.1",
         "@mui/lab": "^7.0.0-beta.13",
         "@mui/material": "^7.1.0",
+        "@tauri-apps/api": "^2.9.0",
         "@xyflow/react": "^12.6.4",
         "ace-builds": "^1.42.0",
         "ajv": "^8.17.1",

client/src/components/nodes/ToolNode/UserConfigFields.tsx

@@ -8,12 +8,18 @@ import {Box, Typography, Button, Chip} from "@mui/material";
 import {PROVIDER_SCOPES, PROVIDERS} from "../../../constants";
 import {FieldsetGroup} from "../../FieldsetGroup";
 import {DebouncedTextField} from "../../DebouncedTextField";
+import {isTauri} from "../../../utils";
 
-declare global {
-    interface Window {
-        google?: any;
+
+const AUTHENTICATION_CANCELED = 'Authentication cancelled';
+
+const showTauriError = (error: unknown) => {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+
+    if (!errorMessage.includes(AUTHENTICATION_CANCELED)) {
+        alert(`OAuth failed: ${errorMessage}`);
     }
-}
+};
 
 type UserConfigSchema = {
     [key: string]: {
@@ -49,25 +55,47 @@ export function UserConfigFields ({userConfigSchema, userConfig, onConfigChange}
                     return;
                 }
 
-                if (!window.google) {
-                    alert('Google Identity Services not loaded. Please refresh the page.');
+                const isTauriEnv = isTauri();
 
-                    return;
-                }
+                if (isTauriEnv) {
+                    try {
+                        const scope = PROVIDER_SCOPES[provider];
+                        const {invoke} = await import('@tauri-apps/api/core');
+                        const result = await invoke<{accessToken: string}>('start_oauth_flow', {
+                            clientId: googleClientId,
+                            scope: scope
+                        });
 
-                const tokenClient = window.google.accounts.oauth2.initTokenClient({
-                    client_id: googleClientId,
-                    scope: PROVIDER_SCOPES[provider],
-                    callback: (response: { access_token: string; }) => {
-                        if (response.access_token) {
-                            onConfigChange('accessToken', response.access_token);
+                        if (result && result.accessToken) {
+                            onConfigChange('accessToken', result.accessToken);
                         } else {
-                            alert('OAuth authentication failed');
+                            alert('OAuth failed: No access token received');
                         }
+                    } catch (error) {
+                        showTauriError(error);
                     }
-                });
+                } else {
+                    // Web environment - use Google's popup
+                    if (!window.google) {
+                        alert('Google Identity Services not loaded. Please refresh the page.');
 
-                tokenClient.requestAccessToken();
+                        return;
+                    }
+
+                    const tokenClient = window.google.accounts.oauth2.initTokenClient({
+                        client_id: googleClientId,
+                        scope: PROVIDER_SCOPES[provider],
+                        callback: (response: { access_token: string; error?: string }) => {
+                            if (response.access_token) {
+                                onConfigChange('accessToken', response.access_token);
+                            } else {
+                                alert(`OAuth authentication failed: ${response.error || 'Unknown error'}`);
+                            }
+                        }
+                    });
+
+                    tokenClient.requestAccessToken();
+                }
             }
         } catch (error) {
             alert(`OAuth failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -97,7 +125,9 @@ export function UserConfigFields ({userConfigSchema, userConfig, onConfigChange}
                                     <Button
                                         variant={isConnected ? "outlined" : "contained"}
                                         color={isConnected ? "success" : "primary"}
-                                        onClick={() => handleOAuthLogin(schema.provider || 'gmail')}
+                                        onClick={() => {
+                                            handleOAuthLogin(schema.provider || 'gmail');
+                                        }}
                                         size="small"
                                     >
                                         {isConnected ? 'Reconnect' : 'Connect'} {schema.provider || 'Account'}

client/src/types/custom.d.ts

@@ -3,4 +3,13 @@ declare module "*.svg" {
     import React from "react";
     const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
     export default content;
-}
+}
+
+declare global {
+    interface Window {
+        google?: any;
+        __TAURI_INTERNALS__?: any;
+    }
+}
+
+export {};

client/src/utils/utils.ts

@@ -84,4 +84,12 @@ export const parseUrl = (initialUrl: string): string => {
     }
 
     return url;
-}
+}
+
+export const isTauri = (): boolean => {
+    return typeof window !== 'undefined' && (
+        window.__TAURI_INTERNALS__ !== undefined ||
+        window.location.protocol === 'tauri:' ||
+        window.location.hostname === 'tauri.localhost'
+    );
+};

docs/docs/getting-started/google-oauth-client.md

@@ -0,0 +1,40 @@
+# Google OAuth2 Client Setup
+
+To use Google services (Gmail, Drive, Calendar) in Agentic Signal, you need to create an OAuth2 client in Google Cloud Console.
+
+## Step-by-Step Guide
+
+1. **Go to [Google Cloud Console](https://console.cloud.google.com/apis/credentials).**
+2. **Create a new project** (or select an existing one).
+3. **Enable APIs** for your project:
+   - Gmail API
+   - Google Drive API
+   - Google Calendar API
+4. **Configure the OAuth consent screen**:
+   - Go to [OAuth consent screen setup](https://console.cloud.google.com/auth/overview/create).
+   - Fill in required fields (app name, support email, etc.).
+   - Add scopes for the APIs you want to use.
+5. **Create OAuth2 Client ID**:
+   - Go to [OAuth2 Client ID creation](https://console.cloud.google.com/auth/clients/create).
+   - Choose **Web application** as the application type.
+   - **Authorized JavaScript origins:**  
+     - `http://localhost:3000`  
+     - `http://localhost:5173`
+   - **Authorized redirect URIs:**  
+     - `http://localhost:3000`  
+     - `http://localhost:5173`  
+     - `http://localhost:8080`  
+     - `http://localhost:8080/callback`
+   - Click **Save** to create the client.
+6. **Copy your Client ID** and use it in Agentic Signal’s configuration (`Google OAuth2 Client ID (from Google Cloud Console)` field).
+
+
+> For more details, see [Google's official documentation](https://developers.google.com/identity/protocols/oauth2).
+
+---
+
+## Troubleshooting
+
+- Make sure the APIs are enabled for your project.
+- The OAuth consent screen must be published (for external users).
+- Redirect URIs must match exactly.

docs/docs/getting-started/windows-app/quick-start.mdx

@@ -17,6 +17,8 @@ If you **do not want to develop or build from source**, you can simply:
    See [Ollama and App Configuration](../configuration) for instructions on:
      - Setting up Ollama CORS for the Windows app
      - Configuring the Ollama Host and Chrome Executable Path in the app settings
+5. *(Optional)* **Set up Google OAuth2 Client for Google integrations:**  
+   If you want to use Gmail, Google Drive, or Google Calendar nodes, follow the [Google OAuth2 Client Setup](../google-oauth-client) guide to create your credentials in Google Cloud Console.  
 
 You are now ready to use `Agentic Signal` with local AI and browser automation!
 

docs/docs/nodes/ai/tools/gcalendar-fetch-events.md

@@ -17,7 +17,7 @@ import TabItem from '@theme/TabItem';
         - `timeMin` ¹ (string, optional): Lower bound (inclusive) for event start time (RFC3339 timestamp).  
         - `timeMax` ¹ (string, optional): Upper bound (exclusive) for event end time (RFC3339 timestamp).  
         - `googleClientId` (string, user config): Google OAuth2 Client ID.  
-        You must [create an OAuth2 client in Google Cloud Console](https://console.cloud.google.com/auth/clients) before using this tool.
+        You must [create an OAuth2 client in Google Cloud Console](../../../getting-started/google-oauth-client) before using this tool.  
         - `accessToken` (OAuth, user config): Google Calendar Authentication.  
         This field will be auto-filled if you use the **CONNECT CALENDAR** button.
         - `maxResults` (integer, user config): Maximum number of events to fetch (default: 10, min: 1, max: 100)

docs/docs/nodes/ai/tools/gdrive-fetch-files.md

@@ -15,7 +15,7 @@ import TabItem from '@theme/TabItem';
     <TabItem value="inputs" label="Inputs" default>
         - `query` ¹ (string): Google Drive search query using Google Drive search operators (e.g., `"name contains \"report\""`).  
         - `googleClientId` (string, user config): Google OAuth2 Client ID.  
-        You must [create an OAuth2 client in Google Cloud Console](https://console.cloud.google.com/auth/clients) before using this tool.
+        You must [create an OAuth2 client in Google Cloud Console](../../../getting-started/google-oauth-client) before using this tool.  
         - `accessToken` (OAuth, user config): Google Drive Authentication.  
         This field will be auto-filled if you use the **CONNECT DRIVE** button.
         - `maxResults` (integer, user config): Maximum number of files to fetch (default: 5, min: 1, max: 50)

docs/docs/nodes/ai/tools/gmail-fetch-emails.md

@@ -15,7 +15,7 @@ import TabItem from '@theme/TabItem';
     <TabItem value="inputs" label="Inputs" default>
         - `query` ¹ (string): Gmail search query using Gmail search operators (e.g., `"in:inbox newer_than:7d"`).  
         - `googleClientId` (string, user config): Google OAuth2 Client ID.  
-        You must [create an OAuth2 client in Google Cloud Console](https://console.cloud.google.com/auth/clients) before using this tool.
+        You must [create an OAuth2 client in Google Cloud Console](../../../getting-started/google-oauth-client) before using this tool.  
         - `accessToken` (OAuth, user config): Gmail Authentication.  
         This field will be auto-filled if you use the **CONNECT GMAIL** button.
         - `maxResults` (integer, user config): Maximum number of emails to fetch (default: 5, min: 1, max: 50)