From e68b6e9b84422926b6c0364645d74572939d2627 Mon Sep 17 00:00:00 2001
From: wuyangfan <1102042793@qq.com>
Date: Sun, 17 May 2026 22:56:43 +0800
Subject: [PATCH] fix(frontend): wrap app with GoogleOAuthProvider for login

Repair broken main.jsx entry, document VITE_GOOGLE_CLIENT_ID in
.env.example and README so /login no longer crashes with a blank screen.
---
 ReadMe.md                       |  5 +++++
 RestroHub-FrontEnd/.env.example |  3 +++
 RestroHub-FrontEnd/src/main.jsx | 26 +++++++++++++-------------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/ReadMe.md b/ReadMe.md
index 9e9fec8..2350685 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -233,8 +233,13 @@ Create a `.env` file in `RestroHub-FrontEnd/` (see `.env.example`):
 ```env
 # Base URL for the Spring context path (no trailing slash). Vite only reads VITE_* variables.
 VITE_API_BASE_URL=http://localhost:8181/restroly
+
+# Google Sign-In (OAuth 2.0 Web client ID) — required for /login
+VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id_here
 ```
 
+Create OAuth credentials in [Google Cloud Console](https://console.cloud.google.com/apis/credentials) (OAuth 2.0 Client ID, type **Web application**). Add `http://localhost:5173` (or your Vite dev URL) to authorized JavaScript origins.
+
 Optional:
 
 ```env
diff --git a/RestroHub-FrontEnd/.env.example b/RestroHub-FrontEnd/.env.example
index 6cbcea5..f85f043 100644
--- a/RestroHub-FrontEnd/.env.example
+++ b/RestroHub-FrontEnd/.env.example
@@ -2,3 +2,6 @@
 # Vite only exposes variables prefixed with VITE_.
 
 VITE_API_BASE_URL=http://localhost:8181/restroly
+
+# Google OAuth (required for Login page — create credentials in Google Cloud Console)
+VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id_here
diff --git a/RestroHub-FrontEnd/src/main.jsx b/RestroHub-FrontEnd/src/main.jsx
index 76518a5..e753b42 100644
--- a/RestroHub-FrontEnd/src/main.jsx
+++ b/RestroHub-FrontEnd/src/main.jsx
@@ -1,16 +1,16 @@
-// src/main.jsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
 import { GoogleOAuthProvider } from "@react-oauth/google";
-<GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID"> 
-  <App /> 
-</GoogleOAuthProvider>
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+import App from "./App";
+import "./index.css";
+
+const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID ?? "";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID} > 
-      <App /> 
-      </GoogleOAuthProvider> 
-      </React.StrictMode> );
\ No newline at end of file
+    <GoogleOAuthProvider clientId={googleClientId}>
+      <App />
+    </GoogleOAuthProvider>
+  </React.StrictMode>
+);