Refactor Auth for zenml local

src/app/stacks/columns.tsx

@@ -1,12 +1,13 @@
 import { CopyButton } from "@/components/CopyButton";
 import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
+import { StackSheet } from "@/components/stacks/Sheet";
+import { getUsername } from "@/lib/user";
 import { Stack } from "@/types/stack";
 import { User } from "@/types/user";
 import { ColumnDef } from "@tanstack/react-table";
 import { Avatar, AvatarFallback } from "@zenml-io/react-component-library";
 import { StackActionsMenu } from "./ActionsDropdown";
-import { StackSheet } from "@/components/stacks/Sheet";
 
 export function getStackColumns(): ColumnDef<Stack>[] {
 	return [
@@ -53,7 +54,7 @@ export function getStackColumns(): ColumnDef<Stack>[] {
 			cell: ({ getValue }) => {
 				const { author } = getValue<{ author?: User }>();
 				if (!author) return null;
-				return <InlineAvatar username={author.name} />;
+				return <InlineAvatar username={getUsername(author)} />;
 			}
 		},
 		{

src/layouts/AuthenticatedLayout/UserDropdown.tsx

@@ -1,7 +1,10 @@
 import LogoutIcon from "@/assets/icons/logout.svg?react";
 import { useAuthContext } from "@/context/AuthContext";
+import { useServerInfo } from "@/data/server/info-query";
 import { useLogoutMutation } from "@/data/session/logout-mutation";
 import { useCurrentUser } from "@/data/users/current-user-query";
+import { isNoAuthServer } from "@/lib/server";
+import { getUsername } from "@/lib/user";
 import {
 	Avatar,
 	AvatarFallback,
@@ -12,10 +15,10 @@ import {
 	Skeleton
 } from "@zenml-io/react-component-library";
 import { useNavigate } from "react-router-dom";
-import { getUsername } from "@/lib/user";
 
 export function UserDropdown() {
-	const { data, isPending, isError } = useCurrentUser();
+	const currentUser = useCurrentUser();
+	const serverInfo = useServerInfo();
 	const { removeAuthState } = useAuthContext();
 	const navigate = useNavigate();
 	const mutation = useLogoutMutation({
@@ -25,19 +28,20 @@ export function UserDropdown() {
 		}
 	});
 
-	if (isError) return null;
+	if (currentUser.isError || serverInfo.isError) return null;
 
-	if (isPending) return <Skeleton />;
+	if (currentUser.isPending || serverInfo.isPending) return <Skeleton />;
 
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger>
 				<Avatar size="lg">
-					<AvatarFallback size="lg">{getUsername(data)[0]}</AvatarFallback>
+					<AvatarFallback size="lg">{getUsername(currentUser.data)[0]}</AvatarFallback>
 				</Avatar>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end" sideOffset={7}>
 				<DropdownMenuItem
+					disabled={isNoAuthServer(serverInfo.data.auth_scheme)}
 					onClick={() => mutation.mutate()}
 					icon={<LogoutIcon className="h-3 w-3 fill-neutral-400" />}
 				>

src/lib/server.ts

@@ -1,5 +1,9 @@
-import { DeploymentType } from "@/types/server";
+import { AuthScheme, DeploymentType } from "@/types/server";
 
 export function checkIsLocalServer(deploymentType: DeploymentType) {
 	return deploymentType === "local" || deploymentType === "docker";
 }
+
+export function isNoAuthServer(authScheme: AuthScheme) {
+	return authScheme === "NO_AUTH";
+}

src/router/ProtectedRoute.tsx

@@ -0,0 +1,34 @@
+import { PropsWithChildren } from "react";
+import { Navigate } from "react-router-dom";
+import { useAuthContext } from "../context/AuthContext";
+import { useServerInfo } from "../data/server/info-query";
+import { routes } from "./routes";
+import { setAuthState } from "@/lib/sessions";
+import { isNoAuthServer } from "@/lib/server";
+
+export function ProtectedRoute({ children }: PropsWithChildren) {
+	const { getAuthState, removeAuthState } = useAuthContext();
+	const serverInfo = useServerInfo();
+	const isLoggedIn = getAuthState();
+
+	if (serverInfo.isError || serverInfo.isPending) return null;
+
+	if (isNoAuthServer(serverInfo.data.auth_scheme)) {
+		setAuthState("true");
+	}
+
+	if (!isLoggedIn && !isNoAuthServer(serverInfo.data.auth_scheme)) {
+		removeAuthState();
+		return (
+			<Navigate
+				to={
+					routes.login +
+					`?${new URLSearchParams({
+						redirect: location.pathname + location.search
+					}).toString()}`
+				}
+			/>
+		);
+	}
+	return children;
+}

src/router/Router.tsx

@@ -1,15 +1,15 @@
 import { CreateStacksLayout } from "@/app/stacks/create/layout";
 import { surveyLoader } from "@/app/survey/loader";
-import { useAuthContext } from "@/context/AuthContext";
 import { RootBoundary } from "@/error-boundaries/RootBoundary";
 import { AuthenticatedLayout } from "@/layouts/AuthenticatedLayout";
-import { PropsWithChildren, lazy } from "react";
-import { Navigate, Route, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
+import { lazy } from "react";
+import { Route, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
 import { PageBoundary } from "../error-boundaries/PageBoundary";
 import { GradientLayout } from "../layouts/GradientLayout";
 import { RootLayout } from "../layouts/RootLayout";
 import { StackComponentsLayout } from "../layouts/StackComponentsLayout";
 import { authenticatedLayoutLoader, rootLoader } from "./loaders";
+import { ProtectedRoute } from "./ProtectedRoute";
 import { queryClient } from "./queryclient";
 import { routes } from "./routes";
 
@@ -319,23 +319,3 @@ export const router = createBrowserRouter(
 		</Route>
 	)
 );
-
-function ProtectedRoute({ children }: PropsWithChildren) {
-	const { getAuthState, removeAuthState } = useAuthContext();
-	const isLoggedIn = getAuthState();
-
-	if (!isLoggedIn) {
-		removeAuthState();
-		return (
-			<Navigate
-				to={
-					routes.login +
-					`?${new URLSearchParams({
-						redirect: location.pathname + location.search
-					}).toString()}`
-				}
-			/>
-		);
-	}
-	return children;
-}

src/router/loaders.ts

@@ -1,8 +1,8 @@
+import { fetchServerSettings, getServerSettingsKey } from "@/data/server/get-server-settings";
 import { fetchServerInfo, getServerInfoKey } from "@/data/server/info-query";
 import { fetchCurrentUser, getCurrentUserKey } from "@/data/users/current-user-query";
 import { getAuthState } from "@/lib/sessions";
 import { QueryClient } from "@tanstack/react-query";
-import { fetchServerSettings, getServerSettingsKey } from "@/data/server/get-server-settings";
 
 export const authenticatedLayoutLoader = (queryClient: QueryClient) => async () => {
 	if (getAuthState()) {

src/types/server.ts

@@ -2,6 +2,7 @@ import { components } from "./core";
 
 export type ServerInfo = components["schemas"]["ServerModel"];
 export type DeploymentType = components["schemas"]["ServerDeploymentType"];
+export type AuthScheme = components["schemas"]["AuthScheme"];
 
 export type ServerSettings = components["schemas"]["ServerSettingsResponse"];
 export type ServerSettigsUpdate = components["schemas"]["ServerSettingsUpdate"];