dify/web/app/device/components/authorize-sso.tsx

'use client'

import type { FC } from 'react'
import type { ApprovalContext } from '@/service/device-flow'
import { Avatar } from '@langgenius/dify-ui/avatar'
import { Button } from '@langgenius/dify-ui/button'
import { useEffect, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { approveExternal, fetchApprovalContext } from '@/service/device-flow'
import { approveErrorCopy } from '../utils/error-copy'

type Props = {
  onApproved: () => void
  onError: (message: string) => void
}

/**
 * AuthorizeSSO is the external-SSO branch authorize screen. On mount it
 * fetches /openapi/v1/oauth/device/approval-context to learn subject_email,
 * issuer, user_code, and csrf_token from the device_approval_grant cookie.
 * On Approve click, posts /openapi/v1/oauth/device/approve-external with
 * the CSRF header.
 *
 * The user_code in state is bound to the cookie by server; we do not accept
 * one from the URL because the SSO branch deliberately detaches from the
 * pre-SSO ?user_code=... query param.
 */
const AuthorizeSSO: FC<Props> = ({ onApproved, onError }) => {
  const { t } = useTranslation('deviceFlow')
  const [ctx, setCtx] = useState<ApprovalContext | null>(null)
  const [busy, setBusy] = useState(false)
  const [loadErr, setLoadErr] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false
    fetchApprovalContext()
      .then((c) => {
        if (!cancelled) {
          setCtx(c)
          setLoadErr(null)
        }
      })
      .catch((e) => {
        if (!cancelled)
          setLoadErr(approveErrorCopy(e, t))
      })
    return () => {
      cancelled = true
    }
  }, [t])

  const approve = async () => {
    if (!ctx)
      return
    setBusy(true)
    try {
      await approveExternal(ctx, ctx.user_code)
      onApproved()
    }
    catch (e) {
      onError(approveErrorCopy(e, t))
    }
    finally {
      setBusy(false)
    }
  }

  // loadErr and loading states render without the icon-circle pattern intentionally —
  // they occur before the SSO identity is established, so there is no terminal
  // state to decorate. The page.tsx error_* states cover post-lookup failures.
  if (loadErr) {
    return (
      <div>
        <h2 className="text-2xl font-semibold text-text-primary">{t('authorize.sessionInvalidTitle')}</h2>
        <p className="mt-2 text-sm text-text-secondary">
          <Trans
            i18nKey="authorize.sessionInvalidBody"
            ns="deviceFlow"
            components={{ codeTag: <code className="rounded bg-components-input-bg-normal px-1 font-mono" /> }}
          />
        </p>
      </div>
    )
  }
  if (!ctx) {
    return <div className="text-sm text-text-secondary">{t('authorize.loadingSession')}</div>
  }

  return (
    <div className="flex flex-col gap-5">
      <div>
        <h2 className="text-2xl font-semibold text-text-primary">{t('authorize.title')}</h2>
        <p className="mt-2 text-sm text-text-secondary">
          {t('authorize.ssoSubtitle')}
        </p>
      </div>
      <div className="flex items-center gap-2.5 rounded-lg bg-background-section-burn px-3 py-2.5">
        <Avatar
          size="md"
          avatar={null}
          name={ctx.subject_email}
        />
        <div>
          <p className="text-sm font-semibold text-text-primary">{ctx.subject_email}</p>
          <p className="text-xs text-text-secondary">{t('authorize.viaSSO')}</p>
        </div>
      </div>
      {ctx.subject_issuer && (
        <div className="rounded-lg bg-background-section-burn px-3 py-2 text-sm text-text-secondary">
          {t('authorize.identityProvider')}
          {' '}
          <span className="font-semibold text-text-primary">{ctx.subject_issuer}</span>
        </div>
      )}
      <Button
        variant="primary"
        size="large"
        className="w-full"
        onClick={approve}
        disabled={busy}
      >
        {t('authorize.approve')}
      </Button>
    </div>
  )
}

export default AuthorizeSSO