feat(engine): ask for token when unauth

Author: jog1t

frontend/package.json

@@ -50,8 +50,7 @@
 		"@radix-ui/react-tooltip": "^1.1.1",
 		"@radix-ui/react-visually-hidden": "^1.0.3",
 		"@rivet-gg/icons": "file:./vendor/rivet-icons.tgz",
-		"@rivetkit/actor": "file:./vendor/rivetkit-actor.tgz",
-		"@rivetkit/core": "file:./vendor/rivetkit-core.tgz",
+		"rivetkit": "*",
 		"@rivetkit/engine-api-full": "workspace:*",
 		"@sentry/react": "^8.26.0",
 		"@sentry/vite-plugin": "^2.22.2",

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,82 @@
+import * as EngineCredentialsForm from "@/app/forms/engine-credentials-form";
+import {
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	Flex,
+	getConfig,
+	ls,
+	toast,
+} from "@/components";
+import type { DialogContentProps } from "@/components/actors/hooks";
+import { queryClient } from "@/queries/global";
+import { createClient } from "@/queries/manager-engine";
+
+interface ProvideEngineCredentialsDialogContentProps
+	extends DialogContentProps {}
+
+export default function ProvideEngineCredentialsDialogContent({
+	onClose,
+}: ProvideEngineCredentialsDialogContentProps) {
+	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();
+
+					ls.engineCredentials.set(getConfig().apiUrl, values.token);
+
+					toast.success(
+						"Successfully authenticated with Rivet Engine",
+					);
+
+					await queryClient.refetchQueries();
+
+					onClose?.();
+				} 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/actors/actor-context.tsx

@@ -1,4 +1,4 @@
 export {
 	createActorInspectorClient,
 	createManagerInspectorClient,
-} from "@rivetkit/core/inspector";
+} from "rivetkit/inspector";

frontend/src/components/actors/actor-events-list.tsx

@@ -6,10 +6,10 @@ import {
 	faUnlink,
 	Icon,
 } from "@rivet-gg/icons";
-import type { RecordedRealtimeEvent } from "@rivetkit/core/inspector";
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
 import { type PropsWithChildren, useEffect, useRef } from "react";
+import type { RecordedRealtimeEvent } from "rivetkit/inspector";
 import { Badge } from "../ui/badge";
 import { useActor } from "./actor-queries-context";
 import { ActorObjectInspector } from "./console/actor-inspector";

frontend/src/components/actors/actor-queries-context.tsx

@@ -1,6 +1,6 @@
-import { createActorInspectorClient } from "@rivetkit/core/inspector";
 import { queryOptions } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
+import { createActorInspectorClient } from "rivetkit/inspector";
 import type { ActorId } from "./queries";
 
 type RequestOptions = Parameters<typeof createActorInspectorClient>[1];

frontend/src/components/actors/database/database-table.tsx

@@ -5,7 +5,6 @@ import {
 	faLink,
 	Icon,
 } from "@rivet-gg/icons";
-import type { Column, Columns, ForeignKeys } from "@rivetkit/core/inspector";
 import {
 	createColumnHelper,
 	// SortingState,
@@ -19,6 +18,7 @@ import {
 	useReactTable as useTable,
 } from "@tanstack/react-table";
 import { Fragment, useMemo, useState } from "react";
+import type { Column, Columns, ForeignKeys } from "rivetkit/inspector";
 import {
 	Badge,
 	Button,

frontend/src/components/actors/guard-connectable-inspector.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/queries/manager-engine";
 import { DiscreteCopyButton } from "../copy-area";
 import { getConfig } from "../lib/config";
+import { ls } from "../lib/utils";
 import { Button } from "../ui/button";
 import { useFiltersValue } from "./actor-filters-context";
 import { ActorProvider } from "./actor-queries-context";
@@ -157,6 +158,7 @@ function useActorEngineContext({ actorId }: { actorId: ActorId }) {
 		return createInspectorActorContext({
 			url: getConfig().apiUrl,
 			token: (runner?.metadata?.inspectorToken as string) || "",
+			engineToken: ls.engineCredentials.get(getConfig().apiUrl) || "",
 		});
 	}, [runner?.metadata?.inspectorToken]);