Skip to content

[FE-32] Google OAuth: login and register page integration #1218

Description

@yusuftomilola

Overview

Frontend login and register pages need a Continue with Google button that initiates the OAuth redirect and handles the callback token, so members can use Google sign-in end-to-end.

Context

  • Login page: frontend/app/(auth)/login/page.tsx
  • Register page: frontend/app/(auth)/register/page.tsx
  • Zustand auth store: frontend/lib/store/authStore.ts
  • Depends on BE-35 being implemented first

Tasks

  • Add a Continue with Google button (Google-branded: white background, Google logo SVG, Sign in with Google text per branding guidelines) to both login and register pages
  • Button redirects to GET /auth/google (backend initiates OAuth)
  • Create /auth/oauth/callback Next.js page that reads ?token= and ?refreshToken= from URL, stores them in authStore, then redirects to /dashboard
  • If callback contains ?error=, show an error toast and redirect back to /login
  • Show a visual divider (--- or ---) between email/password form and Google button

Files to Modify / Create

  • frontend/app/(auth)/login/page.tsx
  • frontend/app/(auth)/register/page.tsx
  • New: frontend/app/(auth)/oauth/callback/page.tsx

Metadata

Metadata

Assignees

Labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions