Add auth screens (#193)

skyvern-frontend/src/api/AxiosClient.ts

@@ -1,11 +1,11 @@
-import { apiBaseUrl, artifactApiBaseUrl, credential } from "@/util/env";
+import { apiBaseUrl, artifactApiBaseUrl, envCredential } from "@/util/env";
 import axios from "axios";
 
 const client = axios.create({
   baseURL: apiBaseUrl,
   headers: {
     "Content-Type": "application/json",
-    "x-api-key": credential,
+    "x-api-key": envCredential,
   },
 });
 
@@ -13,4 +13,20 @@ const artifactApiClient = axios.create({
   baseURL: artifactApiBaseUrl,
 });
 
+export function setAuthorizationHeader(token: string) {
+  client.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+}
+
+export function removeAuthorizationHeader() {
+  delete client.defaults.headers.common["Authorization"];
+}
+
+export function setApiKeyHeader(apiKey: string) {
+  client.defaults.headers.common["X-API-Key"] = apiKey;
+}
+
+export function removeApiKeyHeader() {
+  delete client.defaults.headers.common["X-API-Key"];
+}
+
 export { client, artifactApiClient };

skyvern-frontend/src/api/types.ts

@@ -75,3 +75,7 @@ export type TaskApiResponse = {
   failure_reason: string | null;
   errors: unknown[];
 };
+
+export type User = {
+  name: string;
+};

skyvern-frontend/src/routes/root/Profile.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button";
+import { ExitIcon, PersonIcon } from "@radix-ui/react-icons";
+
+type Props = {
+  name: string;
+  onLogout?: () => void;
+};
+
+function Profile({ name, onLogout }: Props) {
+  return (
+    <div className="flex items-center border-2 p-2 rounded-lg">
+      <div className="flex gap-2 items-center">
+        <PersonIcon className="h-4 w-4" />
+        <p className="w-40 overflow-hidden text-ellipsis">{name}</p>
+      </div>
+      <div>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => {
+            onLogout?.();
+          }}
+        >
+          <ExitIcon className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { Profile };

skyvern-frontend/src/routes/root/RootLayout.tsx

@@ -4,8 +4,17 @@ import { SideNav } from "./SideNav";
 import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
 import { Logo } from "@/components/Logo";
 import { ThemeToggle } from "@/components/ThemeSwitch";
+import { Profile } from "./Profile";
+import { useContext } from "react";
+import { UserContext } from "@/store/UserContext";
+
+type Props = {
+  onLogout?: () => void;
+};
+
+function RootLayout({ onLogout }: Props) {
+  const user = useContext(UserContext);
 
-function RootLayout() {
   return (
     <>
       <div className="w-full h-full px-4">
@@ -20,6 +29,11 @@ function RootLayout() {
             </div>
           </Link>
           <SideNav />
+          {user ? (
+            <div className="absolute bottom-2 left-0 w-72 px-6 shrink-0">
+              <Profile name={user.name} onLogout={onLogout} />
+            </div>
+          ) : null}
         </aside>
         <div className="pl-72 h-24 flex justify-end items-center px-6 gap-4">
           <Link

skyvern-frontend/src/store/UserContext.ts

@@ -0,0 +1,6 @@
+import { User } from "@/api/types";
+import { createContext } from "react";
+
+const UserContext = createContext<User | null>(null);
+
+export { UserContext };

skyvern-frontend/src/util/env.ts

@@ -10,16 +10,13 @@ if (!environment) {
   console.error("environment environment variable was not set");
 }
 
-const credential = import.meta.env.VITE_API_CREDENTIAL as string;
+const envCredential: string | null =
+  import.meta.env.VITE_API_CREDENTIAL ?? null;
 
-if (!credential) {
+const artifactApiBaseUrl = import.meta.env.VITE_ARTIFACT_API_BASE_URL;
-  console.error("credential environment variable was not set");
-}
-
-const artifactApiBaseUrl = import.meta.env.VITE_ARTIFACT_API_BASE_URL as string;
 
 if (!artifactApiBaseUrl) {
   console.error("artifactApiBaseUrl environment variable was not set");
 }
 
-export { apiBaseUrl, environment, credential, artifactApiBaseUrl };
+export { apiBaseUrl, environment, envCredential, artifactApiBaseUrl };