FE Auth vendor changes (#270)

skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx

@@ -1,4 +1,4 @@
-import { client } from "@/api/AxiosClient";
+import { getClient } from "@/api/AxiosClient";
 import {
   ArtifactApiResponse,
   ArtifactType,
@@ -16,6 +16,7 @@ import { TextArtifact } from "./TextArtifact";
 import { getImageURL } from "./artifactUtils";
 import { Input } from "@/components/ui/input";
 import { basicTimeFormat } from "@/util/timeFormat";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 
 type Props = {
   id: string;
@@ -24,6 +25,7 @@ type Props = {
 
 function StepArtifacts({ id, stepProps }: Props) {
   const { taskId } = useParams();
+  const credentialGetter = useCredentialGetter();
   const {
     data: artifacts,
     isFetching,
@@ -32,6 +34,7 @@ function StepArtifacts({ id, stepProps }: Props) {
   } = useQuery<Array<ArtifactApiResponse>>({
     queryKey: ["task", taskId, "steps", id, "artifacts"],
     queryFn: async () => {
+      const client = await getClient(credentialGetter);
       return client
         .get(`/tasks/${taskId}/steps/${id}/artifacts`)
         .then((response) => response.data);

skyvern-frontend/src/routes/tasks/detail/StepArtifactsLayout.tsx

@@ -4,10 +4,12 @@ import { StepArtifacts } from "./StepArtifacts";
 import { useQuery } from "@tanstack/react-query";
 import { StepApiResponse } from "@/api/types";
 import { useParams } from "react-router-dom";
-import { client } from "@/api/AxiosClient";
+import { getClient } from "@/api/AxiosClient";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 
 function StepArtifactsLayout() {
   const [activeIndex, setActiveIndex] = useState(0);
+  const credentialGetter = useCredentialGetter();
   const { taskId } = useParams();
 
   const {
@@ -17,6 +19,7 @@ function StepArtifactsLayout() {
   } = useQuery<Array<StepApiResponse>>({
     queryKey: ["task", taskId, "steps"],
     queryFn: async () => {
+      const client = await getClient(credentialGetter);
       return client
         .get(`/tasks/${taskId}/steps`)
         .then((response) => response.data);

skyvern-frontend/src/routes/tasks/detail/StepNavigation.tsx

@@ -1,10 +1,11 @@
-import { client } from "@/api/AxiosClient";
+import { getClient } from "@/api/AxiosClient";
 import { StepApiResponse } from "@/api/types";
 import { cn } from "@/util/utils";
 import { useQuery } from "@tanstack/react-query";
 import { useParams, useSearchParams } from "react-router-dom";
 import { PAGE_SIZE } from "../constants";
 import { CheckboxIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 
 type Props = {
   activeIndex: number;
@@ -15,6 +16,7 @@ function StepNavigation({ activeIndex, onActiveIndexChange }: Props) {
   const { taskId } = useParams();
   const [searchParams] = useSearchParams();
   const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
+  const credentialGetter = useCredentialGetter();
 
   const {
     data: steps,
@@ -23,6 +25,7 @@ function StepNavigation({ activeIndex, onActiveIndexChange }: Props) {
   } = useQuery<Array<StepApiResponse>>({
     queryKey: ["task", taskId, "steps", page],
     queryFn: async () => {
+      const client = await getClient(credentialGetter);
       return client
         .get(`/tasks/${taskId}/steps`, {
           params: {

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -1,4 +1,4 @@
-import { client } from "@/api/AxiosClient";
+import { getClient } from "@/api/AxiosClient";
 import { Status, TaskApiResponse } from "@/api/types";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -20,9 +20,11 @@ import {
 } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Separator } from "@/components/ui/separator";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 
 function TaskDetails() {
   const { taskId } = useParams();
+  const credentialGetter = useCredentialGetter();
 
   const {
     data: task,
@@ -32,6 +34,7 @@ function TaskDetails() {
   } = useQuery<TaskApiResponse>({
     queryKey: ["task", taskId, "details"],
     queryFn: async () => {
+      const client = await getClient(credentialGetter);
       return client.get(`/tasks/${taskId}`).then((response) => response.data);
     },
     refetchInterval: (query) => {