From 7eba983c151bd852289794adc6c9630fbb9099ef Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 28 Jul 2026 21:28:27 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20introduce=20an=20"unauthe?=
 =?UTF-8?q?nticated"=20participant=20badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a visual badge on participants who are not authenticated, so it
is immediately clear who could be an anonymous participant. This is
a small but explicit security signal in the participant list.

Beyond that, the badge also plays a functional role: since only
authenticated participants can be promoted or demoted, the badge
helps users see at a glance who is eligible for a role change.
---
 CHANGELOG.md                                  |  1 +
 .../components/ParticipantRow.tsx             |  2 +
 .../components/UnauthenticatedBadge.tsx       | 43 +++++++++++++++++++
 src/frontend/src/locales/de/rooms.json        |  3 ++
 src/frontend/src/locales/en/rooms.json        |  3 ++
 src/frontend/src/locales/fr/rooms.json        |  3 ++
 src/frontend/src/locales/nl/rooms.json        |  3 ++
 7 files changed, 58 insertions(+)
 create mode 100644 src/frontend/src/features/participants/components/UnauthenticatedBadge.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 544b5616..2ee4b4c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to
 - ✨(summary) report exception type in failure analytics
 - ✨(frontend) add configurable documentation menu item
 - ✨(frontend) allow promoting authenticated participants
+- ✨(frontend) introduce an "unauthenticated" participant badge
 
 ### Changed
 
diff --git a/src/frontend/src/features/participants/components/ParticipantRow.tsx b/src/frontend/src/features/participants/components/ParticipantRow.tsx
index f3aee30a..1b9e0198 100644
--- a/src/frontend/src/features/participants/components/ParticipantRow.tsx
+++ b/src/frontend/src/features/participants/components/ParticipantRow.tsx
@@ -24,6 +24,7 @@ import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 import { ParticipantMenuButton } from './menu/ParticipantMenuButton'
 import { PinBadge } from './PinBadge'
+import { UnauthenticatedBadge } from './UnauthenticatedBadge'
 import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
 
 type MicIndicatorProps = {
@@ -118,6 +119,7 @@ export const ParticipantRow = ({ participant }: ParticipantListItemProps) => {
         >
           <Avatar name={name} bgColor={getParticipantColor(participant)} />
           <PinBadge participant={participant} />
+          <UnauthenticatedBadge participant={participant} />
         </div>
         <VStack gap={0} alignItems="start">
           <Text
diff --git a/src/frontend/src/features/participants/components/UnauthenticatedBadge.tsx b/src/frontend/src/features/participants/components/UnauthenticatedBadge.tsx
new file mode 100644
index 00000000..32ffe49a
--- /dev/null
+++ b/src/frontend/src/features/participants/components/UnauthenticatedBadge.tsx
@@ -0,0 +1,43 @@
+import { Participant } from 'livekit-client'
+import { css } from '@/styled-system/css'
+import { useParticipantAttribute } from '@livekit/components-react'
+import { RiErrorWarningFill } from '@remixicon/react'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
+import { useTranslation } from 'react-i18next'
+
+export const UnauthenticatedBadge = ({
+  participant,
+}: {
+  participant: Participant
+}) => {
+  const { t } = useTranslation('rooms', {
+    keyPrefix: 'participants.unauthenticated',
+  })
+  const is_authenticated = useParticipantAttribute('is_authenticated', {
+    participant,
+  })
+
+  if (is_authenticated == 'true') return
+
+  return (
+    <div
+      className={css({
+        height: '18px',
+        width: '18px',
+        borderRadius: '100%',
+        background: 'orange.200',
+        color: 'orange.800',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        bottom: '-2px',
+        right: '-4px',
+      })}
+    >
+      <VisualOnlyTooltip tooltip={t('badge')}>
+        <RiErrorWarningFill size={14} aria-hidden />
+      </VisualOnlyTooltip>
+    </div>
+  )
+}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 37feffa1..73a137bc 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -590,6 +590,9 @@
       "open": "{{name}}-Liste öffnen",
       "close": "{{name}}-Liste schließen"
     },
+    "unauthenticated": {
+      "badge": "Nicht authentifizierter Benutzer"
+    },
     "muteYourself": "Mikrofon ausschalten",
     "muteParticipant": "{{name}}’s Mikrofon ausschalten",
     "muteParticipantAlert": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index f2f95cbb..62b34e25 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -589,6 +589,9 @@
       "open": "Open {{name}} list",
       "close": "Close {{name}} list"
     },
+    "unauthenticated": {
+      "badge": "User is not authenticated"
+    },
     "muteYourself": "Close your mic",
     "muteParticipant": "Close the mic of {{name}}",
     "muteParticipantAlert": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 6a90762f..8621cb1d 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -589,6 +589,9 @@
       "open": "Ouvrir la liste {{name}}",
       "close": "Fermer la liste {{name}}"
     },
+    "unauthenticated": {
+      "badge": "Utilisateur non authentifié"
+    },
     "muteYourself": "Couper votre micro",
     "muteParticipant": "Couper le micro de {{name}}",
     "muteParticipantAlert": {
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 97fafdf9..ec5afc04 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -589,6 +589,9 @@
       "open": "Open {{name}} lijst",
       "close": "Sluit {{name}} lijst"
     },
+    "unauthenticated": {
+      "badge": "Niet authentifizierter Benutzer"
+    },
     "muteYourself": "Uw microfoon dempen",
     "muteParticipant": "Demp de microfoon van {{name}}",
     "muteParticipantAlert": {