feat: add profile auth identity binding flow

c6d85924 · IanShaw027 · 13d9780d · c6d85924 · c6d85924 · c6d85924
Commit c6d85924 authored Apr 20, 2026 by IanShaw027
--- a/frontend/src/components/user/profile/__tests__/ProfileIdentityBindingsSection.spec.ts
+++ b/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')
+  })
+})
--- a/frontend/src/i18n/locales/en.ts
+++ b/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}',
+      },
    }
  },

--- a/frontend/src/i18n/locales/zh.ts
+++ b/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}',
+      },
    }
  },

--- a/frontend/src/types/index.ts
+++ b/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

--- a/frontend/src/views/auth/LinuxDoCallbackView.vue
+++ b/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) {
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
-  if (!completion.access_token) {
+  if (getOAuthCompletionKind(completion) === 'bind') {
-    throw new Error(t('auth.linuxdo.callbackMissingToken'))
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
+    return
  }
-  if (completion.refresh_token) {
+  if (!isOAuthLoginCompletion(completion)) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
+    throw new Error(t('auth.linuxdo.callbackMissingToken'))
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
  }
+  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) {
+    persistOAuthTokenContext(tokenData)
-      localStorage.setItem('refresh_token', tokenData.refresh_token)
-    }
-    if (tokenData.expires_in) {
-      localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
-    }
    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 =

--- a/frontend/src/views/auth/OidcCallbackView.vue
+++ b/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) {
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
-  if (!completion.access_token) {
+  if (getOAuthCompletionKind(completion) === 'bind') {
-    throw new Error(t('auth.oidc.callbackMissingToken'))
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
+    return
  }
-  if (completion.refresh_token) {
+  if (!isOAuthLoginCompletion(completion)) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
+    throw new Error(t('auth.oidc.callbackMissingToken'))
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
  }
+  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) {
+    persistOAuthTokenContext(tokenData)
-      localStorage.setItem('refresh_token', tokenData.refresh_token)
-    }
-    if (tokenData.expires_in) {
-      localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
-    }
    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 =

--- a/frontend/src/views/auth/WechatCallbackView.vue
+++ b/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'
+import {
-interface OAuthTokenResponse {
+  completeWeChatOAuthRegistration,
-  access_token: string
+  exchangePendingOAuthCompletion,
-  refresh_token: string
+  getOAuthCompletionKind,
-  expires_in: number
+  isOAuthLoginCompletion,
-  token_type: string
+  persistOAuthTokenContext,
-}
+  type OAuthAdoptionDecision,
+  type PendingOAuthExchangeResponse
-interface PendingOAuthExchangeResponse {
+} from '@/api/auth'
-  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
-}
 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,
+    adoptDisplayName: adoptDisplayName.value,
-    adopt_avatar: adoptAvatar.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> {
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
-  const { data } = await apiClient.post<PendingOAuthExchangeResponse>('/auth/oauth/pending/exchange', {})
+  if (getOAuthCompletionKind(completion) === 'bind') {
-  return data
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
-}
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
-async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) {
+    return
-  if (!completion.access_token) {
-    throw new Error(t('auth.oidc.callbackMissingToken'))
  }
-  if (completion.refresh_token) {
+  if (!isOAuthLoginCompletion(completion)) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
+    throw new Error(t('auth.oidc.callbackMissingToken'))
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
  }
+  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())
+    const tokenData = await completeWeChatOAuthRegistration(
-    if (tokenData.refresh_token) {
+      invitationCode.value.trim(),
-      localStorage.setItem('refresh_token', tokenData.refresh_token)
+      currentAdoptionDecision()
-    }
+    )
-    if (tokenData.expires_in) {
+    persistOAuthTokenContext(tokenData)
-      localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
-    }
    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>(
+    const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
-      '/auth/oauth/pending/exchange',
+    await finalizeCompletion(completion, redirectTo.value)
-      currentAdoptionDecision()
-    )
-    await finalizeLogin(data, 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 =

--- a/frontend/src/views/auth/__tests__/LinuxDoCallbackView.spec.ts
+++ b/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',

--- a/frontend/src/views/auth/__tests__/OidcCallbackView.spec.ts
+++ b/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',

--- a/frontend/src/views/auth/__tests__/WechatCallbackView.spec.ts
+++ b/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', () => ({
+vi.mock('@/api/auth', async () => {
-  apiClient: {
+  const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
-    post: postMock,
+  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({
+    exchangePendingOAuthCompletionMock.mockResolvedValue({
-      data: {
      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(exchangePendingOAuthCompletionMock).toHaveBeenCalledWith()
-    expect(postMock).toHaveBeenCalledTimes(1)
+    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(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(1)
-    expect(postMock).toHaveBeenNthCalledWith(2, '/auth/oauth/pending/exchange', {
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(2, {
-      adopt_display_name: true,
+      adoptDisplayName: true,
-      adopt_avatar: false,
+      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 () => {
+  it('supports bind completion after adoption confirmation', async () => {
-    postMock
+    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({
+    completeWeChatOAuthRegistrationMock.mockResolvedValue({
-        data: {
      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', {
+    expect(completeWeChatOAuthRegistrationMock).toHaveBeenCalledWith('INVITE-CODE', {
-      invitation_code: 'INVITE-CODE',
+      adoptDisplayName: false,
-      adopt_display_name: false,
+      adoptAvatar: true,
-      adopt_avatar: true,
    })
    expect(setTokenMock).toHaveBeenCalledWith('wechat-invite-token')
    expect(replaceMock).toHaveBeenCalledWith('/subscriptions')

--- a/frontend/src/views/user/ProfileView.vue
+++ b/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
-        <StatCard :title="t('profile.concurrencyLimit')" :value="user?.concurrency || 0" :icon="BoltIcon" icon-variant="warning" />
+          :title="t('profile.accountBalance')"
-        <StatCard :title="t('profile.memberSince')" :value="formatDate(user?.created_at || '', { year: 'numeric', month: 'long' })" :icon="CalendarIcon" icon-variant="primary" />
+          :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 class="rounded-xl bg-primary-100 p-3 text-primary-600">
-          <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>
+            <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 { computed, h, onMounted, ref } from 'vue'
-import { useAuthStore } from '@/stores/auth'; import { formatDate } from '@/utils/format'
+import { useI18n } from 'vue-i18n'
-import { authAPI } from '@/api'; import AppLayout from '@/components/layout/AppLayout.vue'
+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 AppLayout from '@/components/layout/AppLayout.vue'
-import ProfileEditForm from '@/components/user/profile/ProfileEditForm.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' })]) }
+  await Promise.all([profileRefresh, settingsLoad])
-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 () => { 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 = (value: number) => `$${value.toFixed(2)}`
-const formatCurrency = (v: number) => `$${v.toFixed(2)}`
 </script>