feat(engine): ask for token when unauth

Author: jog1t

frontend/src/app.tsx

@@ -22,6 +22,14 @@ declare module "@tanstack/react-router" {
 	}
 }
 
+declare module "@tanstack/react-query" {
+	interface Register {
+		queryMeta: {
+			mightRequireAuth?: boolean;
+		};
+	}
+}
+
 export const router = createRouter({
 	basepath: import.meta.env.BASE_URL,
 	routeTree,

frontend/src/app/dialogs/provide-engine-credentials-dialog.tsx

@@ -0,0 +1,76 @@
+import * as EngineCredentialsForm from "@/app/forms/engine-credentials-form";
+import {
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	Flex,
+	getConfig,
+	ls,
+	toast,
+} from "@/components";
+import { queryClient } from "@/queries/global";
+import { createClient } from "@/queries/manager-engine";
+
+export default function ProvideEngineCredentialsDialogContent() {
+	return (
+		<EngineCredentialsForm.Form
+			defaultValues={{ token: "" }}
+			errors={
+				ls.engineCredentials.get(getConfig().apiUrl)
+					? { token: { message: "Invalid token.", type: "manual" } }
+					: {}
+			}
+			onSubmit={async (values, form) => {
+				const client = createClient({
+					token: values.token,
+				});
+
+				try {
+					await client.namespaces.list();
+
+					await queryClient.invalidateQueries({
+						refetchType: "active",
+					});
+
+					ls.engineCredentials.set(getConfig().apiUrl, values.token);
+
+					toast.success(
+						"Successfully authenticated with Rivet Engine",
+					);
+				} catch (e) {
+					if (e && typeof e === "object" && "statusCode" in e) {
+						if (e.statusCode === 403) {
+							form.setError("token", {
+								message: "Invalid token.",
+							});
+							return;
+						}
+					}
+
+					form.setError("token", {
+						message: "Failed to connect. Please try again.",
+					});
+					return;
+				}
+			}}
+		>
+			<DialogHeader>
+				<DialogTitle>Missing Rivet Engine credentials</DialogTitle>
+				<DialogDescription>
+					It looks like the instance of Rivet Engine that you're
+					connected to requires additional credentials, please provide
+					them below.
+				</DialogDescription>
+			</DialogHeader>
+			<Flex gap="4" direction="col">
+				<EngineCredentialsForm.Token />
+			</Flex>
+			<DialogFooter>
+				<EngineCredentialsForm.Submit type="submit" allowPristine>
+					Save
+				</EngineCredentialsForm.Submit>
+			</DialogFooter>
+		</EngineCredentialsForm.Form>
+	);
+}

frontend/src/app/forms/engine-credentials-form.tsx

@@ -0,0 +1,47 @@
+import { type UseFormReturn, useFormContext } from "react-hook-form";
+import z from "zod";
+import {
+	createSchemaForm,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	Input,
+} from "@/components";
+
+export const formSchema = z.object({
+	token: z.string().nonempty("Token is required"),
+});
+
+export type FormValues = z.infer<typeof formSchema>;
+export type SubmitHandler = (
+	values: FormValues,
+	form: UseFormReturn<FormValues>,
+) => Promise<void>;
+
+const { Form, Submit, SetValue } = createSchemaForm(formSchema);
+export { Form, Submit, SetValue };
+
+export const Token = ({ className }: { className?: string }) => {
+	const { control } = useFormContext<FormValues>();
+	return (
+		<FormField
+			control={control}
+			name="token"
+			render={({ field }) => (
+				<FormItem className={className}>
+					<FormLabel className="col-span-1">Token</FormLabel>
+					<FormControl className="row-start-2">
+						<Input
+							placeholder="Enter a token..."
+							type="password"
+							{...field}
+						/>
+					</FormControl>
+					<FormMessage className="col-span-1" />
+				</FormItem>
+			)}
+		/>
+	);
+};

frontend/src/app/use-dialog.tsx

@@ -1,9 +1,14 @@
-import { createDialogHook, useDialog } from "@/components/actors";
+import {
+	useDialog as baseUseDialog,
+	createDialogHook,
+} from "@/components/actors";
 
-const d = useDialog as typeof useDialog &
-	Record<string, ReturnType<typeof createDialogHook>>;
-d.CreateNamespace = createDialogHook(
-	import("@/app/dialogs/create-namespace-dialog"),
-);
-
-export { d as useDialog };
+export const useDialog = {
+	...baseUseDialog,
+	CreateNamespace: createDialogHook(
+		import("@/app/dialogs/create-namespace-dialog"),
+	),
+	ProvideEngineCredentials: createDialogHook(
+		import("@/app/dialogs/provide-engine-credentials-dialog"),
+	),
+};

frontend/src/components/lib/create-schema-form.tsx

@@ -6,6 +6,7 @@ import {
 	type FieldPath,
 	type FieldValues,
 	type PathValue,
+	type UseFormProps,
 	type UseFormReturn,
 	useForm,
 	useFormContext,
@@ -18,6 +19,7 @@ interface FormProps<FormValues extends FieldValues>
 	extends Omit<ComponentProps<"form">, "onSubmit"> {
 	onSubmit: SubmitHandler<FormValues>;
 	defaultValues: DefaultValues<FormValues>;
+	errors?: UseFormProps<FormValues>["errors"];
 	values?: FormValues;
 	children: ReactNode;
 }
@@ -36,13 +38,15 @@ export const createSchemaForm = <Schema extends z.ZodSchema>(
 			values,
 			children,
 			onSubmit,
+			errors,
 			...props
 		}: FormProps<z.TypeOf<Schema>>) => {
 			const form = useForm<z.TypeOf<Schema>>({
 				reValidateMode: "onSubmit",
 				resolver: zodResolver(schema),
 				defaultValues,
 				values,
+				errors,
 			});
 			return (
 				<Form {...form}>

frontend/src/components/lib/utils.ts

@@ -1,4 +1,5 @@
 import { type ClassValue, clsx } from "clsx";
+import { set } from "lodash";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
@@ -23,6 +24,21 @@ export const ls = {
 	clear: () => {
 		localStorage.clear();
 	},
+	engineCredentials: {
+		set: (url: string, token: string) => {
+			ls.set(
+				`engine-credentials-${JSON.stringify(url)}`,
+				JSON.stringify({ token }),
+			);
+		},
+		get: (url: string) => {
+			const value = ls.get(`engine-credentials-${JSON.stringify(url)}`);
+			if (value && typeof value === "object" && "token" in value) {
+				return (value as { token: string }).token;
+			}
+			return null;
+		},
+	},
 	actorsList: {
 		set: (width: number, folded: boolean) => {
 			ls.set("actors-list-preview-width", width);

frontend/src/components/modal-renderer.tsx

@@ -0,0 +1,45 @@
+"use client";
+import { useDialog } from "@/app/use-dialog";
+import { modalActions, useOpenModal } from "@/stores/modal-store";
+
+export function ModalRenderer() {
+	const openModal = useOpenModal();
+
+	if (!openModal) {
+		return null;
+	}
+
+	const DialogComponent = getDialogComponent(openModal.dialogKey);
+	if (!DialogComponent) {
+		console.warn(
+			`Dialog component not found for key: ${openModal.dialogKey}`,
+		);
+		return null;
+	}
+
+	return (
+		<DialogComponent
+			{...(openModal.props || {})}
+			dialogProps={{
+				open: true,
+				onOpenChange: (open: boolean) => {
+					if (!open) {
+						modalActions.closeModal();
+					}
+				},
+			}}
+		/>
+	);
+}
+
+function getDialogComponent(dialogKey: string) {
+	const dialogs = useDialog;
+	const dialog = dialogs[dialogKey];
+
+	if (!dialog || typeof dialog !== "function") {
+		return null;
+	}
+
+	// Access the Dialog component from the hook
+	return dialog.Dialog;
+}

frontend/src/queries/global.ts

@@ -1,7 +1,19 @@
 import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
 import { toast } from "@/components";
+import { modal } from "@/utils/modal-utils";
 
-const queryCache = new QueryCache();
+const queryCache = new QueryCache({
+	onError(error, query) {
+		if (
+			query.meta?.mightRequireAuth &&
+			"statusCode" in error &&
+			error.statusCode === 403
+		) {
+			modal.open("ProvideEngineCredentials");
+			return;
+		}
+	},
+});
 
 const mutationCache = new MutationCache({
 	onError(error, variables, context, mutation) {