endpoint to get and update onepassword token (#3089)

skyvern-frontend/src/api/types.ts

@@ -175,6 +175,24 @@ export type ApiKeyApiResponse = {
   valid: boolean;
 };
 
+export type OnePasswordTokenApiResponse = {
+  id: string;
+  organization_id: string;
+  token: string;
+  created_at: string;
+  modified_at: string;
+  token_type: string;
+  valid: boolean;
+};
+
+export type CreateOnePasswordTokenRequest = {
+  token: string;
+};
+
+export type CreateOnePasswordTokenResponse = {
+  token: OnePasswordTokenApiResponse;
+};
+
 // TODO complete this
 export const ActionTypes = {
   InputText: "input_text",

skyvern-frontend/src/components/OnePasswordTokenForm.tsx

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useOnePasswordToken } from "@/hooks/useOnePasswordToken";
+import { EyeOpenIcon, EyeClosedIcon } from "@radix-ui/react-icons";
+
+const formSchema = z.object({
+  token: z.string().min(1, "1Password token is required"),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export function OnePasswordTokenForm() {
+  const [showToken, setShowToken] = useState(false);
+  const { onePasswordToken, isLoading, createOrUpdateToken, isUpdating } =
+    useOnePasswordToken();
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      token: onePasswordToken?.token || "",
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    createOrUpdateToken(data);
+  };
+
+  const toggleTokenVisibility = () => {
+    setShowToken(!showToken);
+  };
+
+  // Update form when token data loads
+  if (
+    onePasswordToken?.token &&
+    form.getValues("token") !== onePasswordToken.token
+  ) {
+    form.setValue("token", onePasswordToken.token);
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium">
+            1Password Service Account Token
+          </h3>
+          <p className="text-sm text-muted-foreground">
+            Configure your 1Password service account token for credential
+            management.
+          </p>
+        </div>
+        {onePasswordToken && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">Status:</span>
+            <span
+              className={`text-sm ${onePasswordToken.valid ? "text-green-600" : "text-red-600"}`}
+            >
+              {onePasswordToken.valid ? "Active" : "Inactive"}
+            </span>
+          </div>
+        )}
+      </div>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="token"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Service Account Token</FormLabel>
+                <div className="relative">
+                  <FormControl>
+                    <Input
+                      {...field}
+                      type={showToken ? "text" : "password"}
+                      placeholder="op_1234567890abcdef"
+                      disabled={isLoading || isUpdating}
+                    />
+                  </FormControl>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                    onClick={toggleTokenVisibility}
+                    disabled={isLoading || isUpdating}
+                  >
+                    {showToken ? (
+                      <EyeClosedIcon className="h-4 w-4" />
+                    ) : (
+                      <EyeOpenIcon className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex items-center gap-4">
+            <Button type="submit" disabled={isLoading || isUpdating}>
+              {isUpdating ? "Updating..." : "Update Token"}
+            </Button>
+            {onePasswordToken && (
+              <div className="text-sm text-muted-foreground">
+                Last updated:{" "}
+                {new Date(onePasswordToken.modified_at).toLocaleDateString()}
+              </div>
+            )}
+          </div>
+        </form>
+      </Form>
+
+      {onePasswordToken && (
+        <div className="rounded-md bg-muted p-4">
+          <h4 className="mb-2 text-sm font-medium">Token Information</h4>
+          <div className="space-y-1 text-sm text-muted-foreground">
+            <div>ID: {onePasswordToken.id}</div>
+            <div>Type: {onePasswordToken.token_type}</div>
+            <div>
+              Created:{" "}
+              {new Date(onePasswordToken.created_at).toLocaleDateString()}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

skyvern-frontend/src/hooks/useOnePasswordToken.ts

@@ -0,0 +1,62 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getClient } from "@/api/AxiosClient";
+import { useCredentialGetter } from "./useCredentialGetter";
+import {
+  CreateOnePasswordTokenRequest,
+  CreateOnePasswordTokenResponse,
+  OnePasswordTokenApiResponse,
+} from "@/api/types";
+import { useToast } from "@/components/ui/use-toast";
+
+export function useOnePasswordToken() {
+  const credentialGetter = useCredentialGetter();
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  const { data: onePasswordToken, isLoading } =
+    useQuery<OnePasswordTokenApiResponse>({
+      queryKey: ["onePasswordToken"],
+      queryFn: async () => {
+        const client = await getClient(credentialGetter);
+        return await client
+          .get("/auth-tokens/onepassword")
+          .then((response) => response.data.token)
+          .catch(() => null);
+      },
+    });
+
+  const createOrUpdateTokenMutation = useMutation({
+    mutationFn: async (data: CreateOnePasswordTokenRequest) => {
+      const client = await getClient(credentialGetter);
+      return await client
+        .post("/auth-tokens/onepassword", data)
+        .then((response) => response.data as CreateOnePasswordTokenResponse);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["onePasswordToken"] });
+      toast({
+        title: "Success",
+        description: "1Password service account token updated successfully",
+      });
+    },
+    onError: (error: unknown) => {
+      const message =
+        (error as { response?: { data?: { detail?: string } } })?.response?.data
+          ?.detail ||
+        (error as Error)?.message ||
+        "Failed to update 1Password token";
+      toast({
+        title: "Error",
+        description: message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  return {
+    onePasswordToken,
+    isLoading,
+    createOrUpdateToken: createOrUpdateTokenMutation.mutate,
+    isUpdating: createOrUpdateTokenMutation.isPending,
+  };
+}

skyvern-frontend/src/routes/settings/Settings.tsx

@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/card";
 import { envCredential } from "@/util/env";
 import { HiddenCopyableInput } from "@/components/ui/hidden-copyable-input";
+import { OnePasswordTokenForm } from "@/components/OnePasswordTokenForm";
 
 function Settings() {
   const { environment, organization, setEnvironment, setOrganization } =
@@ -67,6 +68,25 @@ function Settings() {
           <HiddenCopyableInput value={apiKey ?? "API key not found"} />
         </CardContent>
       </Card>
+      <Card>
+        <CardHeader className="border-b-2">
+          <CardTitle className="text-lg">1Password Integration</CardTitle>
+          <CardDescription>
+            Manage your 1Password service account token.{" "}
+            <a
+              href="https://developer.1password.com/docs/service-accounts/get-started/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 underline"
+            >
+              Learn how to create a service account and get your token.
+            </a>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="p-8">
+          <OnePasswordTokenForm />
+        </CardContent>
+      </Card>
     </div>
   );
 }