UserHeader() — supabase Function Reference

Architecture documentation for the UserHeader() function in UserHeader.tsx from the supabase codebase.

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ UserHeader() — supabase Function Reference

Dependency Diagram

graph TD
  4fbbdb9f_4682_edbe_08c5_670a78372f11["UserHeader()"]
  3c05a680_a8e3_7a53_e059_ae8513da59ad["getDisplayName()"]
  4fbbdb9f_4682_edbe_08c5_670a78372f11 -->|calls| 3c05a680_a8e3_7a53_e059_ae8513da59ad
  style 4fbbdb9f_4682_edbe_08c5_670a78372f11 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Auth/Users/UserHeader.tsx lines 9–62

export const UserHeader = ({ user }: { user: User }) => {
  const displayName = getDisplayName(user)
  const hasDisplayName = displayName !== '-'

  const isPhoneAuth = user.phone !== null
  const isAnonUser = user.is_anonymous

  return (
    <div className={cn(PANEL_PADDING)}>
      {isPhoneAuth ? (
        <div className="flex items-center gap-x-1">
          <p>{user.phone}</p>
          <CopyButton
            iconOnly
            type="text"
            icon={<Copy />}
            className="px-1"
            text={user?.phone ?? ''}
          />
        </div>
      ) : isAnonUser ? (
        <>
          <p>Anonymous user</p>
          <div className="flex items-center gap-x-1">
            <p className="text-foreground-light text-sm">{user.id}</p>
            <CopyButton
              iconOnly
              type="text"
              icon={<Copy />}
              className="px-1"
              text={user?.id ?? ''}
            />
          </div>
        </>
      ) : (
        <>
          {hasDisplayName && <p>{displayName}</p>}
          <div className="flex items-center gap-x-1">
            <p className={cn(hasDisplayName ? 'text-foreground-light text-sm' : 'text-foreground')}>
              {user.email}
            </p>
            <CopyButton
              iconOnly
              type="text"
              icon={<Copy />}
              className="px-1"
              text={user?.email ?? ''}
            />
          </div>
        </>
      )}
    </div>
  )
}