fix: gate /recommendations API calls behind authenticated session

[saniya196]

Fixes #769

🚀 Description

The /recommendations endpoint was firing on the Sign In page
before any auth token was available, causing a 401 Unauthorized
error in the console.

Patched three call sites:

• LearnHubPage.tsx
• RoadmapDashboardPage.tsx
• RoadmapCanvasPage.tsx

Changes:

• Added useAuthStore guard to all three recommendation effects
• API call now only fires when a valid student session exists
• Loading state is explicitly cleared for anonymous pages so
  the UI doesn't wait on a skipped request

🔨 Type of change

• Bug fix (non-breaking change which fixes an issue)

✅ Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas

Summary by CodeRabbit

• Bug Fixes
  • Ensured weak areas, personalized recommendations, and weak topic suggestions load only for authenticated students with the appropriate role.
  • Weak areas and recommendations are now properly cleared for unauthenticated users.

[coderabbitai]

📝 Walkthrough

Walkthrough

Three student module pages now gate /student/recommendations API calls behind authentication checks using useAuthStore. Each page clears its recommendation state and skips the API call when the user is unauthenticated or lacks the STUDENT role. Effect dependencies were updated to react to authentication state changes.

Changes

Authentication-gated recommendation endpoints

Layer / File(s)	Summary
LearnHub recommendation gating client/src/module/student/learn/LearnHubPage.tsx	LearnHubPage reads isAuthenticated and userRole from useAuthStore and gates the recommendations fetch so weakAreas is only populated when authenticated as a student.
Roadmap Canvas recommendation gating client/src/module/student/roadmap/RoadmapCanvasPage.tsx	RoadmapCanvasPage imports useAuthStore and reworks the weakTopicTitles effect to load recommendations only when authenticated as a student, clearing state otherwise.
Roadmap Dashboard recommendation gating client/src/module/student/roadmap/RoadmapDashboardPage.tsx	RoadmapDashboardPage imports useAuthStore and conditionally fetches weakAreas recommendations only for authenticated student users, clearing state and returning early when not authenticated.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Three pages now check before they peek,
Auth guards the recommendations they seek,
No more 401 in the console's bleak,
Gated API calls, secure and meek! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: gate /recommendations API calls behind authenticated session' accurately describes the main change: adding authentication guards to API calls.
Description check	✅ Passed	The description covers the issue fixed, the files modified, and the implementation changes; however, it does not fully follow the template structure with explicit Related Issue and Type of Change sections.
Linked Issues check	✅ Passed	The PR fully addresses issue #769 by gating /recommendations API calls in three files (LearnHubPage, RoadmapCanvasPage, RoadmapDashboardPage) to only fire when authenticated, eliminating the 401 error on the Sign In page.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of fixing the 401 error by adding authentication guards to recommendation API calls; no extraneous modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

client/src/module/student/learn/LearnHubPage.tsx (1)

28-40: ⚡ Quick win

Consider extracting a shared recommendations hook to avoid re-duplicating the gate.

This same auth/role-gated /student/recommendations fetch now appears in three pages (LearnHubPage, RoadmapCanvasPage, RoadmapDashboardPage). A small shared hook (e.g. useWeakAreas() returning the gated raw weakAreas) would centralize the gate so a future fourth caller can't re-introduce the 401 bug; each page can still apply its own transform (Set of slugs in Canvas, slicing in the others).

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/module/student/learn/LearnHubPage.tsx` around lines 28 - 40,
Extract the duplicated auth/role-gated fetch into a shared hook named
useWeakAreas that encapsulates the gate and network call: move the logic from
the useEffect (the isAuthenticated/userRole check, setLoadingRecs state,
api.get('/student/recommendations') call, and error/finally behavior) into
useWeakAreas and have it return the raw weakAreas array and loading flag (e.g.,
{ weakAreas, loadingRecs }) so LearnHubPage (and
RoadmapCanvasPage/RoadmapDashboardPage) can call useWeakAreas() and apply their
own transforms; ensure the hook uses the same API call and preserves the
behavior of setting [] on unauthenticated or on error and toggling the loading
state.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@client/src/module/student/learn/LearnHubPage.tsx`:
- Around line 28-40: Extract the duplicated auth/role-gated fetch into a shared
hook named useWeakAreas that encapsulates the gate and network call: move the
logic from the useEffect (the isAuthenticated/userRole check, setLoadingRecs
state, api.get('/student/recommendations') call, and error/finally behavior)
into useWeakAreas and have it return the raw weakAreas array and loading flag
(e.g., { weakAreas, loadingRecs }) so LearnHubPage (and
RoadmapCanvasPage/RoadmapDashboardPage) can call useWeakAreas() and apply their
own transforms; ensure the hook uses the same API call and preserves the
behavior of setting [] on unauthenticated or on error and toggling the loading
state.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: aa1d89d4-3bf5-467a-a803-16e62a736fe3

📥 Commits

Reviewing files that changed from the base of the PR and between 6446d69 and 6844d3f.

📒 Files selected for processing (3)

• client/src/module/student/learn/LearnHubPage.tsx
• client/src/module/student/roadmap/RoadmapCanvasPage.tsx
• client/src/module/student/roadmap/RoadmapDashboardPage.tsx

[Sachinchaurasiya360]

Review: Approved

Correct fix for the 401 console error on the Sign In page. Gating the /recommendations API call behind isAuthenticated (from useAuthStore) ensures the request only fires when a valid session exists.

What's good:

• Applies the same guard to all three call sites (LearnHubPage, RoadmapCanvasPage, RoadmapDashboardPage)
• Explicitly clears the loading state for unauthenticated users so the UI doesn't hang
• No changes to the actual recommendations logic — pure guard placement

Note for merge: RoadmapCanvasPage.tsx is also modified by PR #793 (skipped status). After the other PR resolves, a rebase may be needed.