self-review-fix

This commit is contained in:
Igor Loskutov
2025-09-02 13:04:43 -04:00
parent bdd899774a
commit 11ed585cea
20 changed files with 124 additions and 127 deletions

View File

@@ -98,7 +98,7 @@ export default function FilterSidebar({
<Link
as={NextLink}
href="#"
onClick={() => onFilterChange("live" as SourceKind, "")}
onClick={() => onFilterChange("live", "")}
color={selectedSourceKind === "live" ? "blue.500" : "gray.600"}
_hover={{ color: "blue.300" }}
fontWeight={selectedSourceKind === "live" ? "bold" : "normal"}
@@ -109,7 +109,7 @@ export default function FilterSidebar({
<Link
as={NextLink}
href="#"
onClick={() => onFilterChange("file" as SourceKind, "")}
onClick={() => onFilterChange("file", "")}
color={selectedSourceKind === "file" ? "blue.500" : "gray.600"}
_hover={{ color: "blue.300" }}
fontWeight={selectedSourceKind === "file" ? "bold" : "normal"}

View File

@@ -42,7 +42,7 @@ import Pagination, {
import TranscriptCards from "./_components/TranscriptCards";
import DeleteTranscriptDialog from "./_components/DeleteTranscriptDialog";
import { formatLocalDate } from "../../lib/time";
import { RECORD_A_MEETING_URL } from "../../lib/constants";
import { RECORD_A_MEETING_URL } from "../../api/urls";
const SEARCH_FORM_QUERY_INPUT_NAME = "query" as const;
@@ -298,24 +298,11 @@ export default function TranscriptBrowser() {
};
const handleProcessTranscript = (transcriptId: string) => {
processTranscript.mutate(
{
params: {
path: { transcript_id: transcriptId },
},
processTranscript.mutate({
params: {
path: { transcript_id: transcriptId },
},
{
onSuccess: (result) => {
const status =
result && typeof result === "object" && "status" in result
? (result as { status: string }).status
: undefined;
if (status === "already running") {
// Note: setError is already handled in the hook
}
},
},
);
});
};
const transcriptToDelete = results?.find(

View File

@@ -2,11 +2,9 @@ import { Container, Flex, Link } from "@chakra-ui/react";
import { getConfig } from "../lib/edgeConfig";
import NextLink from "next/link";
import Image from "next/image";
import About from "../(aboutAndPrivacy)/about";
import Privacy from "../(aboutAndPrivacy)/privacy";
import UserInfo from "../(auth)/userInfo";
import AuthWrapper from "./AuthWrapper";
import { RECORD_A_MEETING_URL } from "../lib/constants";
import { RECORD_A_MEETING_URL } from "../api/urls";
export default async function AppLayout({
children,

View File

@@ -35,7 +35,9 @@ import {
const TranscriptCreate = () => {
const isClient = typeof window !== "undefined";
const router = useRouter();
const { isLoading, isAuthenticated } = useSessionStatus();
const status = useSessionStatus();
const isAuthenticated = status === "authenticated";
const isLoading = status === "loading";
const requireLogin = featureEnabled("requireLogin");
const [name, setName] = useState<string>("");

View File

@@ -6,12 +6,11 @@ import RecordPlugin from "../../lib/custom-plugins/record";
import { formatTime, formatTimeMs } from "../../lib/time";
import { waveSurferStyles } from "../../styles/recorder";
import { useError } from "../../(errors)/errorContext";
import FileUploadButton from "./fileUploadButton";
import useWebRTC from "./useWebRTC";
import useAudioDevice from "./useAudioDevice";
import { Box, Flex, IconButton, Menu, RadioGroup } from "@chakra-ui/react";
import { LuScreenShare, LuMic, LuPlay, LuCircleStop } from "react-icons/lu";
import { RECORD_A_MEETING_URL } from "../../lib/constants";
import { RECORD_A_MEETING_URL } from "../../api/urls";
type RecorderProps = {
transcriptId: string;

View File

@@ -43,7 +43,6 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
const [topic, setTopic] = useState<string | undefined>(undefined);
const [includeTopics, setIncludeTopics] = useState(false);
// React Query hooks
const { data: streams = [], isLoading: isLoadingStreams } = useZulipStreams();
const { data: topics = [] } = useZulipTopics(selectedStreamId);
const postToZulipMutation = useTranscriptPostToZulip();

View File

@@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
import { DomainContext } from "../../domainContext";
import { useTranscriptGet } from "../../lib/apiHooks";
import { useSession } from "next-auth/react";
import { assertExtendedToken } from "../../lib/types";
export type Mp3Response = {
media: HTMLMediaElement | null;
@@ -21,9 +22,11 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
const [audioDeleted, setAudioDeleted] = useState<boolean | null>(null);
const { api_url } = useContext(DomainContext);
const { data: session } = useSession();
const accessTokenInfo = (session as any)?.accessToken as string | undefined;
const sessionExtended =
session === null ? null : assertExtendedToken(session);
const accessTokenInfo =
sessionExtended === null ? null : sessionExtended.accessToken;
// Use React Query to fetch transcript metadata
const {
data: transcript,
isLoading: transcriptMetadataLoading,

View File

@@ -1,53 +0,0 @@
// Wrapper for backward compatibility
import type { components } from "../../reflector-api";
type SearchResult = components["schemas"]["SearchResult"];
type SourceKind = components["schemas"]["SourceKind"];
import { useTranscriptsSearch } from "../../lib/apiHooks";
import {
PaginationPage,
paginationPageTo0Based,
} from "../browse/_components/Pagination";
interface SearchFilters {
roomIds: readonly string[] | null;
sourceKind: SourceKind | null;
}
type UseSearchTranscriptsOptions = {
pageSize: number;
page: PaginationPage;
};
interface UseSearchTranscriptsReturn {
results: SearchResult[];
totalCount: number;
isLoading: boolean;
error: unknown;
reload: () => void;
}
export function useSearchTranscripts(
query: string = "",
filters: SearchFilters = { roomIds: null, sourceKind: null },
options: UseSearchTranscriptsOptions = {
pageSize: 20,
page: PaginationPage(1),
},
): UseSearchTranscriptsReturn {
const { pageSize, page } = options;
const { data, isLoading, error, refetch } = useTranscriptsSearch(query, {
limit: pageSize,
offset: paginationPageTo0Based(page) * pageSize,
room_id: filters.roomIds?.[0],
source_kind: filters.sourceKind || undefined,
});
return {
results: data?.results || [],
totalCount: data?.total || 0,
isLoading,
error,
reload: refetch,
};
}

View File

@@ -37,7 +37,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
const [status, setStatus] = useState<Status>({ value: "" });
const { setError } = useError();
const { websocket_url } = useContext(DomainContext);
const { websocket_url: websocketUrl } = useContext(DomainContext);
const queryClient = useQueryClient();
const [accumulatedText, setAccumulatedText] = useState<string>("");
@@ -328,7 +328,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
if (!transcriptId) return;
const url = `${websocket_url}/v1/transcripts/${transcriptId}/events`;
const url = `${websocketUrl}/v1/transcripts/${transcriptId}/events`;
let ws = new WebSocket(url);
ws.onopen = () => {
@@ -489,7 +489,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
return () => {
ws.close();
};
}, [transcriptId, websocket_url, queryClient]);
}, [transcriptId, websocketUrl, queryClient]);
return {
transcriptTextLive,

View File

@@ -4,8 +4,9 @@ import useSessionStatus from "../lib/useSessionStatus";
import { Spinner, Link } from "@chakra-ui/react";
export default function UserInfo() {
const { isLoading, isAuthenticated } = useSessionStatus();
const status = useSessionStatus();
const isLoading = status === "loading";
const isAuthenticated = status === "authenticated";
return isLoading ? (
<Spinner size="xs" className="mx-3" />
) : !isAuthenticated ? (

View File

@@ -1,2 +1 @@
// Application-wide constants
export const RECORD_A_MEETING_URL = "/transcripts/new" as const;

View File

@@ -4,6 +4,7 @@ import { useEffect } from "react";
import { configureApiAuth } from "./apiClient";
import useSessionAccessToken from "./useSessionAccessToken";
// TODO should be context
export function ApiAuthProvider({ children }: { children: React.ReactNode }) {
const { accessToken } = useSessionAccessToken();

View File

@@ -13,7 +13,7 @@ import createFetchClient from "openapi-react-query";
// Create the base openapi-fetch client with a default URL
// The actual URL will be set via middleware in ApiAuthProvider
export const client = createClient<paths>({
baseUrl: "http://127.0.0.1:1250",
baseUrl: "http://192.0.2.1:1250",
});
export const $api = createFetchClient<paths>(client);

View File

@@ -1,7 +1,15 @@
import { AuthOptions } from "next-auth";
import AuthentikProvider from "next-auth/providers/authentik";
import { JWT } from "next-auth/jwt";
import { JWTWithAccessToken, CustomSession } from "./types";
import {
JWTWithAccessToken,
CustomSession,
assertExtendedToken,
} from "./types";
import {
assertExistsAndNonEmptyString,
parseMaybeNonEmptyString,
} from "./utils";
const PRETIMEOUT = 60; // seconds before token expires to refresh it
@@ -15,11 +23,18 @@ const TOKEN_CACHE_TTL = 60 * 60 * 24 * 30 * 1000; // 30 days in milliseconds
// Simple lock mechanism to prevent concurrent token refreshes
const refreshLocks = new Map<string, Promise<JWTWithAccessToken>>();
const CLIENT_ID = assertExistsAndNonEmptyString(
process.env.AUTHENTIK_CLIENT_ID,
);
const CLIENT_SECRET = assertExistsAndNonEmptyString(
process.env.AUTHENTIK_CLIENT_SECRET,
);
export const authOptions: AuthOptions = {
providers: [
AuthentikProvider({
clientId: process.env.AUTHENTIK_CLIENT_ID as string,
clientSecret: process.env.AUTHENTIK_CLIENT_SECRET as string,
clientId: CLIENT_ID,
clientSecret: CLIENT_SECRET,
issuer: process.env.AUTHENTIK_ISSUER,
authorization: {
params: {
@@ -33,23 +48,28 @@ export const authOptions: AuthOptions = {
},
callbacks: {
async jwt({ token, account, user }) {
const extendedToken = token as JWTWithAccessToken;
const extendedToken = assertExtendedToken(token);
const KEY = `token:${token.sub}`;
if (account && user) {
// called only on first login
// XXX account.expires_in used in example is not defined for authentik backend, but expires_at is
const expiresAt = (account.expires_at as number) - PRETIMEOUT;
const jwtToken: JWTWithAccessToken = {
...extendedToken,
accessToken: account.access_token || "",
accessTokenExpires: expiresAt * 1000,
refreshToken: account.refresh_token || "",
};
// Store in memory cache
tokenCache.set(`token:${jwtToken.sub}`, {
token: jwtToken,
timestamp: Date.now(),
});
return jwtToken;
if (!account.access_token) {
tokenCache.delete(KEY);
} else {
const jwtToken: JWTWithAccessToken = {
...extendedToken,
accessToken: account.access_token,
accessTokenExpires: expiresAt * 1000,
refreshToken: account.refresh_token || "",
};
// Store in memory cache
tokenCache.set(`token:${jwtToken.sub}`, {
token: jwtToken,
timestamp: Date.now(),
});
return jwtToken;
}
}
if (Date.now() < extendedToken.accessTokenExpires) {

View File

@@ -1,5 +1,6 @@
import { Session } from "next-auth";
import { JWT } from "next-auth/jwt";
import { parseMaybeNonEmptyString } from "./utils";
export interface JWTWithAccessToken extends JWT {
accessToken: string;
@@ -18,3 +19,28 @@ export interface CustomSession extends Session {
email?: string | null;
};
}
// assumption that JWT is JWTWithAccessToken - not ideal, TODO find a reason we have to do that
export const assertExtendedToken = <T>(
t: T,
): T & {
accessTokenExpires: number;
accessToken: string;
} => {
if (
typeof (t as { accessTokenExpires: any }).accessTokenExpires === "number" &&
!isNaN((t as { accessTokenExpires: any }).accessTokenExpires) &&
typeof (
t as {
accessToken: any;
}
).accessToken === "string" &&
parseMaybeNonEmptyString((t as { accessToken: any }).accessToken) !== null
) {
return t as T & {
accessTokenExpires: number;
accessToken: string;
};
}
throw new Error("Token is not extended with access token");
};

View File

@@ -10,13 +10,16 @@ import { isAuthConfigured } from "./apiClient";
* Prevents race conditions where React Query fires requests before the token is set.
*/
export default function useAuthReady() {
const { status, isAuthenticated } = useSessionStatus();
const status = useSessionStatus();
const isAuthenticated = status === "authenticated";
const [authReady, setAuthReady] = useState(false);
useEffect(() => {
let ready_ = false;
// Check if both session is authenticated and token is configured
const checkAuthReady = () => {
const ready = isAuthenticated && isAuthConfigured();
ready_ = ready;
setAuthReady(ready);
};
@@ -27,7 +30,14 @@ export default function useAuthReady() {
const interval = setInterval(checkAuthReady, 100);
// Stop checking after 2 seconds (auth should be ready by then)
const timeout = setTimeout(() => clearInterval(interval), 2000);
const timeout = setTimeout(() => {
if (ready_) {
clearInterval(interval);
return;
} else {
console.warn("Auth not ready after 2 seconds");
}
}, 2000);
return () => {
clearInterval(interval);

View File

@@ -1,22 +1,8 @@
"use client";
import { useState, useEffect } from "react";
import { useSession as useNextAuthSession } from "next-auth/react";
import { Session } from "next-auth";
export default function useSessionStatus() {
const { status: naStatus } = useNextAuthSession();
const [status, setStatus] = useState<typeof naStatus>("loading");
useEffect(() => {
if (naStatus !== "loading" && naStatus !== status) {
setStatus(naStatus);
}
}, [naStatus]);
return {
status,
isLoading: status === "loading",
isAuthenticated: status === "authenticated",
};
const { status } = useNextAuthSession();
return status;
}

View File

@@ -137,9 +137,28 @@ export function extractDomain(url) {
}
}
export function assertExists<T>(value: T | null | undefined, err?: string): T {
export type NonEmptyString = string & { __brand: "NonEmptyString" };
export const parseMaybeNonEmptyString = (
s: string,
trim = true,
): NonEmptyString | null => {
s = trim ? s.trim() : s;
return s.length > 0 ? (s as NonEmptyString) : null;
};
export const parseNonEmptyString = (s: string, trim = true): NonEmptyString =>
assertExists(parseMaybeNonEmptyString(s, trim), "Expected non-empty string");
export const assertExists = <T>(
value: T | null | undefined,
err?: string,
): T => {
if (value === null || value === undefined) {
throw new Error(`Assertion failed: ${err ?? "value is null or undefined"}`);
}
return value;
}
};
export const assertExistsAndNonEmptyString = (
value: string | null | undefined,
): NonEmptyString =>
parseNonEmptyString(assertExists(value, "Expected non-empty string"));

View File

@@ -1,6 +1,6 @@
"use client";
import { redirect } from "next/navigation";
import { RECORD_A_MEETING_URL } from "./lib/constants";
import { RECORD_A_MEETING_URL } from "./api/urls";
export default function Index() {
redirect(RECORD_A_MEETING_URL);

View File

@@ -1,4 +1,4 @@
let authToken = ""; // Variable to store the token
let authToken = null;
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SET_AUTH_TOKEN") {