airtable Oauth

.gitignore

@@ -16,3 +16,5 @@
 /build
 
 package-lock.json
+
+docker-compose.yml

package.json

@@ -16,16 +16,19 @@
     "@types/bcrypt": "^5.0.2",
     "@types/body-parser": "^1.19.5",
     "@types/csurf": "^1.11.5",
+    "@types/express-session": "^1.18.1",
     "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "22.7.9",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.1",
     "@types/uuid": "^8.3.4",
+    "airtable": "^0.12.2",
     "axios": "^0.26.0",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.3",
     "buffer": "^6.0.3",
     "bullmq": "^5.12.15",
+    "connect-redis": "^8.0.1",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "cron-parser": "^4.9.0",
@@ -33,6 +36,7 @@
     "csurf": "^1.11.0",
     "dotenv": "^16.0.0",
     "express": "^4.17.2",
+    "express-session": "^1.18.1",
     "fortawesome": "^0.0.1-security",
     "google-auth-library": "^9.14.1",
     "googleapis": "^144.0.0",
@@ -52,6 +56,7 @@
     "moment-timezone": "^0.5.45",
     "node-cron": "^3.0.3",
     "pg": "^8.13.0",
+    "pkce-challenge": "^4.1.0",
     "playwright": "^1.48.2",
     "playwright-extra": "^4.3.6",
     "posthog-node": "^4.2.1",
@@ -65,6 +70,7 @@
     "react-router-dom": "^6.26.1",
     "react-simple-code-editor": "^0.11.2",
     "react-transition-group": "^4.4.2",
+    "redis": "^4.7.0",
     "sequelize": "^6.37.3",
     "sequelize-typescript": "^2.1.6",
     "sharp": "^0.33.5",
@@ -106,6 +112,7 @@
     "@types/prismjs": "^1.26.0",
     "@types/react-highlight": "^0.12.5",
     "@types/react-transition-group": "^4.4.4",
+    "@types/redis": "^4.0.11",
     "@types/styled-components": "^5.1.23",
     "@types/swagger-jsdoc": "^6.0.4",
     "@types/swagger-ui-express": "^4.1.6",
@@ -115,6 +122,7 @@
     "cross-env": "^7.0.3",
     "js-cookie": "^3.0.5",
     "nodemon": "^2.0.15",
+    "sequelize-cli": "^6.6.2",
     "ts-node": "^10.4.0",
     "vite": "^5.4.10"
   }

server/config/config.json

@@ -0,0 +1,26 @@
+{
+    "development": {
+      "username": "postgres",
+      "password": "postgres",
+      "database": "maxun",
+      "host": "localhost",
+      "port": 5432,
+      "dialect": "postgres"
+    },
+    "test": {
+      "username": "postgres",
+      "password": "postgres",
+      "database": "maxun_test",
+      "host": "localhost",
+      "port": 5432,
+      "dialect": "postgres"
+    },
+    "production": {
+      "username": "postgres",
+      "password": "postgres",
+      "database": "maxun_prod",
+      "host": "localhost",
+      "port": 5432,
+      "dialect": "postgres"
+    }
+  }

server/migrations/20250125120216-add-airtable-columns-to-robot.js

@@ -0,0 +1,16 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+   
+    await queryInterface.addColumn('robot', 'airtable_refresh_token', {
+      type: Sequelize.STRING,
+      allowNull: true,
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+   
+    await queryInterface.removeColumn('robot', 'airtable_refresh_token');
+  },
+};

server/migrations/20250125182726-update-airtable-token-length.js

@@ -0,0 +1,22 @@
+// migrations/XXXXXXXXXXXXXX-update-airtable-token-length.js
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.changeColumn('robot', 'airtable_access_token', {
+      type: Sequelize.TEXT
+    });
+    
+    await queryInterface.changeColumn('robot', 'airtable_refresh_token', {
+      type: Sequelize.TEXT
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.changeColumn('robot', 'airtable_access_token', {
+      type: Sequelize.STRING(255)
+    });
+    
+    await queryInterface.changeColumn('robot', 'airtable_refresh_token', {
+      type: Sequelize.STRING(255)
+    });
+  }
+};

server/src/models/Robot.ts

@@ -25,6 +25,10 @@ interface RobotAttributes {
   google_sheet_id?: string | null;
   google_access_token?: string | null;
   google_refresh_token?: string | null;
+  airtable_base_id?: string | null; // New field for Airtable base ID
+  airtable_table_name?: string | null; // New field for Airtable table name
+  airtable_access_token?: string | null; // New field for Airtable access token
+  airtable_refresh_token?: string | null; // New field for Airtable refresh token
   schedule?: ScheduleConfig | null;
 }
 
@@ -49,10 +53,14 @@ class Robot extends Model<RobotAttributes, RobotCreationAttributes> implements R
   public recording_meta!: RobotMeta;
   public recording!: RobotWorkflow;
   public google_sheet_email!: string | null;
-  public google_sheet_name?: string | null;
+  public google_sheet_name!: string | null;
-  public google_sheet_id?: string | null;
+  public google_sheet_id!: string | null;
   public google_access_token!: string | null;
   public google_refresh_token!: string | null;
+  public airtable_base_id!: string | null; // New field for Airtable base ID
+  public airtable_table_name!: string | null; // New field for Airtable table name
+  public airtable_access_token!: string | null; // New field for Airtable access token
+  public airtable_refresh_token!: string | null; // New field for Airtable refresh token
   public schedule!: ScheduleConfig | null;
 }
 
@@ -95,6 +103,22 @@ Robot.init(
       type: DataTypes.STRING,
       allowNull: true,
     },
+    airtable_base_id: {
+      type: DataTypes.STRING,
+      allowNull: true,
+    },
+    airtable_table_name: {
+      type: DataTypes.STRING,
+      allowNull: true,
+    },
+    airtable_access_token: {
+      type: DataTypes.TEXT,
+      allowNull: true,
+    },
+    airtable_refresh_token: {
+      type: DataTypes.TEXT,
+      allowNull: true,
+    },
     schedule: {
       type: DataTypes.JSONB,
       allowNull: true,

server/src/routes/auth.ts

@@ -1,4 +1,6 @@
 import { Router, Request, Response } from "express";
+import Airtable from "airtable";
+
 import User from "../models/User";
 import Robot from "../models/Robot";
 import jwt from "jsonwebtoken";
@@ -7,6 +9,16 @@ import { requireSignIn } from "../middlewares/auth";
 import { genAPIKey } from "../utils/api";
 import { google } from "googleapis";
 import { capture } from "../utils/analytics";
+
+
+
+declare module "express-session" {
+  interface SessionData {
+    code_verifier: string;
+    robotId: string;
+  }
+}
+
 export const router = Router();
 
 interface AuthenticatedRequest extends Request {
@@ -555,3 +567,234 @@ router.post(
     }
   }
 );
+
+
+
+
+import crypto from 'crypto';
+
+// Add these environment variables to your .env file
+// AIRTABLE_CLIENT_ID=your_client_id
+// AIRTABLE_CLIENT_SECRET=your_client_secret
+// AIRTABLE_REDIRECT_URI=http://localhost:8080/auth/airtable/callback
+
+// Airtable OAuth Routes
+router.get("/airtable", (req, res) => {
+  const { robotId } = req.query;
+  if (!robotId) {
+    return res.status(400).json({ message: "Robot ID is required" });
+  }
+
+  // Generate PKCE codes
+  const code_verifier = crypto.randomBytes(64).toString('base64url');
+  const code_challenge = crypto.createHash('sha256')
+    .update(code_verifier)
+    .digest('base64url');
+
+  // Store in session
+  req.session.code_verifier = code_verifier;
+  req.session.robotId = robotId.toString();
+
+  const params = new URLSearchParams({
+    client_id: process.env.AIRTABLE_CLIENT_ID!,
+    redirect_uri: process.env.AIRTABLE_REDIRECT_URI!,
+   
+    response_type: 'code',
+    state: robotId.toString(),
+    scope: 'data.records:read data.records:write schema.bases:read',
+    code_challenge: code_challenge,
+    code_challenge_method: 'S256'
+  });
+
+  res.redirect(`https://airtable.com/oauth2/v1/authorize?${params}`);
+});
+
+router.get("/airtable/callback", async (req, res) => {
+  try {
+    const { code, state, error } = req.query;
+
+    if (error) {
+      return res.redirect(
+        `${process.env.PUBLIC_URL}/robots/${state}/integrate?error=${encodeURIComponent(error.toString())}`
+      );
+    }
+
+    if (!code || !state) {
+      return res.status(400).json({ message: "Missing authorization code or state" });
+    }
+
+    // Verify session data
+    if (!req.session?.code_verifier || req.session.robotId !== state.toString()) {
+      return res.status(400).json({ 
+        message: "Session expired - please restart the OAuth flow"
+      });
+    }
+
+    // Exchange code for tokens
+    const tokenResponse = await fetch("https://airtable.com/oauth2/v1/token", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: new URLSearchParams({
+        grant_type: "authorization_code",
+        code: code.toString(),
+        client_id: process.env.AIRTABLE_CLIENT_ID!,
+        
+        redirect_uri: process.env.AIRTABLE_REDIRECT_URI!,
+        code_verifier: req.session.code_verifier
+      }),
+    });
+
+    if (!tokenResponse.ok) {
+      const errorData = await tokenResponse.json();
+      console.error('Token exchange failed:', errorData);
+      return res.redirect(
+        `${process.env.PUBLIC_URL}/robots/${state}/integrate?error=${encodeURIComponent(errorData.error_description || 'Authentication failed')}`
+      );
+    }
+
+    const tokens = await tokenResponse.json();
+
+    // Update robot with credentials
+    const robot = await Robot.findOne({
+      where: { "recording_meta.id": req.session.robotId }
+    });
+
+    if (!robot) {
+      return res.status(404).json({ message: "Robot not found" });
+    }
+
+    await robot.update({
+      airtable_access_token: tokens.access_token,
+      airtable_refresh_token: tokens.refresh_token,
+      
+    });
+
+    // Clear session data
+    req.session.destroy((err) => {
+      if (err) console.error('Session cleanup error:', err);
+    });
+
+    res.redirect(
+      `${process.env.PUBLIC_URL}/robots/${state}/integrate?success=true`
+    );
+
+  } catch (error: any) {
+    console.error('Airtable callback error:', error);
+    res.redirect(
+      `${process.env.PUBLIC_URL}/robots/${req.session.robotId}/integrate?error=${encodeURIComponent(error.message)}`
+    );
+  }
+});
+
+// Get Airtable bases
+router.get("/airtable/bases", requireSignIn, async (req: AuthenticatedRequest, res) => {
+  try {
+    const { robotId } = req.query;
+    if (!robotId) {
+      return res.status(400).json({ message: "Robot ID is required" });
+    }
+
+    const robot = await Robot.findOne({
+      where: { "recording_meta.id": robotId },
+      raw: true,
+    });
+
+    if (!robot?.airtable_access_token) {
+      return res.status(400).json({ message: "Robot not authenticated with Airtable" });
+    }
+
+    const response = await fetch('https://api.airtable.com/v0/meta/bases', {
+      headers: {
+        'Authorization': `Bearer ${robot.airtable_access_token}`
+      }
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error.message || 'Failed to fetch bases');
+    }
+
+    const data = await response.json();
+    res.json(data.bases.map((base: any) => ({
+      id: base.id,
+      name: base.name
+    })));
+
+  } catch (error: any) {
+    res.status(500).json({ message: error.message });
+  }
+});
+
+// Update robot with selected base
+router.post("/airtable/update", requireSignIn, async (req: AuthenticatedRequest, res) => {
+  const { baseId, baseName, robotId } = req.body;
+
+  if (!baseId || !robotId) {
+    return res.status(400).json({ message: "Base ID and Robot ID are required" });
+  }
+
+  try {
+    const robot = await Robot.findOne({
+      where: { "recording_meta.id": robotId }
+    });
+
+    if (!robot) {
+      return res.status(404).json({ message: "Robot not found" });
+    }
+
+    await robot.update({
+      airtable_base_id: baseId,
+      airtable_table_name: baseName,
+    });
+
+    capture("maxun-oss-airtable-integration-created", {
+      user_id: req.user?.id,
+      robot_id: robotId,
+      created_at: new Date().toISOString(),
+    });
+
+    res.json({ message: "Airtable base updated successfully" });
+
+  } catch (error: any) {
+    res.status(500).json({ message: error.message });
+  }
+});
+
+// Remove Airtable integration
+router.post("/airtable/remove", requireSignIn, async (req: AuthenticatedRequest, res) => {
+  const { robotId } = req.body;
+  if (!robotId) {
+    return res.status(400).json({ message: "Robot ID is required" });
+  }
+
+  try {
+    const robot = await Robot.findOne({
+      where: { "recording_meta.id": robotId }
+    });
+
+    if (!robot) {
+      return res.status(404).json({ message: "Robot not found" });
+    }
+
+    await robot.update({
+      airtable_access_token: null,
+      airtable_refresh_token: null,
+      airtable_base_id: null,
+   
+    });
+
+    capture("maxun-oss-airtable-integration-removed", {
+      user_id: req.user?.id,
+      robot_id: robotId,
+      deleted_at: new Date().toISOString(),
+    });
+
+    res.json({ message: "Airtable integration removed successfully" });
+
+  } catch (error: any) {
+    res.status(500).json({ message: error.message });
+  }
+});
+

server/src/server.ts

@@ -18,6 +18,7 @@ import { fork } from 'child_process';
 import { capture } from "./utils/analytics";
 import swaggerUi from 'swagger-ui-express';
 import swaggerSpec from './swagger/config';
+import session from 'express-session';
 
 const app = express();
 app.use(cors({
@@ -26,6 +27,16 @@ app.use(cors({
 }));
 app.use(express.json());
 
+
+app.use(
+  session({
+    secret: 'your_secret_key', // Replace with a secure secret key
+    resave: false, // Do not resave the session if it hasn't changed
+    saveUninitialized: true, // Save new sessions
+    cookie: { secure: false }, // Set to true if using HTTPS
+  })
+);
+
 const server = http.createServer(app);
 
 /**

src/components/integration/IntegrationSettings.tsx

@@ -6,7 +6,6 @@ import {
   CircularProgress,
   Alert,
   AlertTitle,
-  Chip,
 } from "@mui/material";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
@@ -14,10 +13,9 @@ import axios from "axios";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRecording } from "../../api/storage";
 import { apiUrl } from "../../apiConfig.js";
-import Cookies from 'js-cookie';
+import Cookies from "js-cookie";
 import { useTranslation } from "react-i18next";
 
-
 interface IntegrationProps {
   isOpen: boolean;
   handleStart: (data: IntegrationSettings) => void;
@@ -27,6 +25,8 @@ interface IntegrationProps {
 export interface IntegrationSettings {
   spreadsheetId: string;
   spreadsheetName: string;
+  airtableBaseId: string;
+  airtableBaseName: string;
   data: string;
 }
 
@@ -35,7 +35,7 @@ const getCookie = (name: string): string | null => {
   const value = `; ${document.cookie}`;
   const parts = value.split(`; ${name}=`);
   if (parts.length === 2) {
-    return parts.pop()?.split(';').shift() || null;
+    return parts.pop()?.split(";").shift() || null;
   }
   return null;
 };
@@ -53,58 +53,114 @@ export const IntegrationSettingsModal = ({
   const [settings, setSettings] = useState<IntegrationSettings>({
     spreadsheetId: "",
     spreadsheetName: "",
+    airtableBaseId: "",
+    airtableBaseName: "",
     data: "",
   });
 
-  const [spreadsheets, setSpreadsheets] = useState<
+  const [spreadsheets, setSpreadsheets] = useState<{ id: string; name: string }[]>([]);
-    { id: string; name: string }[]
+  const [airtableBases, setAirtableBases] = useState<{ id: string; name: string }[]>([]);
-  >([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const { recordingId, notify } = useGlobalInfoStore();
   const [recording, setRecording] = useState<any>(null);
 
+  // Authenticate with Google
   const authenticateWithGoogle = () => {
-    window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`;
+    const redirectUri = `${window.location.origin}/google/callback`;
+    window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}&redirect_uri=${encodeURIComponent(redirectUri)}`;
+  };
+  
+  const authenticateWithAirtable = () => {
+    const redirectUri = `${window.location.origin}/airtable/callback`;
+    window.location.href = `${apiUrl}/auth/airtable?robotId=${recordingId}&redirect_uri=${encodeURIComponent(redirectUri)}`;
   };
 
-  const handleOAuthCallback = async () => {
+  // Handle OAuth callback
+  const handleGoogleCallback = async () => {
     try {
-      const response = await axios.get(`${apiUrl}/auth/google/callback`);
+      const urlParams = new URLSearchParams(window.location.search);
-      const { google_sheet_email, files } = response.data;
+      const code = urlParams.get('code');
+      
+      if (!code) {
+        setError(t("integration_settings.errors.no_auth_code"));
+        return;
+      }
+  
+      const response = await axios.get(
+        `${apiUrl}/auth/google/callback?code=${code}&robotId=${recordingId}`
+      );
+      
+      if (response.data.accessToken) {
+        notify("success", t("integration_settings.notifications.google_auth_success"));
+        await fetchSpreadsheetFiles();
+      }
+      
+      // Clear URL parameters
+      window.history.replaceState({}, document.title, window.location.pathname);
+  
     } catch (error) {
-      setError("Error authenticating with Google");
+      setError(t("integration_settings.errors.google_auth_error"));
     }
   };
 
+  const handleAirtableCallback = async () => {
+    try {
+      const urlParams = new URLSearchParams(window.location.search);
+      const code = urlParams.get('code');
+      
+      if (!code) {
+        setError(t("integration_settings.errors.no_auth_code"));
+        return;
+      }
+  
+      const response = await axios.get(
+        `${apiUrl}/auth/airtable/callback?code=${code}&robotId=${recordingId}`
+      );
+      
+      if (response.data.accessToken) {
+        notify("success", t("integration_settings.notifications.airtable_auth_success"));
+        await fetchAirtableBases();
+      }
+      
+      // Clear URL parameters
+      window.history.replaceState({}, document.title, window.location.pathname);
+  
+    } catch (error) {
+      setError(t("integration_settings.errors.airtable_auth_error"));
+    }
+  };
+
+  // Fetch Google Sheets
   const fetchSpreadsheetFiles = async () => {
     try {
-      const response = await axios.get(
+      const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, {
-        `${apiUrl}/auth/gsheets/files?robotId=${recordingId}`,
+        withCredentials: true,
-        {
+      });
-          withCredentials: true,
-        }
-      );
       setSpreadsheets(response.data);
     } catch (error: any) {
-      console.error(
+      console.error("Error fetching spreadsheet files:", error.response?.data?.message || error.message);
-        "Error fetching spreadsheet files:",
+      notify("error", t("integration_settings.errors.fetch_error", { message: error.response?.data?.message || error.message }));
-        error.response?.data?.message || error.message
-      );
-      notify(
-        "error",
-        t('integration_settings.errors.fetch_error', {
-          message: error.response?.data?.message || error.message
-        })
-      );
     }
   };
 
+  // Fetch Airtable Bases
+  const fetchAirtableBases = async () => {
+    try {
+      const response = await axios.get(`${apiUrl}/auth/airtable/bases?robotId=${recordingId}`, {
+        withCredentials: true,
+      });
+      setAirtableBases(response.data);
+    } catch (error: any) {
+      console.error("Error fetching Airtable bases:", error.response?.data?.message || error.message);
+      notify("error", t("integration_settings.errors.fetch_error", { message: error.response?.data?.message || error.message }));
+    }
+  };
+
+  // Handle Google Sheet selection
   const handleSpreadsheetSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedSheet = spreadsheets.find(
+    const selectedSheet = spreadsheets.find((sheet) => sheet.id === e.target.value);
-      (sheet) => sheet.id === e.target.value
-    );
     if (selectedSheet) {
       setSettings({
         ...settings,
@@ -114,6 +170,19 @@ export const IntegrationSettingsModal = ({
     }
   };
 
+  // Handle Airtable Base selection
+  const handleAirtableBaseSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedBase = airtableBases.find((base) => base.id === e.target.value);
+    if (selectedBase) {
+      setSettings({
+        ...settings,
+        airtableBaseId: selectedBase.id,
+        airtableBaseName: selectedBase.name,
+      });
+    }
+  };
+
+  // Update Google Sheet ID
   const updateGoogleSheetId = async () => {
     try {
       const response = await axios.post(
@@ -125,16 +194,33 @@ export const IntegrationSettingsModal = ({
         },
         { withCredentials: true }
       );
-      notify(`success`, t('integration_settings.notifications.sheet_selected'));
+      notify("success", t("integration_settings.notifications.sheet_selected"));
       console.log("Google Sheet ID updated:", response.data);
     } catch (error: any) {
-      console.error(
+      console.error("Error updating Google Sheet ID:", error.response?.data?.message || error.message);
-        "Error updating Google Sheet ID:",
-        error.response?.data?.message || error.message
-      );
     }
   };
 
+  // Update Airtable Base ID
+  const updateAirtableBaseId = async () => {
+    try {
+      const response = await axios.post(
+        `${apiUrl}/auth/airtable/update`,
+        {
+          baseId: settings.airtableBaseId,
+          baseName: settings.airtableBaseName,
+          robotId: recordingId,
+        },
+        { withCredentials: true }
+      );
+      notify("success", t("integration_settings.notifications.base_selected"));
+      console.log("Airtable Base ID updated:", response.data);
+    } catch (error: any) {
+      console.error("Error updating Airtable Base ID:", error.response?.data?.message || error.message);
+    }
+  };
+
+  // Remove Integration
   const removeIntegration = async () => {
     try {
       await axios.post(
@@ -145,98 +231,89 @@ export const IntegrationSettingsModal = ({
 
       setRecording(null);
       setSpreadsheets([]);
-      setSettings({ spreadsheetId: "", spreadsheetName: "", data: "" });
+      setAirtableBases([]);
+      setSettings({ spreadsheetId: "", spreadsheetName: "", airtableBaseId: "", airtableBaseName: "", data: "" });
     } catch (error: any) {
-      console.error(
+      console.error("Error removing integration:", error.response?.data?.message || error.message);
-        "Error removing Google Sheets integration:",
-        error.response?.data?.message || error.message
-      );
     }
   };
 
   useEffect(() => {
-    // Check if there is a success message in cookies
+    const checkAuthCallback = () => {
-    const status = getCookie("robot_auth_status");
+      const path = window.location.pathname;
-    const message = getCookie("robot_auth_message");
+      const urlParams = new URLSearchParams(window.location.search);
-
+      const code = urlParams.get('code');
-    if (status === "success" && message) {
+  
-      notify("success", message);
+      if (code) {
-      // Clear the cookies after reading
+        if (path.includes('/google/callback')) {
-      removeCookie("robot_auth_status");
+          handleGoogleCallback();
-      removeCookie("robot_auth_message");
+        } else if (path.includes('/airtable/callback')) {
-    }
+          handleAirtableCallback();
-
+        }
-    // Check if we're on the callback URL
-    const urlParams = new URLSearchParams(window.location.search);
-    const code = urlParams.get("code");
-    if (code) {
-      handleOAuthCallback();
-    }
-
-    const fetchRecordingInfo = async () => {
-      if (!recordingId) return;
-      const recording = await getStoredRecording(recordingId);
-      if (recording) {
-        setRecording(recording);
       }
     };
-
+  
-    fetchRecordingInfo();
+    checkAuthCallback();
-  }, [recordingId]);
+    
+    // Cleanup function
+    return () => {
+      window.history.replaceState({}, document.title, window.location.pathname);
+    };
+  }, []);
 
   return (
     <GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
-      <div style={{
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", marginLeft: "65px" }}>
-        display: "flex",
+        <Typography variant="h6">{t("integration_settings.title")}</Typography>
-        flexDirection: "column",
-        alignItems: "flex-start",
-        marginLeft: "65px",
-      }}>
-        <Typography variant="h6">
-          {t('integration_settings.title')}
-        </Typography>
 
-        {recording && recording.google_sheet_id ? (
+        {recording && (recording.google_sheet_id || recording.airtable_base_id) ? (
           <>
-            <Alert severity="info" sx={{ marginTop: '10px', border: '1px solid #ff00c3' }}>
+            {recording.google_sheet_id && (
-              <AlertTitle>{t('integration_settings.alerts.success.title')}</AlertTitle>
+              <Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
-              {t('integration_settings.alerts.success.content', { sheetName: recording.google_sheet_name })}
+                <AlertTitle>{t("integration_settings.alerts.success.title")}</AlertTitle>
-              <a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`}
+                {t("integration_settings.alerts.success.content", { sheetName: recording.google_sheet_name })}
-                target="_blank"
+                <a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`} target="_blank" rel="noreferrer">
-                rel="noreferrer">
+                  {t("integration_settings.alerts.success.here")}
-                {t('integration_settings.alerts.success.here')}
+                </a>.
-              </a>.
+                <br />
-              <br />
+                <strong>{t("integration_settings.alerts.success.note")}</strong> {t("integration_settings.alerts.success.sync_limitation")}
-              <strong>{t('integration_settings.alerts.success.note')}</strong> {t('integration_settings.alerts.success.sync_limitation')}
+              </Alert>
-            </Alert>
+            )}
-            <Button
+
-              variant="outlined"
+            {recording.airtable_base_id && (
-              color="error"
+              <Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
-              onClick={removeIntegration}
+                <AlertTitle>{t("integration_settings.alerts.success.title")}</AlertTitle>
-              style={{ marginTop: "15px" }}
+                {t("integration_settings.alerts.success.content", { sheetName: recording.airtable_base_name })}
-            >
+                <a href={`https://airtable.com/${recording.airtable_base_id}`} target="_blank" rel="noreferrer">
-              {t('integration_settings.buttons.remove_integration')}
+                  {t("integration_settings.alerts.success.here")}
+                </a>.
+                <br />
+                <strong>{t("integration_settings.alerts.success.note")}</strong> {t("integration_settings.alerts.success.sync_limitation")}
+              </Alert>
+            )}
+
+            <Button variant="outlined" color="error" onClick={removeIntegration} style={{ marginTop: "15px" }}>
+              {t("integration_settings.buttons.remove_integration")}
             </Button>
           </>
         ) : (
           <>
-            {!recording?.google_sheet_email ? (
+            {!recording?.google_sheet_email && !recording?.airtable_email ? (
               <>
-                <p>{t('integration_settings.descriptions.sync_info')}</p>
+                <p>{t("integration_settings.descriptions.sync_info")}</p>
-                <Button
+                <Button variant="contained" color="primary" onClick={authenticateWithGoogle} style={{ marginBottom: "10px" }}>
-                  variant="contained"
+                  {t("integration_settings.buttons.authenticate_google")}
-                  color="primary"
+                </Button>
-                  onClick={authenticateWithGoogle}
+                <Button variant="contained" color="primary" onClick={authenticateWithAirtable}>
-                >
+                  {t("integration_settings.buttons.authenticate_airtable")}
-                  {t('integration_settings.buttons.authenticate')}
                 </Button>
               </>
             ) : (
               <>
-                {recording.google_sheet_email && (
+                {(recording.google_sheet_email || recording.airtable_email) && (
                   <Typography sx={{ margin: "20px 0px 30px 0px" }}>
-                    {t('integration_settings.descriptions.authenticated_as', {
+                    {t("integration_settings.descriptions.authenticated_as", {
-                      email: recording.google_sheet_email
+                      email: recording.google_sheet_email || recording.airtable_email,
                     })}
                   </Typography>
                 )}
@@ -245,64 +322,91 @@ export const IntegrationSettingsModal = ({
                   <CircularProgress sx={{ marginBottom: "15px" }} />
                 ) : error ? (
                   <Typography color="error">{error}</Typography>
-                ) : spreadsheets.length === 0 ? (
-                  <>
-                    <div style={{ display: "flex", gap: "10px" }}>
-                      <Button
-                        variant="outlined"
-                        color="primary"
-                        onClick={fetchSpreadsheetFiles}
-                      >
-                        {t('integration_settings.buttons.fetch_sheets')}
-                      </Button>
-                      <Button
-                        variant="outlined"
-                        color="error"
-                        onClick={removeIntegration}
-                      >
-                        {t('integration_settings.buttons.remove_integration')}
-                      </Button>
-                    </div>
-                  </>
                 ) : (
                   <>
-                    <TextField
+                    {recording.google_sheet_email && (
-                      sx={{ marginBottom: "15px" }}
+                      <>
-                      select
+                        <TextField
-                      label={t('integration_settings.fields.select_sheet')}
+                          sx={{ marginBottom: "15px" }}
-                      required
+                          select
-                      value={settings.spreadsheetId}
+                          label={t("integration_settings.fields.select_sheet")}
-                      onChange={handleSpreadsheetSelect}
+                          required
-                      fullWidth
+                          value={settings.spreadsheetId}
-                    >
+                          onChange={handleSpreadsheetSelect}
-                      {spreadsheets.map((sheet) => (
+                          fullWidth
-                        <MenuItem key={sheet.id} value={sheet.id}>
+                        >
-                          {sheet.name}
+                          {spreadsheets.map((sheet) => (
-                        </MenuItem>
+                            <MenuItem key={sheet.id} value={sheet.id}>
-                      ))}
+                              {sheet.name}
-                    </TextField>
+                            </MenuItem>
+                          ))}
+                        </TextField>
 
-                    {settings.spreadsheetId && (
+                        {settings.spreadsheetId && (
-                      <Typography sx={{ marginBottom: "10px" }}>
+                          <Typography sx={{ marginBottom: "10px" }}>
-                        {t('integration_settings.fields.selected_sheet', {
+                            {t("integration_settings.fields.selected_sheet", {
-                          name: spreadsheets.find((s) => s.id === settings.spreadsheetId)?.name,
+                              name: spreadsheets.find((s) => s.id === settings.spreadsheetId)?.name,
-                          id: settings.spreadsheetId
+                              id: settings.spreadsheetId,
-                        })}
+                            })}
-                      </Typography>
+                          </Typography>
+                        )}
+
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => {
+                            updateGoogleSheetId();
+                            handleStart(settings);
+                          }}
+                          style={{ marginTop: "10px" }}
+                          disabled={!settings.spreadsheetId || loading}
+                        >
+                          {t("integration_settings.buttons.submit_google")}
+                        </Button>
+                      </>
                     )}
 
-                    <Button
+                    {recording.airtable_email && (
-                      variant="contained"
+                      <>
-                      color="primary"
+                        <TextField
-                      onClick={() => {
+                          sx={{ marginBottom: "15px" }}
-                        updateGoogleSheetId();
+                          select
-                        handleStart(settings);
+                          label={t("integration_settings.fields.select_base")}
-                      }}
+                          required
-                      style={{ marginTop: "10px" }}
+                          value={settings.airtableBaseId}
-                      disabled={!settings.spreadsheetId || loading}
+                          onChange={handleAirtableBaseSelect}
-                    >
+                          fullWidth
-                      {t('integration_settings.buttons.submit')}
+                        >
-                    </Button>
+                          {airtableBases.map((base) => (
+                            <MenuItem key={base.id} value={base.id}>
+                              {base.name}
+                            </MenuItem>
+                          ))}
+                        </TextField>
+
+                        {settings.airtableBaseId && (
+                          <Typography sx={{ marginBottom: "10px" }}>
+                            {t("integration_settings.fields.selected_base", {
+                              name: airtableBases.find((b) => b.id === settings.airtableBaseId)?.name,
+                              id: settings.airtableBaseId,
+                            })}
+                          </Typography>
+                        )}
+
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => {
+                            updateAirtableBaseId();
+                            handleStart(settings);
+                          }}
+                          style={{ marginTop: "10px" }}
+                          disabled={!settings.airtableBaseId || loading}
+                        >
+                          {t("integration_settings.buttons.submit_airtable")}
+                        </Button>
+                      </>
+                    )}
                   </>
                 )}
               </>