feat: self healing skyvern api key (#3614)

Co-authored-by: Suchintan <suchintan@users.noreply.github.com>
Co-authored-by: Shuchang Zheng <wintonzheng0325@gmail.com>

skyvern-frontend/src/hooks/useApiCredential.ts

@@ -1,12 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 import { useCredentialGetter } from "./useCredentialGetter";
 import { getClient } from "@/api/AxiosClient";
-import { envCredential } from "@/util/env";
+import { getRuntimeApiKey } from "@/util/env";
 import { ApiKeyApiResponse, OrganizationApiResponse } from "@/api/types";
 
 function useApiCredential() {
   const credentialGetter = useCredentialGetter();
-  const credentialsFromEnv = envCredential;
+  const credentialsFromEnv = getRuntimeApiKey();
 
   const { data: organizations } = useQuery<Array<OrganizationApiResponse>>({
     queryKey: ["organizations"],
@@ -16,7 +16,7 @@ function useApiCredential() {
         .get("/organizations/")
         .then((response) => response.data.organizations);
     },
-    enabled: envCredential === null,
+    enabled: credentialsFromEnv === null,
   });
 
   const organization = organizations?.[0];

skyvern-frontend/src/hooks/useAuthDiagnostics.ts

@@ -0,0 +1,46 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+import { getClient } from "@/api/AxiosClient";
+
+export type AuthStatusValue =
+  | "missing_env"
+  | "invalid_format"
+  | "invalid"
+  | "expired"
+  | "not_found"
+  | "ok";
+
+export type AuthDiagnosticsResponse = {
+  status: AuthStatusValue;
+  fingerprint?: string;
+  organization_id?: string;
+  expires_at?: number;
+  api_key?: string;
+};
+
+async function fetchDiagnostics(): Promise<AuthDiagnosticsResponse> {
+  const client = await getClient(null);
+  try {
+    const response = await client.get<AuthDiagnosticsResponse>(
+      "/internal/auth/status",
+    );
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response?.status === 404) {
+      return { status: "ok" };
+    }
+    throw error;
+  }
+}
+
+function useAuthDiagnostics() {
+  return useQuery<AuthDiagnosticsResponse, Error>({
+    queryKey: ["internal", "auth", "status"],
+    queryFn: fetchDiagnostics,
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+}
+
+export { useAuthDiagnostics };