Port back to initial token refresh (#238)

Author: 1egoman

app/components/layout.tsx

@@ -10,20 +10,18 @@ import useConnectionDetails from '@/hooks/useConnectionDetails';
 import { cn } from '@/lib/utils';
 
 export default function ComponentsLayout({ children }: { children: React.ReactNode }) {
-  const { fetchConnectionDetails } = useConnectionDetails();
+  const { connectionDetails } = useConnectionDetails();
 
   const pathname = usePathname();
   const room = React.useMemo(() => new Room(), []);
 
   React.useEffect(() => {
-    if (room.state === 'disconnected') {
+    if (room.state === 'disconnected' && connectionDetails) {
       Promise.all([
         room.localParticipant.setMicrophoneEnabled(true, undefined, {
           preConnectBuffer: true,
         }),
-        fetchConnectionDetails().then((connectionDetails) =>
-          room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
-        ),
+        room.connect(connectionDetails.serverUrl, connectionDetails.participantToken),
       ]).catch((error) => {
         toastAlert({
           title: 'There was an error connecting to the agent',
@@ -34,7 +32,7 @@ export default function ComponentsLayout({ children }: { children: React.ReactNo
     return () => {
       room.disconnect();
     };
-  }, [room, fetchConnectionDetails]);
+  }, [room, connectionDetails]);
 
   return (
     <div className="mx-auto min-h-svh max-w-3xl space-y-8 px-4 py-8">

components/app.tsx

@@ -21,11 +21,12 @@ interface AppProps {
 export function App({ appConfig }: AppProps) {
   const room = useMemo(() => new Room(), []);
   const [sessionStarted, setSessionStarted] = useState(false);
-  const { fetchConnectionDetails } = useConnectionDetails();
+  const { refreshConnectionDetails, existingOrRefreshConnectionDetails } = useConnectionDetails();
 
   useEffect(() => {
     const onDisconnected = () => {
       setSessionStarted(false);
+      refreshConnectionDetails();
     };
     const onMediaDevicesError = (error: Error) => {
       toastAlert({
@@ -39,7 +40,7 @@ export function App({ appConfig }: AppProps) {
       room.off(RoomEvent.Disconnected, onDisconnected);
       room.off(RoomEvent.MediaDevicesError, onMediaDevicesError);
     };
-  }, [room]);
+  }, [room, refreshConnectionDetails]);
 
   useEffect(() => {
     let aborted = false;
@@ -48,7 +49,7 @@ export function App({ appConfig }: AppProps) {
         room.localParticipant.setMicrophoneEnabled(true, undefined, {
           preConnectBuffer: appConfig.isPreConnectBufferEnabled,
         }),
-        fetchConnectionDetails().then((connectionDetails) =>
+        existingOrRefreshConnectionDetails().then((connectionDetails) =>
           room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
         ),
       ]).catch((error) => {
@@ -71,7 +72,7 @@ export function App({ appConfig }: AppProps) {
       aborted = true;
       room.disconnect();
     };
-  }, [room, sessionStarted, fetchConnectionDetails, appConfig.isPreConnectBufferEnabled]);
+  }, [room, sessionStarted, appConfig.isPreConnectBufferEnabled]);
 
   const { startButtonText } = appConfig;
 

hooks/useConnectionDetails.ts

@@ -1,6 +1,9 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { decodeJwt } from 'jose';
 import { ConnectionDetails } from '@/app/api/connection-details/route';
 
+const ONE_MINUTE_IN_MILLISECONDS = 60 * 1000;
+
 export default function useConnectionDetails() {
   // Generate room connection details, including:
   //   - A random Room name
@@ -11,7 +14,10 @@ export default function useConnectionDetails() {
   // In real-world application, you would likely allow the user to specify their
   // own participant name, and possibly to choose from existing rooms to join.
 
+  const [connectionDetails, setConnectionDetails] = useState<ConnectionDetails | null>(null);
+
   const fetchConnectionDetails = useCallback(async () => {
+    setConnectionDetails(null);
     const url = new URL(
       process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details',
       window.location.origin
@@ -26,8 +32,41 @@ export default function useConnectionDetails() {
       throw new Error('Error fetching connection details!');
     }
 
+    setConnectionDetails(data);
     return data;
   }, []);
 
-  return { fetchConnectionDetails };
+  useEffect(() => {
+    fetchConnectionDetails();
+  }, [fetchConnectionDetails]);
+
+  const isConnectionDetailsExpired = useCallback(() => {
+    const token = connectionDetails?.participantToken;
+    if (!token) {
+      return true;
+    }
+
+    const jwtPayload = decodeJwt(token);
+    if (!jwtPayload.exp) {
+      return true;
+    }
+    const expiresAt = new Date(jwtPayload.exp - ONE_MINUTE_IN_MILLISECONDS);
+
+    const now = new Date();
+    return expiresAt >= now;
+  }, [connectionDetails?.participantToken]);
+
+  const existingOrRefreshConnectionDetails = useCallback(async () => {
+    if (isConnectionDetailsExpired() || !connectionDetails) {
+      return fetchConnectionDetails();
+    } else {
+      return connectionDetails;
+    }
+  }, [connectionDetails, fetchConnectionDetails, isConnectionDetailsExpired]);
+
+  return {
+    connectionDetails,
+    refreshConnectionDetails: fetchConnectionDetails,
+    existingOrRefreshConnectionDetails,
+  };
 }

package.json

@@ -22,6 +22,7 @@
     "buffer-image-size": "^0.6.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jose": "^6.0.12",
     "livekit-client": "^2.13.3",
     "livekit-server-sdk": "^2.13.0",
     "mime": "^4.0.7",