Adds authentication guard + redirects to login in local mode

This is generally a no-op, but it is nice to have for the local
authenticated version. A bit of a hack, but this is really just a quick
way to get something up and running. In the medium term we will be
changing the way we do auth to be more unified.

ui/backend/server/commands.py

@@ -126,7 +126,6 @@ def run(
             env = {**_load_env(config_file), **env}
         with set_env_variables(env):
             settings_file_param = f"--settings={settings_file.value}"
-            # execute_from_command_line(["manage.py", "collectstatic", settings_file_param])
             if not no_migration:
                 execute_from_command_line(["manage.py", "migrate", settings_file_param])
             execute_from_command_line(

ui/frontend/src/auth/Login.tsx

@@ -13,33 +13,51 @@ export const UserContext = createContext<UserContextType | undefined>(
   undefined
 );
 
+
 export const LocalLoginProvider = (props: { children: React.ReactNode }) => {
   const [localUsername, setLocalUsername] = useState<string>("");
+  const [localAPIKey, setLocalAPIKey] = useState<string | undefined>("");
   const [keyInputExpanded, setKeyInputExpanded] = useState(false);
 
   const [username, setUsername] = useLocalStorage(
     "hamilton-username",
     undefined
   );
   const [apiKey, setApiKey] = useLocalStorage("hamilton-api-key", undefined);
-
-  if (username) {
+  const [authed, setAuthed] = useLocalStorage("authed", "false");
+  if (authed === "true") {
     return (
       <UserContext.Provider
-        value={{ username, setUsername, userAPIKey: apiKey }}
+        value={{ username: username || "", setUsername, userAPIKey: apiKey }}
       >
-        {props.children}
+       {props.children}
       </UserContext.Provider>
     );
   }
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setLocalUsername(event.target.value);
-  };
-
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setUsername(localUsername); // Store username
+    if (authed != "true") {
+      const results = fetch("/api/v1/phone_home", {
+        method: "GET",
+        headers: {
+          "x-api-key": localAPIKey || "",
+          "x-api-user": localUsername || "",
+        },
+      });
+      results.then((response) => {
+        if (response.status !== 200) {
+          setUsername(undefined);
+          setApiKey(undefined);
+          setAuthed("false");
+        }
+        else {
+          setAuthed("true");
+          setUsername(localUsername); // Store username
+          setApiKey(localAPIKey); // Store API key
+        }
+      });
+    }
   };
 
   const KeyInputExpandIcon = keyInputExpanded ? HiChevronUp : HiChevronDown;
@@ -58,8 +76,8 @@ export const LocalLoginProvider = (props: { children: React.ReactNode }) => {
               type="text"
               autoComplete="username"
               name="username"
-              value={username}
-              onChange={handleChange}
+              value={localUsername}
+              onChange={(event) => setLocalUsername(event.target.value)}
               placeholder="Username"
               required
               className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-dwdarkblue focus:border-dwdarkblue focus:z-10 sm:text-sm"
@@ -70,25 +88,14 @@ export const LocalLoginProvider = (props: { children: React.ReactNode }) => {
               type="password"
               autoComplete="api-key"
               name="api-key"
-              value={apiKey || ""}
+              value={localAPIKey}
               onChange={(event) => {
-                setApiKey(event.target.value);
+                setLocalAPIKey(event.target.value);
               }}
-              placeholder="API Key (power-user-mode)"
-              required
+              placeholder="API Key (leave blank for local mode)"
               className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-dwdarkblue focus:border-dwdarkblue focus:z-10 sm:text-sm"
             />
           )}
-          {/* <input
-            type="text"
-            autoComplete="username"
-            name="username"
-            value={username}
-            onChange={handleChange}
-            placeholder="Username"
-            required
-            className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-dwdarkblue focus:border-dwdarkblue focus:z-10 sm:text-sm"
-          /> */}
           <button
             type="submit"
             className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-dwdarkblue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-dwdarkblue`}
@@ -112,6 +119,7 @@ export const LocalLoginProvider = (props: { children: React.ReactNode }) => {
 export const localLogout = (redirectOnLogin: boolean) => {
   localStorage.removeItem("hamilton-username");
   localStorage.removeItem("hamilton-api-key");
+  localStorage.removeItem("authed");
   if (redirectOnLogin) {
     window.location.reload();
   }

ui/frontend/src/index.tsx

@@ -41,22 +41,22 @@ const TelemetryProvider =
 
 root.render(
   // <React.StrictMode>
-  <AuthProvider
-    authUrl={process.env.REACT_APP_AUTH_URL as string}
-    displayWhileLoading={<Loading />}
-    displayIfLoggedOut={<RedirectToLogin />}
-  >
-    <Provider store={store}>
-      <PersistGate loading={<Loading />} persistor={persistor}>
+  <Provider store={store}>
+    <PersistGate loading={<Loading />} persistor={persistor}>
+      <AuthProvider
+        authUrl={process.env.REACT_APP_AUTH_URL as string}
+        displayWhileLoading={<Loading />}
+        displayIfLoggedOut={<RedirectToLogin />}
+      >
         <TelemetryProvider
           apiKey={process.env.REACT_APP_PUBLIC_POSTHOG_KEY}
           options={posthogOptions}
         >
           <App />
         </TelemetryProvider>
-      </PersistGate>
-    </Provider>
-  </AuthProvider>
+      </AuthProvider>
+    </PersistGate>
+  </Provider>
   // </React.StrictMode>
 );
 

ui/frontend/src/state/api/emptyApi.ts

@@ -32,6 +32,7 @@ const baseQuery = fetchBaseQuery({
     } else if (process.env.REACT_APP_AUTH_MODE === "local") {
       headers.set("x-api-user", getStateTyped().auth.localUserName || "");
       headers.set("x-api-key", getStateTyped().auth.localAPIKey || "");
+      console.log(headers)
     }
     return headers;
   },

ui/frontend/src/state/api/friendlyApi.ts

@@ -41,6 +41,7 @@ import {
   useTrackingserverAuthApiCreateApiKeyMutation,
   ApiKeyOut,
   DagTemplateOutWithData,
+  useTrackingserverAuthApiPhoneHomeQuery,
 } from "./backendApiRaw";
 
 /**
@@ -235,3 +236,5 @@ export function getNodeRunAttributes<T>(
     })
     .filter((attr) => attr.schema_version === version && attr.type === type);
 }
+
+export const usePhoneHome = useTrackingserverAuthApiPhoneHomeQuery;