♻️(backend) use a dedicated auth scheme for LiveKit token auth

We now use `Authorization: Bearer <token>` to authenticate users
from the token exchange flow (used for iframe embeds).

Until now, the `Bearer` scheme was also reused for the alternative
LiveKit authentication, where a client presents its LiveKit token
issued by the backend to prove room membership on actions open to
any room participant. Sharing the scheme between the two flows is
not viable anymore.

Switch the LiveKit token authentication to a dedicated
`Authorization` scheme, so `Bearer` stays reserved for the iframe /
token-exchange flow.

Follow-up: a broader effort should look into harmonizing and
hardening the backend authentication stack of the app.

src/frontend/src/features/rooms/api/muteParticipant.ts

@@ -10,6 +10,7 @@ import { useIsAdminOrOwner } from '../livekit/hooks/useIsAdminOrOwner'
 
 import { useCallback } from 'react'
 import { reportError } from '@/features/analytics/telemetry'
+import { getLiveKitAuthHeaders } from '../utils/getLiveKitAuthHeaders'
 
 export const useMuteParticipant = () => {
   const apiRoomData = useRoomData()
@@ -40,7 +41,7 @@ export const useMuteParticipant = () => {
       }
 
       const headers = !isAdminOrOwner
-        ? { Authorization: `Bearer ${apiRoomData.livekit.token}` }
+        ? getLiveKitAuthHeaders(apiRoomData.livekit.token)
         : undefined
 
       let response

src/frontend/src/features/rooms/api/renameParticipant.ts

@@ -1,5 +1,6 @@
 import { fetchApi } from '@/api/fetchApi'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { getLiveKitAuthHeaders } from '../utils/getLiveKitAuthHeaders'
 
 export const useRenameParticipant = () => {
   const data = useRoomData()
@@ -15,11 +16,10 @@ export const useRenameParticipant = () => {
       throw new Error('LiveKit token is not available')
     }
 
+    const headers = getLiveKitAuthHeaders(token)
     return fetchApi(`rooms/${data.id}/rename/`, {
       method: 'POST',
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
+      headers,
       body: JSON.stringify({
         name,
       }),

src/frontend/src/features/rooms/api/updateRaiseHand.ts

@@ -1,5 +1,6 @@
 import { fetchApi } from '@/api/fetchApi'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { getLiveKitAuthHeaders } from '../utils/getLiveKitAuthHeaders'
 
 export const useRaiseHand = () => {
   const data = useRoomData()
@@ -15,11 +16,10 @@ export const useRaiseHand = () => {
       throw new Error('LiveKit token is not available')
     }
 
+    const headers = getLiveKitAuthHeaders(token)
     return fetchApi(`rooms/${data.id}/toggle-hand/`, {
       method: 'POST',
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
+      headers,
       body: JSON.stringify({
         raised,
       }),

src/frontend/src/features/rooms/utils/getLiveKitAuthHeaders.ts

@@ -0,0 +1,7 @@
+const LIVEKIT_AUTH_SCHEME = 'X-LiveKit-Token'
+
+export const getLiveKitAuthHeaders = (token: string) => {
+  return {
+    Authorization: `${LIVEKIT_AUTH_SCHEME} ${token}`,
+  }
+}

src/frontend/src/features/subtitle/api/startSubtitle.ts

@@ -2,6 +2,7 @@ import { useMutation, type UseMutationOptions } from '@tanstack/react-query'
 import { fetchApi } from '@/api/fetchApi'
 import type { ApiError } from '@/api/ApiError'
 import type { ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { getLiveKitAuthHeaders } from '@/features/rooms/utils/getLiveKitAuthHeaders'
 
 export interface StartSubtitleParams {
   id: string
@@ -14,9 +15,7 @@ const startSubtitle = ({
 }: StartSubtitleParams): Promise<ApiRoom> => {
   return fetchApi(`rooms/${id}/start-subtitle/`, {
     method: 'POST',
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
+    headers: getLiveKitAuthHeaders(token),
   })
 }