fix(auth): implement Google OAuth 2.0 login integration in backend and frontend

ReadMe.md

@@ -123,6 +123,12 @@ Before starting, ensure you have the following installed on your machine:
 - Code Editor: VS Code (recommended)
 ```
 
+**For Google OAuth Integration:**
+```bash
+- Google Cloud Console account (free)
+- OAuth 2.0 Client ID from Google Cloud
+```
+
 ### Verify Installation
 
 ```bash
@@ -180,13 +186,44 @@ export DB_PASSWORD=your_password
 export SPRING_DATASOURCE_URL=jdbc:postgresql://localhost:5432/RestroHub_DB
 ```
 
-The active Spring profile is **`dev`** by default (`spring.profiles.active` in `application.properties`). Database settings are merged from `application.properties` and `application-dev.properties`.
+#### 2. Google OAuth Setup (Required for Login)
+
+**Get Google OAuth Client ID:**
+1. Go to [Google Cloud Console](https://console.cloud.google.com/apis/credentials)
+2. Create a new project or select existing
+3. Click **"Create Credentials"** → **"OAuth client ID"** → **"Web application"**
+4. Add authorized URIs:
+   - `http://localhost:5173` (Frontend dev)
+   - `http://localhost:3000` (Alternative)
+   - Your production domain
+5. Copy the **Client ID**
+
+**Set Backend Configuration:**
+
+```bash
+export GOOGLE_OAUTH_CLIENT_ID=your_client_id_from_google_cloud
+export JWT_SECRET=your-256-bit-secret-key-change-in-production
+export JWT_EXPIRATION=86400000
+export JWT_REFRESH_EXPIRATION=604800000
+```
+
+To generate a secure JWT_SECRET:
+```bash
+# macOS/Linux
+openssl rand -hex 32
 
-#### 2. Backend configuration (optional)
+# Or Python
+python3 -c "import os; print(os.urandom(32).hex())"
+
+# Or Node.js
+node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
+```
+
+#### 3. Backend configuration (optional)
 
 Most defaults are already in `RestroHub/src/main/resources/application.properties` and `application-dev.properties`. Prefer environment variables for secrets (for example `DB_PASSWORD`, `JWT_SECRET`) instead of committing passwords.
 
-#### 3. Build and run backend
+#### 4. Build and run backend
 
 ```bash
 # Navigate to backend directory
@@ -226,15 +263,18 @@ cd RestroHub-FrontEnd
 npm install
 ```
 
-#### 2. Environment configuration
+#### 2. Environment configuration - Google OAuth
 
 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.
+# Frontend API and Google OAuth
 VITE_API_BASE_URL=http://localhost:8181/restroly
+VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id_here
 ```
 
+**Important:** Use the **same Google Client ID** from Google Cloud Console as used in backend configuration.
+
 Optional:
 
 ```env

RestroHub-FrontEnd/.env.example

@@ -1,4 +1,16 @@
-# Copy to .env and adjust if your backend URL differs.
-# Vite only exposes variables prefixed with VITE_.
+# =========================================================================
+# RestroHub Frontend Environment Variables
+# Copy this file to .env and adjust values for your environment.
+# Note: Vite only exposes variables prefixed with VITE_ to the browser.
+# =========================================================================
 
+# --- API Configuration ---
+# The base URL pointing to the Spring Boot backend
 VITE_API_BASE_URL=http://localhost:8181/restroly
+
+# --- Google OAuth 2.0 Configuration ---
+# Create client credentials in the Google Cloud Console:
+# https://console.cloud.google.com/apis/credentials
+# Note: This client ID must match the GOOGLE_OAUTH_CLIENT_ID in the backend.
+VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id_here
+

RestroHub-FrontEnd/README.md

@@ -57,39 +57,48 @@ Restroly-FrontEnd/
 
 ## 🔧 Setup & Installation
 
-### 📌 Clone Repository
+### 📌 Prerequisites
 
-```bash
-git clone https://github.com/rdodiya/Restroly-FrontEnd.git
-cd Restroly-FrontEnd
-````
+Ensure you have installed:
+- **Node.js** 18.0 or higher
+- **npm** 9.0 or higher (comes with Node.js)
+- **Git**
+- **Code Editor** (VS Code recommended)
+
+---
 
-### 📌 Install Dependencies
+### 📌 Getting Started
 
+#### 1. Navigate to Frontend Directory
+From the root of the cloned `RestroHub` repository, enter the frontend directory:
 ```bash
-npm install
+cd RestroHub-FrontEnd
 ```
 
-or with Yarn:
-
+#### 2. Install Dependencies
 ```bash
-yarn install
+npm install
 ```
 
-### 📌 Run Locally
-
+#### 3. Environment Configuration
+Create a `.env` file in the frontend root directory:
 ```bash
-npm start
+cp .env.example .env
 ```
+Open `.env` and enter your actual config values:
+- `VITE_API_BASE_URL=http://localhost:8181/restroly` (Should point to your Spring Boot backend)
+- `VITE_GOOGLE_CLIENT_ID`: Your Google OAuth client ID (Must match the one configured on the backend)
+
+---
 
-or
+### 📌 Run Locally
 
+To launch the Vite development server:
 ```bash
-yarn start
+npm run dev
 ```
 
-Open your browser at:
-
+By default, Vite will start the frontend on port **3000**:
 ```
 http://localhost:3000
 ```
@@ -98,19 +107,9 @@ http://localhost:3000
 
 ## 🌐 Backend Integration
 
-This frontend app connects to the **Restroly backend** to fetch menus, categories, and handle orders.
-
-Ensure your backend is running and update the API base URL in:
-
-```
-src/services/api.js
-```
+The frontend app automatically integrates with the **Restroly backend API** to load menus, categories, handle orders, and perform authentication.
 
-Example:
-
-```js
-export const API_BASE_URL = "http://localhost:8080/api";
-```
+The API client configuration can be found at `src/services/common/api.js`. It is set up to automatically look at `VITE_API_BASE_URL` from your `.env` file, falling back to `http://localhost:8181/restroly` when not specified.
 
 ---
 
@@ -155,13 +154,24 @@ npm run deploy
 
 ## 🧩 Environment Variables
 
-Create a `.env` file in the root:
+Create a `.env` file in the root (Vite only exposes variables prefixed with `VITE_`):
 
 ```env
-REACT_APP_API_BASE_URL=http://localhost:8080/api
-# any other keys you need
+VITE_API_BASE_URL=http://localhost:8181/restroly
+# Google OAuth: create credentials in Google Cloud Console and set your client id here
+VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id_here
 ```
 
+How to obtain a Google Client ID:
+
+1. Go to https://console.cloud.google.com/apis/credentials
+2. Create or select a project
+3. Click "Create Credentials" → "OAuth client ID" and choose "Web application"
+4. Add `http://localhost:5173` (or your Vite dev URL) to Authorized JavaScript origins
+5. Copy the `Client ID` and add it to your `.env` as `VITE_GOOGLE_CLIENT_ID`
+
+After updating `.env`, restart the dev server.
+
 ---
 
 ## 📸 Screenshots

RestroHub-FrontEnd/env_properties.env

@@ -1 +1,3 @@
-API_BASE_URL=http://localhost:8181/restroly
+API_BASE_URL=http://localhost:8181/restroly
+# Vite exposes env vars prefixed with VITE_
+VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id_here

RestroHub-FrontEnd/src/App.jsx

@@ -1,16 +1,28 @@
 // src/App.jsx
 import { BrowserRouter } from 'react-router-dom';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 import AppRoutes from './routes';
 import { ThemeProvider } from '@context/ThemeContext';
 import './index.css';
 
 function App() {
+  const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+
+  if (!googleClientId) {
+    console.warn(
+      'VITE_GOOGLE_CLIENT_ID is not set. Google OAuth will be disabled.\n' +
+      'Please set VITE_GOOGLE_CLIENT_ID in your .env file and restart your Vite server.'
+    );
+  }
+
   return (
-    <ThemeProvider>
-      <BrowserRouter>
-        <AppRoutes />
-      </BrowserRouter>
-    </ThemeProvider>
+    <GoogleOAuthProvider clientId={googleClientId || ""}>
+      <ThemeProvider>
+        <BrowserRouter>
+          <AppRoutes />
+        </BrowserRouter>
+      </ThemeProvider>
+    </GoogleOAuthProvider>
   );
 }
 

RestroHub-FrontEnd/src/main.jsx

@@ -1,16 +1,11 @@
-// src/main.jsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-import { GoogleOAuthProvider } from "@react-oauth/google";
-<GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID"> 
-  <App /> 
-</GoogleOAuthProvider>
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID} > 
-      <App /> 
-      </GoogleOAuthProvider> 
-      </React.StrictMode> );
+// src/main.jsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

RestroHub-FrontEnd/src/pages/public/Login.jsx

@@ -308,7 +308,7 @@ const handleGoogleLogin = async (credentialResponse) => {
                       id="username"
                       name="username"
                       type="text"
-                      autoComplete="username"
+                      autoComplete="off"
                       placeholder="Enter email or username"
                       value={formik.values.username}
                       onChange={formik.handleChange}
@@ -337,7 +337,7 @@ const handleGoogleLogin = async (credentialResponse) => {
                       id="password"
                       name="password"
                       type={showPassword ? "text" : "password"}
-                      autoComplete="current-password"
+                      autoComplete="new-password"
                       placeholder="6+ Characters, 1 Capital letter"
                       disabled={isLoading}
                       value={formik.values.password}
@@ -403,8 +403,7 @@ const handleGoogleLogin = async (credentialResponse) => {
   onError={() => {
     toast.error("Google Login Failed");
   }}
-/>
-```
+/> 
 
 
 

RestroHub/.env.example

@@ -0,0 +1,27 @@
+# =========================================================================
+# RestroHub Backend Environment Variables
+# Copy this file to .env and replace placeholders with actual values.
+# =========================================================================
+
+# --- Google OAuth 2.0 Credentials ---
+# Create your client credentials in the Google Cloud Console:
+# https://console.cloud.google.com/apis/credentials
+GOOGLE_OAUTH_CLIENT_ID=your_google_oauth_client_id_here
+
+# --- Server Configuration ---
+SERVER_PORT=8181
+SPRING_PROFILES_ACTIVE=dev
+
+# --- Database Configuration ---
+SPRING_DATASOURCE_URL=jdbc:postgresql://localhost:5432/RestroHub_DB
+DB_USERNAME=postgres
+DB_PASSWORD=postgres
+
+# --- Security / JWT Configuration ---
+# Choose a strong, random 256-bit key for production!
+JWT_SECRET=your-256-bit-secret-key-here-change-in-production
+JWT_EXPIRATION=86400000
+JWT_REFRESH_EXPIRATION=604800000
+
+# --- Security / CORS ---
+CORS_ALLOWED_ORIGINS=http://localhost:5173,http://localhost:3000,http://localhost:3002