feat: add profile auth identity binding flow

frontend/src/components/user/profile/__tests__/ProfileIdentityBindingsSection.spec.ts

+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
+import type { User } from '@/types'
+
+const routeState = vi.hoisted(() => ({
+  fullPath: '/profile',
+}))
+
+const locationState = vi.hoisted(() => ({
+  current: { href: 'http://localhost/profile' } as { href: string },
+}))
+
+vi.mock('vue-router', () => ({
+  useRoute: () => routeState,
+}))
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vue-i18n')>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string, params?: Record<string, string>) => {
+        if (key === 'profile.authBindings.title') return 'Connected sign-in methods'
+        if (key === 'profile.authBindings.description') return 'Manage bound providers'
+        if (key === 'profile.authBindings.status.bound') return 'Bound'
+        if (key === 'profile.authBindings.status.notBound') return 'Not bound'
+        if (key === 'profile.authBindings.providers.email') return 'Email'
+        if (key === 'profile.authBindings.providers.linuxdo') return 'LinuxDo'
+        if (key === 'profile.authBindings.providers.wechat') return 'WeChat'
+        if (key === 'profile.authBindings.providers.oidc') return params?.providerName || 'OIDC'
+        if (key === 'profile.authBindings.bindAction') return `Bind ${params?.providerName || ''}`.trim()
+        return key
+      },
+    }),
+  }
+})
+
+function createUser(overrides: Partial<User> = {}): User {
+  return {
+    id: 7,
+    username: 'alice',
+    email: 'alice@example.com',
+    role: 'user',
+    balance: 10,
+    concurrency: 2,
+    status: 'active',
+    allowed_groups: null,
+    balance_notify_enabled: true,
+    balance_notify_threshold: null,
+    balance_notify_extra_emails: [],
+    created_at: '2026-04-20T00:00:00Z',
+    updated_at: '2026-04-20T00:00:00Z',
+    ...overrides,
+  }
+}
+
+describe('ProfileIdentityBindingsSection', () => {
+  beforeEach(() => {
+    routeState.fullPath = '/profile'
+    locationState.current = { href: 'http://localhost/profile' }
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: locationState.current,
+    })
+    Object.defineProperty(window.navigator, 'userAgent', {
+      configurable: true,
+      value: 'Mozilla/5.0',
+    })
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('renders provider binding states and provider-specific bind actions', () => {
+    const wrapper = mount(ProfileIdentityBindingsSection, {
+      props: {
+        user: createUser({
+          auth_bindings: {
+            email: { bound: true },
+            linuxdo: { bound: true },
+            oidc: { bound: false },
+            wechat: false,
+          },
+        }),
+        linuxdoEnabled: true,
+        oidcEnabled: true,
+        oidcProviderName: 'ExampleID',
+        wechatEnabled: true,
+      },
+    })
+
+    expect(wrapper.get('[data-testid="profile-binding-email-status"]').text()).toBe('Bound')
+    expect(wrapper.get('[data-testid="profile-binding-linuxdo-status"]').text()).toBe('Bound')
+    expect(wrapper.get('[data-testid="profile-binding-oidc-status"]').text()).toBe('Not bound')
+    expect(wrapper.get('[data-testid="profile-binding-oidc-action"]').text()).toBe(
+      'Bind ExampleID'
+    )
+    expect(wrapper.get('[data-testid="profile-binding-wechat-action"]').text()).toBe('Bind WeChat')
+  })
+
+  it('starts the WeChat bind flow for the current profile page', async () => {
+    const wrapper = mount(ProfileIdentityBindingsSection, {
+      props: {
+        user: createUser(),
+        linuxdoEnabled: false,
+        oidcEnabled: false,
+        wechatEnabled: true,
+      },
+    })
+
+    await wrapper.get('[data-testid="profile-binding-wechat-action"]').trigger('click')
+
+    expect(locationState.current.href).toContain('/api/v1/auth/oauth/wechat/start?')
+    expect(locationState.current.href).toContain('mode=open')
+    expect(locationState.current.href).toContain('intent=bind_current_user')
+    expect(locationState.current.href).toContain('redirect=%2Fprofile')
+  })
+})

frontend/src/i18n/locales/en.ts

@@ -940,6 +940,26 @@ export default {
       maxEmailsReached: 'Maximum number of notification emails reached',
       unverified: 'Unverified',
       verified: 'Verified',
+    },
+    authBindings: {
+      title: 'Connected Sign-In Methods',
+      description: 'View current bindings and connect another provider to this account.',
+      bindAction: 'Bind {providerName}',
+      bindSuccess: 'Account linked successfully',
+      status: {
+        bound: 'Bound',
+        notBound: 'Not bound',
+      },
+      providers: {
+        email: 'Email',
+        linuxdo: 'LinuxDo',
+        oidc: '{providerName}',
+        wechat: 'WeChat',
+      },
+      source: {
+        avatar: 'Avatar is currently synced from {providerName}',
+        username: 'Nickname is currently synced from {providerName}',
+      },
     }
   },
 

frontend/src/i18n/locales/zh.ts

@@ -944,6 +944,26 @@ export default {
       maxEmailsReached: '已达到通知邮箱数量上限',
       unverified: '未验证',
       verified: '已验证',
+    },
+    authBindings: {
+      title: '登录方式绑定',
+      description: '查看当前绑定状态，并将更多第三方登录方式关联到这个账号。',
+      bindAction: '绑定 {providerName}',
+      bindSuccess: '账号绑定成功',
+      status: {
+        bound: '已绑定',
+        notBound: '未绑定',
+      },
+      providers: {
+        email: '邮箱',
+        linuxdo: 'LinuxDo',
+        oidc: '{providerName}',
+        wechat: '微信',
+      },
+      source: {
+        avatar: '头像当前来自 {providerName}',
+        username: '昵称当前来自 {providerName}',
+      },
     }
   },
 

frontend/src/types/index.ts

@@ -34,10 +34,47 @@ export interface NotifyEmailEntry {
 
 // ==================== User & Auth Types ====================
 
+export type UserAuthProvider = 'email' | 'linuxdo' | 'oidc' | 'wechat'
+
+export interface UserAuthBindingStatus {
+  bound?: boolean
+  provider?: UserAuthProvider | string
+  provider_key?: string | null
+  provider_subject?: string | null
+  issuer?: string | null
+  label?: string | null
+  provider_label?: string | null
+  metadata?: Record<string, unknown>
+}
+
+export interface UserProfileSourceContext {
+  provider?: UserAuthProvider | string
+  source?: string | null
+  label?: string | null
+  provider_label?: string | null
+}
+
 export interface User {
   id: number
   username: string
   email: string
+  avatar_url?: string | null
+  avatar_source?: string | UserProfileSourceContext | null
+  username_source?: string | UserProfileSourceContext | null
+  display_name_source?: string | UserProfileSourceContext | null
+  nickname_source?: string | UserProfileSourceContext | null
+  profile_sources?: {
+    avatar?: string | UserProfileSourceContext | null
+    username?: string | UserProfileSourceContext | null
+    display_name?: string | UserProfileSourceContext | null
+    nickname?: string | UserProfileSourceContext | null
+  }
+  auth_bindings?: Partial<Record<UserAuthProvider, boolean | UserAuthBindingStatus>>
+  identity_bindings?: Partial<Record<UserAuthProvider, boolean | UserAuthBindingStatus>>
+  email_bound?: boolean
+  linuxdo_bound?: boolean
+  oidc_bound?: boolean
+  wechat_bound?: boolean
   role: 'admin' | 'user' // User role for authorization
   balance: number // User balance for API usage
   concurrency: number // Allowed concurrent requests

frontend/src/views/auth/LinuxDoCallbackView.vue

@@ -136,6 +136,9 @@ import { useAuthStore, useAppStore } from '@/stores'
 import {
   completeLinuxDoOAuthRegistration,
   exchangePendingOAuthCompletion,
+  getOAuthCompletionKind,
+  isOAuthLoginCompletion,
+  persistOAuthTokenContext,
   type OAuthAdoptionDecision,
   type PendingOAuthExchangeResponse
 } from '@/api/auth'
@@ -162,6 +165,7 @@ const suggestedAvatarUrl = ref('')
 const adoptDisplayName = ref(true)
 const adoptAvatar = ref(true)
 const needsAdoptionConfirmation = ref(false)
+const bindSuccessMessage = t('profile.authBindings.bindSuccess')
 
 function parseFragmentParams(): URLSearchParams {
   const raw = typeof window !== 'undefined' ? window.location.hash : ''
@@ -209,18 +213,19 @@ function hasSuggestedProfile(completion: {
   return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
 }
 
-async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) {
-  if (!completion.access_token) {
-    throw new Error(t('auth.linuxdo.callbackMissingToken'))
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
+  if (getOAuthCompletionKind(completion) === 'bind') {
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
+    return
   }
 
-  if (completion.refresh_token) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
+  if (!isOAuthLoginCompletion(completion)) {
+    throw new Error(t('auth.linuxdo.callbackMissingToken'))
   }
 
+  persistOAuthTokenContext(completion)
   await authStore.setToken(completion.access_token)
   appStore.showSuccess(t('auth.loginSuccess'))
   await router.replace(redirect)
@@ -236,12 +241,7 @@ async function handleSubmitInvitation() {
       invitationCode.value.trim(),
       currentAdoptionDecision()
     )
-    if (tokenData.refresh_token) {
-      localStorage.setItem('refresh_token', tokenData.refresh_token)
-    }
-    if (tokenData.expires_in) {
-      localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
-    }
+    persistOAuthTokenContext(tokenData)
     await authStore.setToken(tokenData.access_token)
     appStore.showSuccess(t('auth.loginSuccess'))
     await router.replace(redirectTo.value)
@@ -258,7 +258,7 @@ async function handleContinueLogin() {
   isSubmitting.value = true
   try {
     const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
-    await finalizeLogin(completion, redirectTo.value)
+    await finalizeCompletion(completion, redirectTo.value)
   } catch (e: unknown) {
     const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
     errorMessage.value =
@@ -305,7 +305,7 @@ onMounted(async () => {
       return
     }
 
-    await finalizeLogin(completion, redirect)
+    await finalizeCompletion(completion, redirect)
   } catch (e: unknown) {
     const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
     errorMessage.value =

frontend/src/views/auth/OidcCallbackView.vue

@@ -145,7 +145,10 @@ import { useAuthStore, useAppStore } from '@/stores'
 import {
   completeOIDCOAuthRegistration,
   exchangePendingOAuthCompletion,
+  getOAuthCompletionKind,
   getPublicSettings,
+  isOAuthLoginCompletion,
+  persistOAuthTokenContext,
   type OAuthAdoptionDecision,
   type PendingOAuthExchangeResponse
 } from '@/api/auth'
@@ -172,6 +175,7 @@ const suggestedAvatarUrl = ref('')
 const adoptDisplayName = ref(true)
 const adoptAvatar = ref(true)
 const needsAdoptionConfirmation = ref(false)
+const bindSuccessMessage = t('profile.authBindings.bindSuccess')
 
 function parseFragmentParams(): URLSearchParams {
   const raw = typeof window !== 'undefined' ? window.location.hash : ''
@@ -231,18 +235,19 @@ function hasSuggestedProfile(completion: {
   return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
 }
 
-async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) {
-  if (!completion.access_token) {
-    throw new Error(t('auth.oidc.callbackMissingToken'))
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
+  if (getOAuthCompletionKind(completion) === 'bind') {
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
+    return
   }
 
-  if (completion.refresh_token) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
+  if (!isOAuthLoginCompletion(completion)) {
+    throw new Error(t('auth.oidc.callbackMissingToken'))
   }
 
+  persistOAuthTokenContext(completion)
   await authStore.setToken(completion.access_token)
   appStore.showSuccess(t('auth.loginSuccess'))
   await router.replace(redirect)
@@ -258,12 +263,7 @@ async function handleSubmitInvitation() {
       invitationCode.value.trim(),
       currentAdoptionDecision()
     )
-    if (tokenData.refresh_token) {
-      localStorage.setItem('refresh_token', tokenData.refresh_token)
-    }
-    if (tokenData.expires_in) {
-      localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
-    }
+    persistOAuthTokenContext(tokenData)
     await authStore.setToken(tokenData.access_token)
     appStore.showSuccess(t('auth.loginSuccess'))
     await router.replace(redirectTo.value)
@@ -280,7 +280,7 @@ async function handleContinueLogin() {
   isSubmitting.value = true
   try {
     const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
-    await finalizeLogin(completion, redirectTo.value)
+    await finalizeCompletion(completion, redirectTo.value)
   } catch (e: unknown) {
     const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
     errorMessage.value =
@@ -329,7 +329,7 @@ onMounted(async () => {
       return
     }
 
-    await finalizeLogin(completion, redirect)
+    await finalizeCompletion(completion, redirect)
   } catch (e: unknown) {
     const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
     errorMessage.value =

frontend/src/views/auth/WechatCallbackView.vue

@@ -140,27 +140,16 @@ import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { AuthLayout } from '@/components/layout'
 import Icon from '@/components/icons/Icon.vue'
-import { apiClient } from '@/api/client'
 import { useAuthStore, useAppStore } from '@/stores'
-
-interface OAuthTokenResponse {
-  access_token: string
-  refresh_token: string
-  expires_in: number
-  token_type: string
-}
-
-interface PendingOAuthExchangeResponse {
-  access_token?: string
-  refresh_token?: string
-  expires_in?: number
-  token_type?: string
-  redirect?: string
-  error?: string
-  adoption_required?: boolean
-  suggested_display_name?: string
-  suggested_avatar_url?: string
-}
+import {
+  completeWeChatOAuthRegistration,
+  exchangePendingOAuthCompletion,
+  getOAuthCompletionKind,
+  isOAuthLoginCompletion,
+  persistOAuthTokenContext,
+  type OAuthAdoptionDecision,
+  type PendingOAuthExchangeResponse
+} from '@/api/auth'
 
 const route = useRoute()
 const router = useRouter()
@@ -182,6 +171,7 @@ const suggestedAvatarUrl = ref('')
 const adoptDisplayName = ref(true)
 const adoptAvatar = ref(true)
 const needsAdoptionConfirmation = ref(false)
+const bindSuccessMessage = t('profile.authBindings.bindSuccess')
 
 const providerName = 'WeChat'
 
@@ -200,10 +190,10 @@ function sanitizeRedirectPath(path: string | null | undefined): string {
   return path
 }
 
-function currentAdoptionDecision(): Record<string, boolean> {
+function currentAdoptionDecision(): OAuthAdoptionDecision {
   return {
-    adopt_display_name: adoptDisplayName.value,
-    adopt_avatar: adoptAvatar.value,
+    adoptDisplayName: adoptDisplayName.value,
+    adoptAvatar: adoptAvatar.value
   }
 }
 
@@ -224,49 +214,35 @@ function hasSuggestedProfile(completion: PendingOAuthExchangeResponse): boolean
   return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
 }
 
-async function exchangePendingOAuthCompletion(): Promise<PendingOAuthExchangeResponse> {
-  const { data } = await apiClient.post<PendingOAuthExchangeResponse>('/auth/oauth/pending/exchange', {})
-  return data
-}
-
-async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) {
-  if (!completion.access_token) {
-    throw new Error(t('auth.oidc.callbackMissingToken'))
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
+  if (getOAuthCompletionKind(completion) === 'bind') {
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
+    return
   }
 
-  if (completion.refresh_token) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
+  if (!isOAuthLoginCompletion(completion)) {
+    throw new Error(t('auth.oidc.callbackMissingToken'))
   }
 
+  persistOAuthTokenContext(completion)
   await authStore.setToken(completion.access_token)
   appStore.showSuccess(t('auth.loginSuccess'))
   await router.replace(redirect)
 }
 
-async function completeWeChatOAuthRegistration(invitation: string): Promise<OAuthTokenResponse> {
-  const { data } = await apiClient.post<OAuthTokenResponse>('/auth/oauth/wechat/complete-registration', {
-    invitation_code: invitation,
-    ...currentAdoptionDecision(),
-  })
-  return data
-}
-
 async function handleSubmitInvitation() {
   invitationError.value = ''
   if (!invitationCode.value.trim()) return
 
   isSubmitting.value = true
   try {
-    const tokenData = await completeWeChatOAuthRegistration(invitationCode.value.trim())
-    if (tokenData.refresh_token) {
-      localStorage.setItem('refresh_token', tokenData.refresh_token)
-    }
-    if (tokenData.expires_in) {
-      localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
-    }
+    const tokenData = await completeWeChatOAuthRegistration(
+      invitationCode.value.trim(),
+      currentAdoptionDecision()
+    )
+    persistOAuthTokenContext(tokenData)
     await authStore.setToken(tokenData.access_token)
     appStore.showSuccess(t('auth.loginSuccess'))
     await router.replace(redirectTo.value)
@@ -282,11 +258,8 @@ async function handleSubmitInvitation() {
 async function handleContinueLogin() {
   isSubmitting.value = true
   try {
-    const { data } = await apiClient.post<PendingOAuthExchangeResponse>(
-      '/auth/oauth/pending/exchange',
-      currentAdoptionDecision()
-    )
-    await finalizeLogin(data, redirectTo.value)
+    const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
+    await finalizeCompletion(completion, redirectTo.value)
   } catch (e: unknown) {
     const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
     errorMessage.value =
@@ -333,7 +306,7 @@ onMounted(async () => {
       return
     }
 
-    await finalizeLogin(completion, redirect)
+    await finalizeCompletion(completion, redirect)
   } catch (e: unknown) {
     const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
     errorMessage.value =

frontend/src/views/auth/__tests__/LinuxDoCallbackView.spec.ts

@@ -39,10 +39,14 @@ vi.mock('@/stores', () => ({
   })
 }))
 
-vi.mock('@/api/auth', () => ({
+vi.mock('@/api/auth', async () => {
+  const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
+  return {
+    ...actual,
     exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args),
     completeLinuxDoOAuthRegistration: (...args: any[]) => completeLinuxDoOAuthRegistration(...args)
-}))
+  }
+})
 
 describe('LinuxDoCallbackView', () => {
   beforeEach(() => {
@@ -132,6 +136,64 @@ describe('LinuxDoCallbackView', () => {
     expect(replace).toHaveBeenCalledWith('/dashboard')
   })
 
+  it('treats a completion without token as bind success and returns to profile', async () => {
+    exchangePendingOAuthCompletion.mockResolvedValue({})
+
+    mount(LinuxDoCallbackView, {
+      global: {
+        stubs: {
+          AuthLayout: { template: '<div><slot /></div>' },
+          Icon: true,
+          RouterLink: { template: '<a><slot /></a>' },
+          transition: false
+        }
+      }
+    })
+
+    await flushPromises()
+
+    expect(setToken).not.toHaveBeenCalled()
+    expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
+    expect(replace).toHaveBeenCalledWith('/profile')
+  })
+
+  it('supports bind completion after adoption confirmation', async () => {
+    exchangePendingOAuthCompletion
+      .mockResolvedValueOnce({
+        redirect: '/dashboard',
+        adoption_required: true,
+        suggested_display_name: 'LinuxDo Nick',
+        suggested_avatar_url: 'https://cdn.example/linuxdo.png'
+      })
+      .mockResolvedValueOnce({
+        redirect: '/profile/security'
+      })
+
+    const wrapper = mount(LinuxDoCallbackView, {
+      global: {
+        stubs: {
+          AuthLayout: { template: '<div><slot /></div>' },
+          Icon: true,
+          RouterLink: { template: '<a><slot /></a>' },
+          transition: false
+        }
+      }
+    })
+
+    await flushPromises()
+
+    await wrapper.findAll('button')[0].trigger('click')
+    await flushPromises()
+
+    expect(exchangePendingOAuthCompletion).toHaveBeenNthCalledWith(2, {
+      adoptDisplayName: true,
+      adoptAvatar: true
+    })
+    expect(setToken).not.toHaveBeenCalled()
+    expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
+    expect(replace).toHaveBeenCalledWith('/profile/security')
+  })
+
   it('renders adoption choices for invitation flow and submits the selected values', async () => {
     exchangePendingOAuthCompletion.mockResolvedValue({
       error: 'invitation_required',

frontend/src/views/auth/__tests__/OidcCallbackView.spec.ts

@@ -45,11 +45,15 @@ vi.mock('@/stores', () => ({
   })
 }))
 
-vi.mock('@/api/auth', () => ({
+vi.mock('@/api/auth', async () => {
+  const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
+  return {
+    ...actual,
     exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args),
     completeOIDCOAuthRegistration: (...args: any[]) => completeOIDCOAuthRegistration(...args),
     getPublicSettings: (...args: any[]) => getPublicSettings(...args)
-}))
+  }
+})
 
 describe('OidcCallbackView', () => {
   beforeEach(() => {
@@ -143,6 +147,43 @@ describe('OidcCallbackView', () => {
     expect(replace).toHaveBeenCalledWith('/dashboard')
   })
 
+  it('supports bind completion after adoption confirmation', async () => {
+    exchangePendingOAuthCompletion
+      .mockResolvedValueOnce({
+        redirect: '/dashboard',
+        adoption_required: true,
+        suggested_display_name: 'OIDC Nick',
+        suggested_avatar_url: 'https://cdn.example/oidc.png'
+      })
+      .mockResolvedValueOnce({
+        redirect: '/profile'
+      })
+
+    const wrapper = mount(OidcCallbackView, {
+      global: {
+        stubs: {
+          AuthLayout: { template: '<div><slot /></div>' },
+          Icon: true,
+          RouterLink: { template: '<a><slot /></a>' },
+          transition: false
+        }
+      }
+    })
+
+    await flushPromises()
+
+    await wrapper.findAll('button')[0].trigger('click')
+    await flushPromises()
+
+    expect(exchangePendingOAuthCompletion).toHaveBeenNthCalledWith(2, {
+      adoptDisplayName: true,
+      adoptAvatar: true
+    })
+    expect(setToken).not.toHaveBeenCalled()
+    expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
+    expect(replace).toHaveBeenCalledWith('/profile')
+  })
+
   it('renders adoption choices for invitation flow and submits the selected values', async () => {
     exchangePendingOAuthCompletion.mockResolvedValue({
       error: 'invitation_required',

frontend/src/views/auth/__tests__/WechatCallbackView.spec.ts

@@ -3,14 +3,16 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import WechatCallbackView from '@/views/auth/WechatCallbackView.vue'
 
 const {
-  postMock,
+  exchangePendingOAuthCompletionMock,
+  completeWeChatOAuthRegistrationMock,
   replaceMock,
   setTokenMock,
   showSuccessMock,
   showErrorMock,
   routeState,
 } = vi.hoisted(() => ({
-  postMock: vi.fn(),
+  exchangePendingOAuthCompletionMock: vi.fn(),
+  completeWeChatOAuthRegistrationMock: vi.fn(),
   replaceMock: vi.fn(),
   setTokenMock: vi.fn(),
   showSuccessMock: vi.fn(),
@@ -86,15 +88,19 @@ vi.mock('@/stores', () => ({
   }),
 }))
 
-vi.mock('@/api/client', () => ({
-  apiClient: {
-    post: postMock,
-  },
-}))
+vi.mock('@/api/auth', async () => {
+  const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
+  return {
+    ...actual,
+    exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletionMock(...args),
+    completeWeChatOAuthRegistration: (...args: any[]) => completeWeChatOAuthRegistrationMock(...args),
+  }
+})
 
 describe('WechatCallbackView', () => {
   beforeEach(() => {
-    postMock.mockReset()
+    exchangePendingOAuthCompletionMock.mockReset()
+    completeWeChatOAuthRegistrationMock.mockReset()
     replaceMock.mockReset()
     setTokenMock.mockReset()
     showSuccessMock.mockReset()
@@ -104,14 +110,12 @@ describe('WechatCallbackView', () => {
   })
 
   it('does not send adoption decisions during the initial exchange', async () => {
-    postMock.mockResolvedValueOnce({
-      data: {
+    exchangePendingOAuthCompletionMock.mockResolvedValue({
       access_token: 'access-token',
       refresh_token: 'refresh-token',
       expires_in: 3600,
       redirect: '/dashboard',
       adoption_required: true,
-      },
     })
     setTokenMock.mockResolvedValue({})
 
@@ -128,28 +132,24 @@ describe('WechatCallbackView', () => {
 
     await flushPromises()
 
-    expect(postMock).toHaveBeenCalledWith('/auth/oauth/pending/exchange', {})
-    expect(postMock).toHaveBeenCalledTimes(1)
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenCalledWith()
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenCalledTimes(1)
   })
 
   it('waits for explicit adoption confirmation before finishing a non-invitation login', async () => {
-    postMock
+    exchangePendingOAuthCompletionMock
       .mockResolvedValueOnce({
-        data: {
         redirect: '/dashboard',
         adoption_required: true,
         suggested_display_name: 'WeChat Nick',
         suggested_avatar_url: 'https://cdn.example/wechat.png',
-        },
       })
       .mockResolvedValueOnce({
-        data: {
         access_token: 'wechat-access-token',
         refresh_token: 'wechat-refresh-token',
         expires_in: 3600,
         token_type: 'Bearer',
         redirect: '/dashboard',
-        },
       })
     setTokenMock.mockResolvedValue({})
 
@@ -179,34 +179,66 @@ describe('WechatCallbackView', () => {
     await buttons[0].trigger('click')
     await flushPromises()
 
-    expect(postMock).toHaveBeenNthCalledWith(1, '/auth/oauth/pending/exchange', {})
-    expect(postMock).toHaveBeenNthCalledWith(2, '/auth/oauth/pending/exchange', {
-      adopt_display_name: true,
-      adopt_avatar: false,
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(1)
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(2, {
+      adoptDisplayName: true,
+      adoptAvatar: false,
     })
     expect(setTokenMock).toHaveBeenCalledWith('wechat-access-token')
     expect(replaceMock).toHaveBeenCalledWith('/dashboard')
     expect(localStorage.getItem('refresh_token')).toBe('wechat-refresh-token')
   })
 
-  it('renders adoption choices for invitation flow and submits the selected values', async () => {
-    postMock
+  it('supports bind completion after adoption confirmation', async () => {
+    exchangePendingOAuthCompletionMock
+      .mockResolvedValueOnce({
+        redirect: '/dashboard',
+        adoption_required: true,
+        suggested_display_name: 'WeChat Nick',
+        suggested_avatar_url: 'https://cdn.example/wechat.png',
+      })
       .mockResolvedValueOnce({
-        data: {
+        redirect: '/profile/connections',
+      })
+
+    const wrapper = mount(WechatCallbackView, {
+      global: {
+        stubs: {
+          AuthLayout: { template: '<div><slot /></div>' },
+          Icon: true,
+          RouterLink: { template: '<a><slot /></a>' },
+          transition: false,
+        },
+      },
+    })
+
+    await flushPromises()
+
+    await wrapper.findAll('button')[0].trigger('click')
+    await flushPromises()
+
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(2, {
+      adoptDisplayName: true,
+      adoptAvatar: true,
+    })
+    expect(setTokenMock).not.toHaveBeenCalled()
+    expect(showSuccessMock).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
+    expect(replaceMock).toHaveBeenCalledWith('/profile/connections')
+  })
+
+  it('renders adoption choices for invitation flow and submits the selected values', async () => {
+    exchangePendingOAuthCompletionMock.mockResolvedValue({
       error: 'invitation_required',
       redirect: '/subscriptions',
       adoption_required: true,
       suggested_display_name: 'WeChat Nick',
       suggested_avatar_url: 'https://cdn.example/wechat.png',
-        },
     })
-      .mockResolvedValueOnce({
-        data: {
+    completeWeChatOAuthRegistrationMock.mockResolvedValue({
       access_token: 'wechat-invite-token',
       refresh_token: 'wechat-invite-refresh',
       expires_in: 600,
       token_type: 'Bearer',
-        },
     })
 
     const wrapper = mount(WechatCallbackView, {
@@ -230,10 +262,9 @@ describe('WechatCallbackView', () => {
     await wrapper.get('button').trigger('click')
     await flushPromises()
 
-    expect(postMock).toHaveBeenNthCalledWith(2, '/auth/oauth/wechat/complete-registration', {
-      invitation_code: 'INVITE-CODE',
-      adopt_display_name: false,
-      adopt_avatar: true,
+    expect(completeWeChatOAuthRegistrationMock).toHaveBeenCalledWith('INVITE-CODE', {
+      adoptDisplayName: false,
+      adoptAvatar: true,
     })
     expect(setTokenMock).toHaveBeenCalledWith('wechat-invite-token')
     expect(replaceMock).toHaveBeenCalledWith('/subscriptions')

frontend/src/views/user/ProfileView.vue

@@ -2,18 +2,53 @@
   <AppLayout>
     <div class="mx-auto max-w-4xl space-y-6">
       <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
-        <StatCard :title="t('profile.accountBalance')" :value="formatCurrency(user?.balance || 0)" :icon="WalletIcon" icon-variant="success" />
-        <StatCard :title="t('profile.concurrencyLimit')" :value="user?.concurrency || 0" :icon="BoltIcon" icon-variant="warning" />
-        <StatCard :title="t('profile.memberSince')" :value="formatDate(user?.created_at || '', { year: 'numeric', month: 'long' })" :icon="CalendarIcon" icon-variant="primary" />
+        <StatCard
+          :title="t('profile.accountBalance')"
+          :value="formatCurrency(user?.balance || 0)"
+          :icon="WalletIcon"
+          icon-variant="success"
+        />
+        <StatCard
+          :title="t('profile.concurrencyLimit')"
+          :value="user?.concurrency || 0"
+          :icon="BoltIcon"
+          icon-variant="warning"
+        />
+        <StatCard
+          :title="t('profile.memberSince')"
+          :value="formatDate(user?.created_at || '', { year: 'numeric', month: 'long' })"
+          :icon="CalendarIcon"
+          icon-variant="primary"
+        />
       </div>
-      <ProfileInfoCard :user="user" />
-      <div v-if="contactInfo" class="card border-primary-200 bg-primary-50 dark:bg-primary-900/20 p-6">
+
+      <ProfileInfoCard
+        :user="user"
+        :linuxdo-enabled="linuxdoOAuthEnabled"
+        :oidc-enabled="oidcOAuthEnabled"
+        :oidc-provider-name="oidcOAuthProviderName"
+        :wechat-enabled="wechatOAuthEnabled"
+      />
+
+      <div
+        v-if="contactInfo"
+        class="card border-primary-200 bg-primary-50 p-6 dark:bg-primary-900/20"
+      >
         <div class="flex items-center gap-4">
-          <div class="p-3 bg-primary-100 rounded-xl text-primary-600"><Icon name="chat" size="lg" /></div>
-          <div><h3 class="font-semibold text-primary-800 dark:text-primary-200">{{ t('common.contactSupport') }}</h3><p class="text-sm font-medium">{{ contactInfo }}</p></div>
+          <div class="rounded-xl bg-primary-100 p-3 text-primary-600">
+            <Icon name="chat" size="lg" />
           </div>
+          <div>
+            <h3 class="font-semibold text-primary-800 dark:text-primary-200">
+              {{ t('common.contactSupport') }}
+            </h3>
+            <p class="text-sm font-medium">{{ contactInfo }}</p>
           </div>
+        </div>
+      </div>
+
       <ProfileEditForm :initial-username="user?.username || ''" />
+
       <ProfileBalanceNotifyCard
         v-if="user && balanceLowNotifyEnabled"
         :enabled="user.balance_notify_enabled ?? true"
@@ -22,6 +57,7 @@
         :system-default-threshold="systemDefaultThreshold"
         :user-email="user.email"
       />
+
       <ProfilePasswordForm />
       <ProfileTotpCard />
     </div>
@@ -29,26 +65,78 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h, onMounted } from 'vue'; import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/stores/auth'; import { formatDate } from '@/utils/format'
-import { authAPI } from '@/api'; import AppLayout from '@/components/layout/AppLayout.vue'
+import { computed, h, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { authAPI } from '@/api'
+import { Icon } from '@/components/icons'
 import StatCard from '@/components/common/StatCard.vue'
-import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
-import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
+import AppLayout from '@/components/layout/AppLayout.vue'
 import ProfileBalanceNotifyCard from '@/components/user/profile/ProfileBalanceNotifyCard.vue'
+import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
+import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
 import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
 import ProfileTotpCard from '@/components/user/profile/ProfileTotpCard.vue'
-import { Icon } from '@/components/icons'
+import { useAuthStore } from '@/stores/auth'
+import { formatDate } from '@/utils/format'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const user = computed(() => authStore.user)
 
-const { t } = useI18n(); const authStore = useAuthStore(); const user = computed(() => authStore.user)
 const contactInfo = ref('')
 const balanceLowNotifyEnabled = ref(false)
 const systemDefaultThreshold = ref(0)
+const linuxdoOAuthEnabled = ref(false)
+const wechatOAuthEnabled = ref(false)
+const oidcOAuthEnabled = ref(false)
+const oidcOAuthProviderName = ref('OIDC')
+
+const WalletIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [h('path', { d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12' })]
+    )
+}
+const BoltIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [h('path', { d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })]
+    )
+}
+const CalendarIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [h('path', { d: 'M6.75 3v2.25M17.25 3v2.25' })]
+    )
+}
+
+onMounted(async () => {
+  const profileRefresh = authStore.refreshUser().catch((error) => {
+    console.error('Failed to refresh profile:', error)
+  })
+
+  const settingsLoad = authAPI.getPublicSettings()
+    .then((settings) => {
+      contactInfo.value = settings.contact_info || ''
+      balanceLowNotifyEnabled.value = settings.balance_low_notify_enabled ?? false
+      systemDefaultThreshold.value = settings.balance_low_notify_threshold ?? 0
+      linuxdoOAuthEnabled.value = settings.linuxdo_oauth_enabled ?? false
+      wechatOAuthEnabled.value = settings.wechat_oauth_enabled ?? false
+      oidcOAuthEnabled.value = settings.oidc_oauth_enabled ?? false
+      oidcOAuthProviderName.value = settings.oidc_oauth_provider_name || 'OIDC'
+    })
+    .catch((error) => {
+      console.error('Failed to load settings:', error)
+    })
 
-const WalletIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12' })]) }
-const BoltIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })]) }
-const CalendarIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'M6.75 3v2.25M17.25 3v2.25' })]) }
+  await Promise.all([profileRefresh, settingsLoad])
+})
 
-onMounted(async () => { try { const s = await authAPI.getPublicSettings(); contactInfo.value = s.contact_info || ''; balanceLowNotifyEnabled.value = s.balance_low_notify_enabled ?? false; systemDefaultThreshold.value = s.balance_low_notify_threshold ?? 0 } catch (error) { console.error('Failed to load settings:', error) } })
-const formatCurrency = (v: number) => `$${v.toFixed(2)}`
+const formatCurrency = (value: number) => `$${value.toFixed(2)}`
 </script>