Skip to content

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

Open
Rajal-ui wants to merge 2 commits into
rdodiya:gssoc_developfrom
Rajal-ui:bug/google-oauth-login
Open

fix(auth): implement Google OAuth 2.0 login integration in backend and frontend#150
Rajal-ui wants to merge 2 commits into
rdodiya:gssoc_developfrom
Rajal-ui:bug/google-oauth-login

Conversation

@Rajal-ui
Copy link
Copy Markdown

Issue Link

Closes #139

Changes Made

Frontend (React / Vite)

  • Resolved App Crash: Wrapped the main <App /> component in the <GoogleOAuthProvider> in RestroHub-FrontEnd/src/main.jsx.
  • Exposed Client ID: Wired the clientId dynamically via import.meta.env.VITE_GOOGLE_CLIENT_ID.
  • Integrated Auth Button: Connected the <GoogleLogin> component inside RestroHub-FrontEnd/src/pages/public/Login.jsx to render the Google Sign-In prompt.
  • Documented Env Setup: Added VITE_GOOGLE_CLIENT_ID to RestroHub-FrontEnd/.env.example with instructions on how to obtain credentials.
  • Enhanced Documentation: Updated RestroHub-FrontEnd/README.md to reflect proper local installation steps, Vite commands (npm run dev), environment variables, and the correct API path.

Backend (Java / Spring Boot)

  • Implemented Verification Service: Developed GoogleAuthService to securely verify Google ID tokens passed from the frontend.
  • Created Auth Endpoint: Set up AuthController and the GoogleAuthRequest DTO at /api/v1/auth/google for processing auth flows.
  • Database Schema Upgrades: Updated the User entity to map google_sub, auth_provider (e.g., GOOGLE), and profile picture_url columns in PostgreSQL.
  • Aligned Environment Properties: Documented all local Spring Boot configurations (DB credentials, JWT keys, and Google Client IDs) within RestroHub/.env.example and application-dev.properties.
  • Wrote Unit Tests: Created GoogleAuthServiceTest to comprehensively test authentication, claims verification, and token signature validation.

Type of Change

  • New feature
  • Bug fix
  • Documentation update
  • Code refactor (for discussed optimization)

Testing Performed

Backend Testing

  • Unit tests passed (GoogleAuthServiceTest completes successfully with mock tokens)
  • API endpoints tested locally with curl (POST http://localhost:8181/restroly/api/v1/auth/google)
  • Database migrations verified (automated Hibernate updates successfully map the new OAuth user columns)
  • Test Cases:
    • Test Case 1: Verify that passing a valid Google ID Token returns a secure JWT user session and logs/creates a new user. (Pass)
    • Test Case 2: Verify that passing an expired or invalid Google ID Token returns a 401 Unauthorized response. (Pass)

Frontend Testing

  • Component renders correctly (the Login page loads without any blank screens)
  • Responsive on mobile/tablet/desktop
  • No console errors (the uncaught GoogleOAuthProvider context hook error is fully resolved)
  • Test Cases:
    • Test Case 1: Opening the /login route renders the Google Authentication button cleanly. (Pass)
    • Test Case 2: Clicking on the Google Login button launches the official Google account picker popup. (Pass)

Screenshots/Images



image

image


  • Before: Opening the login page causes a full-app crash with a blank white screen, throwing: Uncaught Error: Google OAuth components must be used within GoogleOAuthProvider.
  • After: The Login page renders beautifully and presents the Google login button correctly:

Functionality Demo

Steps to Verify Locally

  1. Run the Spring Boot backend (./gradlew bootRun inside RestroHub).
  2. Run the Vite frontend (npm run dev inside RestroHub-FrontEnd).
  3. Open http://localhost:3000/login in your browser.
  4. Verify the Google Sign-in button loads and displays the authorization prompt successfully when clicked.

Additional Notes

  • Added highly comprehensive .env.example templates to both projects to make setting up the environment incredibly easy and safe for future contributors.
  • Maintained all existing, planned variables (like MongoDB, Redis, and aggregator API definitions) in the backend README.md as per repository guidelines.

…d frontend

This PR integrates Google OAuth 2.0 authentication into both the Spring Boot backend and React/Vite frontend.

Backend changes:
- Created AuthController and GoogleAuthService to verify Google ID tokens.
- Defined GoogleAuthRequest DTO for incoming credential payloads.
- Added database sub mapping, authentication provider details, and user entity updates.
- Added application properties and environment variable definitions for GOOGLE_OAUTH_CLIENT_ID and JWT signing.
- Added GoogleAuthServiceTest to verify backend validation logic.

Frontend changes:
- Integrated @react-oauth/google provider and components.
- Integrated Google login triggers on the public Login page.
- Cleaned up environment variables and README setup instructions to help developers launch and run services seamlessly.
@Rajal-ui
Copy link
Copy Markdown
Author

@rdodiya I have fixed the Google OAuth bug now the Log In button works also, fixed the Get Started button correctly links to the dashboard. Sign in button works too without Google OAuth. Could you please review and approve my PR if everything looks good.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

@rdodiya
Copy link
Copy Markdown
Owner

rdodiya commented May 18, 2026

Hi @Rajal-ui ,
Please resolve conflicts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Login page crashes with white screen due to missing GoogleOAuthProvider wrapper

3 participants