Add linked sign-in methods in Settings with connect/unlink rules.

client-next/src/app/auth/github/callback/page.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useEffect, useState } from 'react'
+import { Suspense, useEffect, useState, useRef } from 'react'
 import { useSearchParams, useRouter } from 'next/navigation'
 import { getApiUrl } from '@/lib/config'
 import { useAuth } from '@/context/AuthContext'
@@ -11,15 +11,20 @@ function GitHubCallbackInner() {
   const router = useRouter()
   const { refreshUser } = useAuth()
   const [message, setMessage] = useState('Signing in with GitHub…')
+  const exchanged = useRef(false)
 
   useEffect(() => {
+    if (exchanged.current) return
+
     const code = searchParams.get('code')
     const state = searchParams.get('state')
     if (!code || !state) {
       setMessage('Invalid callback — missing code or state.')
       return
     }
 
+    exchanged.current = true
+
     async function exchange() {
       try {
         const res = await fetch(`${getApiUrl()}/auth/github/callback`, {
@@ -33,6 +38,13 @@ function GitHubCallbackInner() {
           setMessage(data.error || 'Sign-in failed')
           return
         }
+
+        if (data.linked && data.mode === 'link') {
+          setMessage('GitHub connected. Redirecting to settings…')
+          router.push(`/settings?linked=${data.provider}`)
+          return
+        }
+
         await refreshUser()
         router.push('/')
       } catch {

client-next/src/app/auth/google/callback/page.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useEffect, useState } from 'react'
+import { Suspense, useEffect, useState, useRef } from 'react'
 import { useSearchParams, useRouter } from 'next/navigation'
 import { getApiUrl } from '@/lib/config'
 import { useAuth } from '@/context/AuthContext'
@@ -11,15 +11,20 @@ function OAuthCallback({ provider, endpoint }) {
   const router = useRouter()
   const { refreshUser } = useAuth()
   const [message, setMessage] = useState(`Signing in with ${provider}…`)
+  const exchanged = useRef(false)
 
   useEffect(() => {
+    if (exchanged.current) return
+
     const code = searchParams.get('code')
     const state = searchParams.get('state')
     if (!code || !state) {
       setMessage('Invalid callback — missing code or state.')
       return
     }
 
+    exchanged.current = true
+
     async function exchange() {
       try {
         const res = await fetch(`${getApiUrl()}${endpoint}`, {
@@ -33,6 +38,13 @@ function OAuthCallback({ provider, endpoint }) {
           setMessage(data.error || 'Sign-in failed')
           return
         }
+
+        if (data.linked && data.mode === 'link') {
+          setMessage(`${provider} connected. Redirecting to settings…`)
+          router.push(`/settings?linked=${data.provider}`)
+          return
+        }
+
         await refreshUser()
         router.push('/')
       } catch {
@@ -41,7 +53,7 @@ function OAuthCallback({ provider, endpoint }) {
     }
 
     exchange()
-  }, [searchParams, router, refreshUser, endpoint])
+  }, [searchParams, router, endpoint, provider, refreshUser])
 
   return (
     <div className={styles.page}>

client-next/src/app/orcid/callback/page.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useEffect, useState } from 'react'
+import { Suspense, useEffect, useState, useRef } from 'react'
 import { useSearchParams, useRouter } from 'next/navigation'
 import { getApiUrl } from '@/lib/config'
 import { useAuth } from '@/context/AuthContext'
@@ -12,8 +12,11 @@ function OrcidCallbackInner() {
   const { refreshUser } = useAuth()
   const [status, setStatus] = useState('loading')
   const [message, setMessage] = useState('')
+  const exchanged = useRef(false)
 
   useEffect(() => {
+    if (exchanged.current) return
+
     const code = searchParams.get('code')
     const state = searchParams.get('state')
 
@@ -23,6 +26,8 @@ function OrcidCallbackInner() {
       return
     }
 
+    exchanged.current = true
+
     async function exchange() {
       try {
         const res = await fetch(`${getApiUrl()}/auth/orcid/callback`, {
@@ -48,6 +53,13 @@ function OrcidCallbackInner() {
           return
         }
 
+        if (data.linked && data.mode === 'link') {
+          setStatus('success')
+          setMessage('ORCID connected to your account.')
+          router.replace('/settings?linked=orcid')
+          return
+        }
+
         if (data.mode === 'login') {
           await refreshUser()
           setStatus('success')

client-next/src/app/settings/page.js

@@ -1,11 +1,12 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { Suspense, useState, useEffect } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useAuth } from '@/context/AuthContext'
 import { updateProfile, getMyProfile } from '@/lib/api'
 import Layout from '@/components/Layout'
+import LinkedAccounts from '@/components/LinkedAccounts'
 import styles from './Settings.module.css'
 
 export default function SettingsPage() {
@@ -204,6 +205,16 @@ export default function SettingsPage() {
           </div>
         </section>
 
+        <section className={styles.section}>
+          <h2 className={styles.sectionHeading}>Sign-in methods</h2>
+          <p className={styles.sectionDesc}>
+            View and manage accounts linked for signing in — Google, GitHub, ORCID, or email.
+          </p>
+          <Suspense fallback={<p className={styles.sectionDesc}>Loading…</p>}>
+            <LinkedAccounts />
+          </Suspense>
+        </section>
+
         <section className={styles.section}>
           <h2 className={styles.sectionHeading}>Topics</h2>
           <p className={styles.sectionDesc}>