Orcid Integration

[michaelcanova]

ORCID Integration for ResearchHub Frontend

🎯 Overview

This PR implements the frontend ORCID integration that enables ResearchHub users to seamlessly connect their ORCID accounts and receive real-time feedback on publication synchronization. The integration provides a polished user experience with contextual banners, toast notifications, and clean URL handling for OAuth redirects.

✨ Key Features

• Contextual ORCID Banner: Smart banner component that appears only on user's own profile pages
• One-Click Connection: Streamlined ORCID sync with loading states and immediate feedback
• OAuth Redirect Handling: Clean URL parameter processing with duplicate prevention
• Toast Notifications: Real-time success/error feedback with decoded error messages
• Dismissible UI: User-controlled banner dismissal with persistent preferences
• Responsive Design: Mobile-optimized layout with adaptive button sizing

🏗️ Implementation

API Integration

services/orcid.service.ts - ORCID backend communication

• isOrcidConnected() - Checks authentication status via POST /api/orcid/check
• connectOrcidAccount() - Initiates OAuth flow via POST /api/orcid/connect
• resyncOrcidPublications() - Triggers manual sync via POST /api/orcid/sync
• handleOrcidSync() - Orchestrates connection check and sync flow

UI Components

components/banners/OrcidSyncBanner.tsx - Primary user interface

• Self-contained banner with profile ownership detection
• Integrated ORCID branding and responsive design
• Built-in dismissal functionality using useDismissableFeature
• Loading states and error handling

Smart URL Handling

contexts/UserContext.tsx - OAuth redirect processing

• Detects orcid_sync and error URL parameters on page load
• Immediately cleans URL to prevent duplicate notifications on refresh
• Shows appropriate success/error toasts with decoded error messages
• Uses modern URL Web API for canonical parameter manipulation

🎨 User Experience

Visual Design

• ORCID Brand Colors: Authentic green color palette (#A6CE39, #6BAA1D)
• Contextual Placement: Banner appears strategically on author profile pages
• Clear Hierarchy: Icon, title, description, and call-to-action layout
• Mobile Responsive: Stacked layout on mobile, horizontal on desktop

Interaction Flow

1. Banner Display: Appears only on user's own profile when ORCID not connected
2. Connection Initiation: "Sync with ORCID" button starts OAuth flow
3. OAuth Redirect: User authenticates with ORCID and returns to ResearchHub
4. Immediate Feedback: Toast notification shows sync status with clean URL
5. Banner Dismissal: Auto-dismisses on successful connection

🚀 User Flow

[vercel]

Someone is attempting to deploy a commit to the ResearchHub Team on Vercel.

A member of the Team first needs to authorize it.

[sonarqubecloud]

Quality Gate failed

Failed conditions
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE