fix api auth

www/app/[domain]/browse/page.tsx

@@ -1,43 +1,17 @@
 "use client";
-import React, { useState, useEffect } from "react";
-import getApi from "../../lib/getApi";
-import {
-  PageGetTranscript,
-  GetTranscript,
-  GetTranscriptFromJSON,
-} from "../../api";
+import React, { useState } from "react";
+
+import { GetTranscript } from "../../api";
 import { Title } from "../../lib/textComponents";
 import Pagination from "./pagination";
 import Link from "next/link";
-import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
+import useTranscriptList from "../transcripts/useTranscriptList";
 
 export default function TranscriptBrowser() {
-  const api = getApi();
-  const [results, setResults] = useState<PageGetTranscript | null>(null);
   const [page, setPage] = useState<number>(1);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const isAuthenticated = useFiefIsAuthenticated();
-
-  useEffect(() => {
-    if (!isAuthenticated) return;
-    setIsLoading(true);
-    api
-      .v1TranscriptsList({ page })
-      .then((response) => {
-        // issue with API layer, conversion for items is not happening
-        response.items = response.items.map((item) =>
-          GetTranscriptFromJSON(item),
-        );
-        setResults(response);
-        setIsLoading(false);
-      })
-      .catch(() => {
-        setResults(null);
-        setIsLoading(false);
-      });
-  }, [page, isAuthenticated]);
+  const { loading, response } = useTranscriptList(page);
 
   return (
     <div>
@@ -52,12 +26,12 @@ export default function TranscriptBrowser() {
         <Pagination
           page={page}
           setPage={setPage}
-          total={results?.total || 0}
-          size={results?.size || 0}
+          total={response?.total || 0}
+          size={response?.size || 0}
         />
       </div>
 
-      {isLoading && (
+      {loading && (
         <div className="full-screen flex flex-col items-center justify-center">
           <FontAwesomeIcon
             icon={faGear}
@@ -65,7 +39,7 @@ export default function TranscriptBrowser() {
           />
         </div>
       )}
-      {!isLoading && !results ? (
+      {!loading && !response && (
         <div className="text-gray-500">
           No transcripts found, but you can&nbsp;
           <Link href="/transcripts/new" className="underline">
@@ -73,12 +47,10 @@ export default function TranscriptBrowser() {
           </Link>
           &nbsp;to get started.
         </div>
-      ) : (
-        <></>
       )}
       <div /** center and max 900px wide */ className="mx-auto max-w-[900px]">
         <div className="grid grid-cols-1 gap-2 lg:gap-4 h-full">
-          {results?.items.map((item: GetTranscript) => (
+          {response?.items.map((item: GetTranscript) => (
             <div
               key={item.id}
               className="flex flex-col bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4"

www/app/[domain]/transcripts/[transcriptId]/page.tsx

@@ -1,20 +1,17 @@
 "use client";
 import Modal from "../modal";
-import getApi from "../../../lib/getApi";
 import useTranscript from "../useTranscript";
 import useTopics from "../useTopics";
 import useWaveform from "../useWaveform";
 import { TopicList } from "../topicList";
 import Recorder from "../recorder";
 import { Topic } from "../webSocketTypes";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import "../../../styles/button.css";
 import FinalSummary from "../finalSummary";
 import ShareLink from "../shareLink";
 import QRCode from "react-qr-code";
 import TranscriptTitle from "../transcriptTitle";
-import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react";
-import { featureEnabled } from "../../domainContext";
 
 type TranscriptDetails = {
   params: {
@@ -22,20 +19,15 @@ type TranscriptDetails = {
   };
 };
 
-export default function TranscriptDetails(details: TranscriptDetails) {
-  const isAuthenticated = useFiefIsAuthenticated();
-  const api = getApi();
-  const [transcriptId, setTranscriptId] = useState<string>("");
-  const transcript = useTranscript(api, transcriptId);
-  const topics = useTopics(api, transcriptId);
-  const waveform = useWaveform(api, transcriptId);
-  const useActiveTopic = useState<Topic | null>(null);
-  const requireLogin = featureEnabled("requireLogin");
+const protectedPath = true;
 
-  useEffect(() => {
-    if (requireLogin && !isAuthenticated) return;
-    setTranscriptId(details.params.transcriptId);
-  }, [api]);
+export default function TranscriptDetails(details: TranscriptDetails) {
+  const transcriptId = details.params.transcriptId;
+
+  const transcript = useTranscript(protectedPath, transcriptId);
+  const topics = useTopics(protectedPath, transcriptId);
+  const waveform = useWaveform(protectedPath, transcriptId);
+  const useActiveTopic = useState<Topic | null>(null);
 
   if (transcript?.error /** || topics?.error || waveform?.error **/) {
     return (

www/app/[domain]/transcripts/[transcriptId]/record/page.tsx

@@ -36,9 +36,8 @@ const TranscriptRecord = (details: TranscriptDetails) => {
     }
   }, []);
 
-  const api = getApi();
-  const transcript = useTranscript(api, details.params.transcriptId);
-  const webRTC = useWebRTC(stream, details.params.transcriptId, api);
+  const transcript = useTranscript(false, details.params.transcriptId);
+  const webRTC = useWebRTC(stream, details.params.transcriptId, true);
   const webSockets = useWebSockets(details.params.transcriptId);
 
   const { audioDevices, getAudioStream } = useAudioDevice();

www/app/[domain]/transcripts/createTranscript.ts

@@ -19,10 +19,10 @@ const useCreateTranscript = (): CreateTranscript => {
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
-  const api = getApi();
+  const api = getApi(true);
 
   const create = (params: V1TranscriptsCreateRequest["createTranscript"]) => {
-    if (loading) return;
+    if (loading || !api) return;
 
     setLoading(true);
     const requestParameters: V1TranscriptsCreateRequest = {

www/app/[domain]/transcripts/recorder.tsx

@@ -15,6 +15,7 @@ import AudioInputsDropdown from "./audioInputsDropdown";
 import { Option } from "react-dropdown";
 import { useError } from "../../(errors)/errorContext";
 import { waveSurferStyles } from "../../styles/recorder";
+import useMp3 from "./useMp3";
 
 type RecorderProps = {
   setStream?: React.Dispatch<React.SetStateAction<MediaStream | null>>;

www/app/[domain]/transcripts/useTopics.ts

@@ -5,6 +5,7 @@ import {
 } from "../../api/apis/DefaultApi";
 import { useError } from "../../(errors)/errorContext";
 import { Topic } from "./webSocketTypes";
+import getApi from "../../lib/getApi";
 
 type TranscriptTopics = {
   topics: Topic[] | null;
@@ -12,14 +13,15 @@ type TranscriptTopics = {
   error: Error | null;
 };
 
-const useTopics = (api: DefaultApi, id: string): TranscriptTopics => {
+const useTopics = (protectedPath, id: string): TranscriptTopics => {
   const [topics, setTopics] = useState<Topic[] | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
+  const api = getApi(protectedPath);
 
-  const getTopics = (id: string) => {
-    if (!id) return;
+  useEffect(() => {
+    if (!id || !api) return;
 
     setLoading(true);
     const requestParameters: V1TranscriptGetTopicsRequest = {
@@ -36,11 +38,7 @@ const useTopics = (api: DefaultApi, id: string): TranscriptTopics => {
         setError(err);
         setErrorState(err);
       });
-  };
-
-  useEffect(() => {
-    getTopics(id);
-  }, [id]);
+  }, [id, api]);
 
   return { topics, loading, error };
 };

www/app/[domain]/transcripts/useTranscript.ts

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
-import { DefaultApi, V1TranscriptGetRequest } from "../../api/apis/DefaultApi";
+import { V1TranscriptGetRequest } from "../../api/apis/DefaultApi";
 import { GetTranscript } from "../../api";
 import { useError } from "../../(errors)/errorContext";
+import getApi from "../../lib/getApi";
 
 type Transcript = {
   response: GetTranscript | null;
@@ -9,14 +10,18 @@ type Transcript = {
   error: Error | null;
 };
 
-const useTranscript = (api: DefaultApi, id: string | null): Transcript => {
+const useTranscript = (
+  protectedPath: boolean,
+  id: string | null,
+): Transcript => {
   const [response, setResponse] = useState<GetTranscript | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
+  const api = getApi(protectedPath);
 
-  const getTranscript = (id: string | null) => {
-    if (!id) return;
+  useEffect(() => {
+    if (!id || !api) return;
 
     setLoading(true);
     const requestParameters: V1TranscriptGetRequest = {
@@ -33,11 +38,7 @@ const useTranscript = (api: DefaultApi, id: string | null): Transcript => {
         setError(err);
         setErrorState(err);
       });
-  };
-
-  useEffect(() => {
-    getTranscript(id);
-  }, [id]);
+  }, [id, !api]);
 
   return { response, loading, error };
 };

www/app/[domain]/transcripts/useTranscriptList.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { GetTranscriptFromJSON, PageGetTranscript } from "../../api";
+import { useError } from "../../(errors)/errorContext";
+import getApi from "../../lib/getApi";
+
+type TranscriptList = {
+  response: PageGetTranscript | null;
+  loading: boolean;
+  error: Error | null;
+};
+
+//always protected
+const useTranscriptList = (page: number): TranscriptList => {
+  const [response, setResponse] = useState<PageGetTranscript | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setErrorState] = useState<Error | null>(null);
+  const { setError } = useError();
+  const api = getApi(true);
+
+  useEffect(() => {
+    if (!api) return;
+    setLoading(true);
+    api
+      .v1TranscriptsList({ page })
+      .then((response) => {
+        // issue with API layer, conversion for items is not happening
+        response.items = response.items.map((item) =>
+          GetTranscriptFromJSON(item),
+        );
+        setResponse(response);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setResponse(null);
+        setLoading(false);
+        setError(err);
+        setErrorState(err);
+      });
+  }, [!api, page]);
+
+  return { response, loading, error };
+};
+
+export default useTranscriptList;

www/app/[domain]/transcripts/useWaveform.ts

@@ -5,6 +5,7 @@ import {
 } from "../../api/apis/DefaultApi";
 import { AudioWaveform } from "../../api";
 import { useError } from "../../(errors)/errorContext";
+import getApi from "../../lib/getApi";
 
 type AudioWaveFormResponse = {
   waveform: AudioWaveform | null;
@@ -12,14 +13,15 @@ type AudioWaveFormResponse = {
   error: Error | null;
 };
 
-const useWaveform = (api: DefaultApi, id: string): AudioWaveFormResponse => {
+const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => {
   const [waveform, setWaveform] = useState<AudioWaveform | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
+  const api = getApi(protectedPath);
 
-  const getWaveform = (id: string) => {
-    if (!id) return;
+  useEffect(() => {
+    if (!id || !api) return;
 
     setLoading(true);
     const requestParameters: V1TranscriptGetAudioWaveformRequest = {
@@ -36,11 +38,7 @@ const useWaveform = (api: DefaultApi, id: string): AudioWaveFormResponse => {
         setError(err);
         setErrorState(err);
       });
-  };
-
-  useEffect(() => {
-    getWaveform(id);
-  }, [id]);
+  }, [id, api]);
 
   return { waveform, loading, error };
 };

www/app/[domain]/transcripts/useWebRTC.ts

@@ -5,14 +5,16 @@ import {
   V1TranscriptRecordWebrtcRequest,
 } from "../../api/apis/DefaultApi";
 import { useError } from "../../(errors)/errorContext";
+import getApi from "../../lib/getApi";
 
 const useWebRTC = (
   stream: MediaStream | null,
   transcriptId: string | null,
-  api: DefaultApi,
+  protectedPath,
 ): Peer => {
   const [peer, setPeer] = useState<Peer | null>(null);
   const { setError } = useError();
+  const api = getApi(protectedPath);
 
   useEffect(() => {
     if (!stream || !transcriptId) {
@@ -35,6 +37,7 @@ const useWebRTC = (
     });
 
     p.on("signal", (data: any) => {
+      if (!api) return;
       if ("sdp" in data) {
         const requestParameters: V1TranscriptRecordWebrtcRequest = {
           transcriptId: transcriptId,

www/app/lib/edgeConfig.ts

@@ -3,7 +3,7 @@ import { isDevelopment } from "./utils";
 
 const localConfig = {
   features: {
-    requireLogin: true,
+    requireLogin: false,
     privacy: true,
     browse: true,
   },

www/app/lib/getApi.ts

@@ -2,21 +2,32 @@ import { Configuration } from "../api/runtime";
 import { DefaultApi } from "../api/apis/DefaultApi";
 
 import { useFiefAccessTokenInfo } from "@fief/fief/nextjs/react";
-import { useContext } from "react";
-import { DomainContext } from "../[domain]/domainContext";
+import { useContext, useEffect, useState } from "react";
+import { DomainContext, featureEnabled } from "../[domain]/domainContext";
 
-export default function getApi(): DefaultApi {
+export default function getApi(protectedPath: boolean): DefaultApi | undefined {
   const accessTokenInfo = useFiefAccessTokenInfo();
   const api_url = useContext(DomainContext).api_url;
+  const requireLogin = featureEnabled("requireLogin");
+  const [api, setApi] = useState<DefaultApi>();
+
   if (!api_url) throw new Error("no API URL");
 
-  const apiConfiguration = new Configuration({
-    basePath: api_url,
-    accessToken: accessTokenInfo
-      ? "Bearer " + accessTokenInfo.access_token
-      : undefined,
-  });
-  const api = new DefaultApi(apiConfiguration);
+  useEffect(() => {
+    // console.log('trying auth', protectedPath, requireLogin, accessTokenInfo)
+    if (protectedPath && requireLogin && !accessTokenInfo) {
+      // console.log('waiting auth')
+      return;
+    }
+
+    const apiConfiguration = new Configuration({
+      basePath: api_url,
+      accessToken: accessTokenInfo
+        ? "Bearer " + accessTokenInfo.access_token
+        : undefined,
+    });
+    setApi(new DefaultApi(apiConfiguration));
+  }, [!accessTokenInfo]);
 
   return api;
 }