[FEATURE] Add OAuth based Login & Fixed Credentials based Login.

[PR-1301]

Description

The PR enhances the authentication flow by integrating fully-featured Google And Twitter(X) OAuth. And also the credentials based login (Email& password login) was also broken which was also fixed and session management was also handled. Finally multiple UI/UX changes was made.(Error message, toast background). Added .env.example in both frontend and backend.

Closes

Issue #49

OAuth Issue:

Initially the Sign in with google/X was not working and irresponsive.

Backend (server/routes/auth.js):

• Implemented secure OAuth token exchange logic (exchangeGoogleCode, exchangeTwitterCode).
• Added new routes for starting the OAuth flow (/api/auth/:provider) and handling the callback (/api/auth/:provider/callback).
• Added findOrCreateOAuthUser to seamlessly link OAuth profiles to existing accounts via email or create new ones, automatically handling profile data (username, avatar, email).

Frontend (client/src/contexts/AuthContext.jsx):

• Added startOAuthLogin and completeOAuthLogin methods to initiate the authorization flows and correctly cache the user session upon returning from the providers.

Sign In with Google Success screenshot:

Sign In with Twitter(X) success screenshot:

Note: Kindly note the toast component which has no background, which was also fixed.

UI/UX changes:

Redesigned Login buttons:

Previously:

#### Redesigned:

Password Strength meter:

• Added a calculatePasswordStrength utility function that evaluates the user's password based on length, casing, numbers, and special characters.
• Implemented a real-time, responsive password strength meter below the password input that displays visual color-coded feedback (Weak: Red, Medium: Yellow, Strong: Green) as the user types.

Toast background fix:

Toaster was referencing undefined CSS variables --toast-bg and --toast-color, causing inconsistent backgrounds across pages.

Fix:

• Replaced with concrete dark-slate styling (#1e293b background, #f1f5f9 text) with:
• Rounded corners, subtle border, elevated shadow
• Green icon theme for success toasts
• Red icon theme for error toasts
• Consistent across all pages regardless of light/dark mode

Specific Error Messages (server/routes/auth.js):

• Refactored the generic error messages in the login route to return explicit, user-friendly messages: "Email not registered" and "Password is incorrect".

Improved Toast Notifications (client/src/contexts/AuthContext.jsx):

• Upgraded the catch blocks in login and signup to intelligently parse validation failures (error.response.data.errors). It now surfaces specific field-level validation messages directly into the UI toasts instead of generic "Login/Signup failed".

Session management:

The session was lost because only the JWT token was stored in localStorage. On every page navigation (including clicking "StackIt" logo), checkAuth() was called, setting user = null initially, which caused a flash of unauthenticated UI. If the API call failed for any transient reason, the user appeared logged out.
Fix:

• Added saveSession() / clearSession() / isSessionValid() helper functions
• Now stores 3 items in localStorage: token, tokenExpiry (7-day window), and cachedUser (JSON)
• User state is initialized from cache immediately (no flash of logged-out state)
• Server validation happens in the background; cache is updated with fresh data on success
• All auth flows (login, signup, OAuth, profile update, logout) properly sync the cache

Profile Icon on Landing page:

• When authenticated: Shows user avatar (or initial) + username linking to /profile/:username
• When not authenticated: Shows original "Sign In" / "Get Started" buttons
• Hero CTA changes to "Go to Dashboard" for logged-in users

/profile Route Redirect:

• Added /profile route that redirects authenticated users to /profile/:username
• Unauthenticated users get redirected to /login

Changes in User schema:

• Added oauth providers

Other changes :

• Added ".env.example" separately with placeholders for your Google and Twitter OAuth credential and callback URLs.
• There is another file env.example. Kindly ignore that.
• Removed redundant print statements which could expose the credentials.
• Add Github Logo in Navbar.
  Old Navbar:

New Navbar:

---

Steps to create Credentials:

• Run node -e "console.log(require('crypto').randomBytes(64).toString('hex'))" to generate JWT_SECRET.
• Visit Google Cloud console to create OAuth credentials
• Visit X developer Platform to create X OAuth credentials.

I have tested it completed and it was successful.

Kindly review this PR and, allocate the maximum points based on the work completed. Thank you!!!

[vercel]

@PR-1301 is attempting to deploy a commit to the anglenobida003-8112's projects Team on Vercel.

A member of the Team first needs to authorize it.

[PR-1301]

Kindly review this PR and allocate the maximum points possible based on the work completed.

Also, I would request that the "good first issue" label be removed, as this issue involves multiple features and a fair amount of implementation effort which collectively make it more suitable for an intermediate-level to advanced level contribution. I believe it may have been labeled as a good first issue by mistake.

Thank you for your time and consideration!!