Merge pull request #1166 from vector-im/dbkr/openid

Support for getting SFU config using OIDC

src/livekit/OpenIDLoader.tsx

@@ -0,0 +1,96 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import {
+  OpenIDClientParts,
+  SFUConfig,
+  getSFUConfigWithOpenID,
+} from "./openIDSFU";
+import { ErrorView, LoadingView } from "../FullScreenView";
+
+interface Props {
+  client: OpenIDClientParts;
+  livekitServiceURL: string;
+  roomName: string;
+  children: ReactNode;
+}
+
+const SFUConfigContext = createContext<SFUConfig>(undefined);
+
+export const useSFUConfig = () => useContext(SFUConfigContext);
+
+export function OpenIDLoader({
+  client,
+  livekitServiceURL,
+  roomName,
+  children,
+}: Props) {
+  const [state, setState] = useState<
+    SFUConfigLoading | SFUConfigLoaded | SFUConfigFailed
+  >({ kind: "loading" });
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const result = await getSFUConfigWithOpenID(
+          client,
+          livekitServiceURL,
+          roomName
+        );
+        setState({ kind: "loaded", sfuConfig: result });
+      } catch (e) {
+        logger.error("Failed to fetch SFU config: ", e);
+        setState({ kind: "failed", error: e });
+      }
+    })();
+  }, [client, livekitServiceURL, roomName]);
+
+  switch (state.kind) {
+    case "loading":
+      return <LoadingView />;
+    case "failed":
+      return <ErrorView error={state.error} />;
+    case "loaded":
+      return (
+        <SFUConfigContext.Provider value={state.sfuConfig}>
+          {children}
+        </SFUConfigContext.Provider>
+      );
+  }
+}
+
+type SFUConfigLoading = {
+  kind: "loading";
+};
+
+type SFUConfigLoaded = {
+  kind: "loaded";
+  sfuConfig: SFUConfig;
+};
+
+type SFUConfigFailed = {
+  kind: "failed";
+  error: Error;
+};

src/livekit/openIDSFU.ts

@@ -0,0 +1,54 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient } from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/src/logger";
+
+export interface SFUConfig {
+  url: string;
+  jwt: string;
+}
+
+// The bits we need from MatrixClient
+export type OpenIDClientParts = Pick<
+  MatrixClient,
+  "getOpenIdToken" | "getDeviceId"
+>;
+
+export async function getSFUConfigWithOpenID(
+  client: OpenIDClientParts,
+  livekitServiceURL: string,
+  roomName: string
+): Promise<SFUConfig> {
+  const openIdToken = await client.getOpenIdToken();
+  logger.debug("Got openID token", openIdToken);
+
+  const res = await fetch(livekitServiceURL + "/sfu/get", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      room: roomName,
+      openid_token: openIdToken,
+      device_id: client.getDeviceId(),
+    }),
+  });
+  if (!res.ok) {
+    throw new Error("SFO Config fetch failed with status code " + res.status);
+  }
+  return await res.json();
+}

src/livekit/useLiveKit.ts

@@ -1,8 +1,9 @@
 import { Room, RoomOptions } from "livekit-client";
-import { useLiveKitRoom, useToken } from "@livekit/components-react";
+import { useLiveKitRoom } from "@livekit/components-react";
 import { useMemo } from "react";
 
 import { defaultLiveKitOptions } from "./options";
+import { SFUConfig } from "./openIDSFU";
 
 export type UserChoices = {
   audio?: DeviceChoices;
@@ -14,29 +15,10 @@ export type DeviceChoices = {
   enabled: boolean;
 };
 
-export type LiveKitConfig = {
-  sfuUrl: string;
-  jwtUrl: string;
-  roomName: string;
-  userDisplayName: string;
-  userIdentity: string;
-};
-
 export function useLiveKit(
   userChoices: UserChoices,
-  config: LiveKitConfig
+  sfuConfig: SFUConfig
 ): Room | undefined {
-  const tokenOptions = useMemo(
-    () => ({
-      userInfo: {
-        name: config.userDisplayName,
-        identity: config.userIdentity,
-      },
-    }),
-    [config.userDisplayName, config.userIdentity]
-  );
-  const token = useToken(config.jwtUrl, config.roomName, tokenOptions);
-
   const roomOptions = useMemo((): RoomOptions => {
     const options = defaultLiveKitOptions;
     options.videoCaptureDefaults = {
@@ -51,8 +33,8 @@ export function useLiveKit(
   }, [userChoices.video, userChoices.audio]);
 
   const { room } = useLiveKitRoom({
-    token,
-    serverUrl: config.sfuUrl,
+    token: sfuConfig.jwt,
+    serverUrl: sfuConfig.url,
     audio: userChoices.audio?.enabled ?? false,
     video: userChoices.video?.enabled ?? false,
     options: roomOptions,