Refetch tokens when expired (#235)

Author: 1egoman

app/components/layout.tsx

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

components/app.tsx

@@ -21,12 +21,11 @@ interface AppProps {
 export function App({ appConfig }: AppProps) {
   const room = useMemo(() => new Room(), []);
   const [sessionStarted, setSessionStarted] = useState(false);
-  const { connectionDetails, refreshConnectionDetails } = useConnectionDetails();
+  const { fetchConnectionDetails } = useConnectionDetails();
 
   useEffect(() => {
     const onDisconnected = () => {
       setSessionStarted(false);
-      refreshConnectionDetails();
     };
     const onMediaDevicesError = (error: Error) => {
       toastAlert({
@@ -40,16 +39,18 @@ export function App({ appConfig }: AppProps) {
       room.off(RoomEvent.Disconnected, onDisconnected);
       room.off(RoomEvent.MediaDevicesError, onMediaDevicesError);
     };
-  }, [room, refreshConnectionDetails]);
+  }, [room]);
 
   useEffect(() => {
     let aborted = false;
-    if (sessionStarted && room.state === 'disconnected' && connectionDetails) {
+    if (sessionStarted && room.state === 'disconnected') {
       Promise.all([
         room.localParticipant.setMicrophoneEnabled(true, undefined, {
           preConnectBuffer: appConfig.isPreConnectBufferEnabled,
         }),
-        room.connect(connectionDetails.serverUrl, connectionDetails.participantToken),
+        fetchConnectionDetails().then((connectionDetails) =>
+          room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
+        ),
       ]).catch((error) => {
         if (aborted) {
           // Once the effect has cleaned up after itself, drop any errors
@@ -70,7 +71,7 @@ export function App({ appConfig }: AppProps) {
       aborted = true;
       room.disconnect();
     };
-  }, [room, sessionStarted, connectionDetails, appConfig.isPreConnectBufferEnabled]);
+  }, [room, sessionStarted, fetchConnectionDetails, appConfig.isPreConnectBufferEnabled]);
 
   const { startButtonText } = appConfig;
 

hooks/useConnectionDetails.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import { ConnectionDetails } from '@/app/api/connection-details/route';
 
 export default function useConnectionDetails() {
@@ -11,27 +11,23 @@ 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(() => {
-    setConnectionDetails(null);
+  const fetchConnectionDetails = useCallback(async () => {
     const url = new URL(
       process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details',
       window.location.origin
     );
-    fetch(url.toString())
-      .then((res) => res.json())
-      .then((data) => {
-        setConnectionDetails(data);
-      })
-      .catch((error) => {
-        console.error('Error fetching connection details:', error);
-      });
-  }, []);
 
-  useEffect(() => {
-    fetchConnectionDetails();
-  }, [fetchConnectionDetails]);
+    let data: ConnectionDetails;
+    try {
+      const res = await fetch(url.toString());
+      data = await res.json();
+    } catch (error) {
+      console.error('Error fetching connection details:', error);
+      throw new Error('Error fetching connection details!');
+    }
+
+    return data;
+  }, []);
 
-  return { connectionDetails, refreshConnectionDetails: fetchConnectionDetails };
+  return { fetchConnectionDetails };
 }