Merge pull request #67 from Ziqian-Huang0607/feature/google-drive-v2

feat: integrate Google Drive file loading and saving into Notes apphu…

Author: dailker

package.json

@@ -15,13 +15,16 @@
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "bcryptjs": "^3.0.2",
+    "cookie": "^1.0.2",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "express": "^4.18.0",
     "express-rate-limit": "^8.1.0",
     "express-validator": "^7.2.1",
     "framer-motion": "^12.23.16",
+    "googleapis": "^162.0.0",
     "helmet": "^8.1.0",
+    "idb": "^8.0.3",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.18.2",
     "multer": "2.0.2",

public/icons/gdrive.png

@@ -0,0 +1,81 @@
+// src/context/DriveContext.js
+
+import { createContext, useContext, useState, useEffect } from 'react';
+import {
+  cacheDriveFiles,
+  getCachedDriveFiles,
+  clearDriveCache,
+} from '@/lib/driveCache';
+
+const DriveContext = createContext();
+
+export function DriveProvider({ children }) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [userEmail, setUserEmail] = useState(null);
+
+  const syncFiles = async (showNotification = false) => {
+    setIsLoading(true);
+    try {
+      // First, check if we are authenticated and get the user's email
+      const authCheckResponse = await fetch('/api/auth/google/me');
+      if (!authCheckResponse.ok) {
+        throw new Error('Not authenticated');
+      }
+      const userData = await authCheckResponse.json();
+      setUserEmail(userData.email);
+      setIsConnected(true);
+
+      // If authenticated, then fetch the files
+      const filesResponse = await fetch('/api/files/gdrive');
+      if (!filesResponse.ok) throw new Error('Failed to fetch files');
+      const driveFiles = await filesResponse.json();
+      setFiles(driveFiles);
+      await cacheDriveFiles(driveFiles);
+    } catch (error) {
+      // If any step fails, we are not connected
+      setIsConnected(false);
+      setUserEmail(null);
+      // Try to load from cache as a fallback
+      const cachedFiles = await getCachedDriveFiles();
+      setFiles(cachedFiles); // Show cached files even if disconnected
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    syncFiles();
+  }, []);
+
+  const connectToDrive = () => {
+    window.location.href = '/api/auth/google/login';
+  };
+
+  const disconnectFromDrive = async () => {
+    await fetch('/api/auth/google/logout');
+    await clearDriveCache();
+    setIsConnected(false);
+    setUserEmail(null);
+    setFiles([]);
+  };
+
+  const value = {
+    isConnected,
+    files,
+    isLoading,
+    userEmail,
+    connectToDrive,
+    disconnectFromDrive,
+    syncFiles,
+  };
+
+  return (
+    <DriveContext.Provider value={value}>{children}</DriveContext.Provider>
+  );
+}
+
+export function useDrive() {
+  return useContext(DriveContext);
+}

src/context/DriveContext.js

@@ -0,0 +1,61 @@
+// src/lib/driveCache.js
+
+import { openDB } from 'idb';
+
+const DB_NAME = 'orbitos-drive-cache';
+const STORE_NAME = 'files';
+
+let dbPromise; // We will not initialize this immediately.
+
+/**
+ * A server-safe function to initialize the IndexedDB connection.
+ * It only runs in the browser and only creates the connection once.
+ */
+const getDb = () => {
+  // If we are on the server, 'window' will be undefined.
+  // In that case, we can't do anything, so we return null.
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  // If the dbPromise hasn't been created yet, create it.
+  if (!dbPromise) {
+    dbPromise = openDB(DB_NAME, 1, {
+      upgrade(db) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'id' });
+      },
+    });
+  }
+
+  return dbPromise;
+};
+
+export async function cacheDriveFiles(files) {
+  const db = getDb();
+  if (!db) return; // Do nothing if we're on the server.
+
+  const dbInstance = await db;
+  const tx = dbInstance.transaction(STORE_NAME, 'readwrite');
+  await Promise.all(files.map((file) => tx.store.put(file)));
+  await tx.done;
+  console.log('Google Drive files cached successfully.');
+}
+
+export async function getCachedDriveFiles() {
+  const db = getDb();
+  if (!db) return []; // Return an empty array if on the server.
+
+  const dbInstance = await db;
+  const files = await dbInstance.getAll(STORE_NAME);
+  console.log('Retrieved files from offline cache.');
+  return files;
+}
+
+export async function clearDriveCache() {
+  const db = getDb();
+  if (!db) return; // Do nothing on the server.
+
+  const dbInstance = await db;
+  await dbInstance.clear(STORE_NAME);
+  console.log('Google Drive offline cache cleared.');
+}

src/lib/driveCache.js

@@ -6,6 +6,7 @@ import { ThemeProvider } from '@/context/ThemeContext';
 import { NotificationProvider } from '@/system/services/NotificationRegistry';
 import { SettingsProvider } from '@/context/SettingsContext';
 import { AuthProvider } from '@/context/AuthContext';
+import { DriveProvider } from '@/context/DriveContext';
 
 // We will use one function for our app wrapper
 export default function MyApp({ Component, pageProps }) {
@@ -15,11 +16,13 @@ export default function MyApp({ Component, pageProps }) {
         <AppProvider>
           <NotificationProvider>
             <SettingsProvider>
-              <Component {...pageProps} />
+              <DriveProvider>
+                <Component {...pageProps} />
+              </DriveProvider>
             </SettingsProvider>
           </NotificationProvider>
         </AppProvider>
       </AuthProvider>
     </ThemeProvider>
   );
-}
+}

src/pages/_app.js

@@ -0,0 +1,29 @@
+import { google } from 'googleapis';
+import * as cookie from 'cookie';
+
+const oauth2Client = new google.auth.OAuth2(
+  process.env.GOOGLE_CLIENT_ID,
+  process.env.GOOGLE_CLIENT_SECRET,
+  'http://localhost:3000/api/auth/google/callback',
+);
+
+export default async function handler(req, res) {
+  const { code } = req.query;
+  try {
+    const { tokens } = await oauth2Client.getToken(code);
+    res.setHeader(
+      'Set-Cookie',
+      cookie.serialize('gdrive_token', tokens.access_token, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV !== 'development',
+        maxAge: 3600, // 1 hour
+        sameSite: 'lax',
+        path: '/',
+      }),
+    );
+    res.redirect('/');
+  } catch (error) {
+    console.error('Error authenticating with Google:', error);
+    res.redirect('/?error=google_auth_failed');
+  }
+}

src/pages/api/auth/google/callback.js

@@ -0,0 +1,23 @@
+// src/pages/api/auth/google/login.js
+
+import { google } from 'googleapis';
+
+const oauth2Client = new google.auth.OAuth2(
+  process.env.GOOGLE_CLIENT_ID,
+  process.env.GOOGLE_CLIENT_SECRET,
+  'http://localhost:3000/api/auth/google/callback',
+);
+
+export default function handler(req, res) {
+  const scopes = [
+    'https://www.googleapis.com/auth/drive.file',
+    'https://www.googleapis.com/auth/userinfo.email',
+  ];
+
+  const url = oauth2Client.generateAuthUrl({
+    access_type: 'offline',
+    scope: scopes,
+  });
+
+  res.redirect(url);
+}

src/pages/api/auth/google/login.js

@@ -0,0 +1,15 @@
+import * as cookie from 'cookie';
+
+export default function handler(req, res) {
+  res.setHeader(
+    'Set-Cookie',
+    cookie.serialize('gdrive_token', '', {
+      httpOnly: true,
+      secure: process.env.NODE_ENV !== 'development',
+      maxAge: -1,
+      sameSite: 'lax',
+      path: '/',
+    }),
+  );
+  res.status(200).json({ message: 'Logged out successfully' });
+}

src/pages/api/auth/google/logout.js

@@ -0,0 +1,31 @@
+// src/pages/api/auth/google/me.js
+
+import { google } from 'googleapis';
+import * as cookie from 'cookie';
+
+export default async function handler(req, res) {
+  try {
+    const oauth2Client = new google.auth.OAuth2(
+      process.env.GOOGLE_CLIENT_ID,
+      process.env.GOOGLE_CLIENT_SECRET,
+      'http://localhost:3000/api/auth/google/callback',
+    );
+
+    const cookies = cookie.parse(req.headers.cookie || '');
+    const accessToken = cookies.gdrive_token;
+
+    if (!accessToken) {
+      return res.status(401).json({ error: 'Not authenticated with Google' });
+    }
+
+    oauth2Client.setCredentials({ access_token: accessToken });
+    const oauth2 = google.oauth2({ version: 'v2', auth: oauth2Client });
+
+    // Fetch the user's profile information
+    const userInfo = await oauth2.userinfo.get();
+
+    res.status(200).json({ email: userInfo.data.email });
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to get user info from Google' });
+  }
+}

src/pages/api/auth/google/me.js

@@ -0,0 +1,39 @@
+// src/pages/api/files/gdrive.js
+
+import { google } from 'googleapis';
+import * as cookie from 'cookie';
+
+export default async function handler(req, res) {
+  try {
+    // --- THIS IS THE FIX ---
+    // Create a new, clean OAuth2 client for EVERY request.
+    const oauth2Client = new google.auth.OAuth2(
+      process.env.GOOGLE_CLIENT_ID,
+      process.env.GOOGLE_CLIENT_SECRET,
+      'http://localhost:3000/api/auth/google/callback',
+    );
+
+    const cookies = cookie.parse(req.headers.cookie || '');
+    const accessToken = cookies.gdrive_token;
+
+    if (!accessToken) {
+      return res.status(401).json({ error: 'Not authenticated with Google' });
+    }
+
+    // Set the credentials for this specific request's client instance.
+    oauth2Client.setCredentials({ access_token: accessToken });
+    const drive = google.drive({ version: 'v3', auth: oauth2Client });
+
+    const response = await drive.files.list({
+      pageSize: 100,
+      fields: 'files(id, name, mimeType, modifiedTime, iconLink, webViewLink)',
+      q: "'root' in parents and trashed = false",
+    });
+
+    res.status(200).json(response.data.files);
+  } catch (error) {
+    // Add a log so we can see any future errors in the terminal
+    console.error('Error in /api/files/gdrive:', error);
+    res.status(500).json({ error: 'Failed to list files from Google Drive' });
+  }
+}