fix(oidc) rely on api response for auth checks, as the oidc cookie is…

… now httponly and not visible to the ui, hide status bar and avoid operation fetch in case a user is not authenticated, fixes canonical#569

Signed-off-by: David Edler <david.edler@canonical.com>

src/App.tsx

@@ -8,6 +8,7 @@ import { useAuth } from "context/auth";
 import { setTitle } from "util/title";
 import CustomLayout from "components/CustomLayout";
 import NoMatch from "components/NoMatch";
+import { logout } from "util/helpers";
 
 const CertificateAdd = lazy(() => import("pages/login/CertificateAdd"));
 const CertificateGenerate = lazy(
@@ -55,13 +56,17 @@ const WarningList = lazy(() => import("pages/warnings/WarningList"));
 const HOME_REDIRECT_PATHS = ["/", "/ui", "/ui/project"];
 
 const App: FC = () => {
-  const { defaultProject, isAuthLoading } = useAuth();
+  const { defaultProject, isAuthLoading, isAuthenticated } = useAuth();
   setTitle();
 
   if (isAuthLoading) {
     return <Loader />;
   }
 
+  if (!isAuthenticated) {
+    logout();
+  }
+
   return (
     <Suspense
       fallback={

src/components/Navigation.tsx

@@ -8,20 +8,18 @@ import ProjectSelector from "pages/projects/ProjectSelector";
 import { isWidthBelow, logout } from "util/helpers";
 import { useProject } from "context/project";
 import { useMenuCollapsed } from "context/menuCollapsed";
-import { getCookie } from "util/cookies";
 import { useDocs } from "context/useDocs";
 
 const isSmallScreen = () => isWidthBelow(620);
 
 const Navigation: FC = () => {
-  const { isRestricted } = useAuth();
+  const { isRestricted, isOidc } = useAuth();
   const docBaseLink = useDocs();
   const { menuCollapsed, setMenuCollapsed } = useMenuCollapsed();
   const { project, isLoading } = useProject();
   const [projectName, setProjectName] = useState(
     project && !isLoading ? project.name : "default",
   );
-  const hasOidcCookie = Boolean(getCookie("oidc_access"));
 
   useEffect(() => {
     project && project.name !== projectName && setProjectName(project.name);
@@ -225,7 +223,7 @@ const Navigation: FC = () => {
                           Settings
                         </NavLink>
                       </li>
-                      {hasOidcCookie && (
+                      {isOidc && (
                         <li className="p-side-navigation__item">
                           <a
                             className="p-side-navigation__link"

src/components/StatusBar.tsx

@@ -6,12 +6,14 @@ import { useToastNotification } from "context/toastNotificationProvider";
 import { ICONS, Icon } from "@canonical/react-components";
 import { iconLookup, severityOrder } from "util/notifications";
 import useEventListener from "@use-it/event-listener";
+import { useAuth } from "context/auth";
 
 interface Props {
   className?: string;
 }
 
 const StatusBar: FC<Props> = ({ className }) => {
+  const { isAuthLoading, isAuthenticated } = useAuth();
   const { toggleListView, notifications, countBySeverity, isListView } =
     useToastNotification();
 
@@ -22,6 +24,10 @@ const StatusBar: FC<Props> = ({ className }) => {
     }
   });
 
+  if (isAuthLoading || !isAuthenticated) {
+    return null;
+  }
+
   const notificationIcons = severityOrder.map((severity) => {
     if (countBySeverity[severity]) {
       return (

src/context/auth.tsx

@@ -8,13 +8,15 @@ import { fetchProjects } from "api/projects";
 interface ContextProps {
   isAuthenticated: boolean;
   isAuthLoading: boolean;
+  isOidc: boolean;
   isRestricted: boolean;
   defaultProject: string;
 }
 
 const initialState: ContextProps = {
   isAuthenticated: false,
   isAuthLoading: true,
+  isOidc: false,
   isRestricted: false,
   defaultProject: "default",
 };
@@ -57,6 +59,7 @@ export const AuthProvider: FC<ProviderProps> = ({ children }) => {
     <AuthContext.Provider
       value={{
         isAuthenticated: (settings && settings.auth !== "untrusted") ?? false,
+        isOidc: settings?.auth_user_method === "oidc",
         isAuthLoading: isLoading,
         isRestricted,
         defaultProject,

src/context/operationsProvider.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { LxdOperation } from "types/operation";
 import { queryKeys } from "util/queryKeys";
+import { useAuth } from "context/auth";
 
 type OperationsContextType = {
   operations: LxdOperation[];
@@ -32,6 +33,8 @@ const OperationsContext = createContext<OperationsContextType>({
 });
 
 const OperationsProvider: FC<Props> = ({ children }) => {
+  const { isAuthenticated } = useAuth();
+
   const {
     data: operationList,
     error,
@@ -40,7 +43,9 @@ const OperationsProvider: FC<Props> = ({ children }) => {
   } = useQuery({
     queryKey: [queryKeys.operations],
     queryFn: () => fetchAllOperations(),
+    enabled: isAuthenticated,
   });
+
   const refetchTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {

src/types/server.d.ts

@@ -1,6 +1,7 @@
 import { LxdConfigPair } from "./config";
 
 type LXDAuthMethods = "tls" | "oidc" | "unix";
+
 type SupportedStorageDriver = {
   Name: string;
   Version: string;

src/util/helpers.tsx

@@ -3,7 +3,6 @@ import { LxdInstance } from "types/instance";
 import { LxdProject } from "types/project";
 import { LxdProfile } from "types/profile";
 import { LxdNetwork } from "types/network";
-import { getCookie } from "./cookies";
 import { LxdStorageVolume } from "types/storage";
 import { Dispatch, SetStateAction } from "react";
 
@@ -60,14 +59,7 @@ export const handleResponse = async (response: Response) => {
   if (!response.ok) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const result: ErrorResponse = await response.json();
-    const errorCode = result.error_code;
-    const isAuthError = errorCode === 401 || errorCode === 403;
-    const hasOidcCookie = Boolean(getCookie("oidc_access"));
-    if (isAuthError && hasOidcCookie) {
-      logout();
-    } else {
-      throw Error(result.error);
-    }
+    throw Error(result.error);
   }
   return response.json();
 };
@@ -248,7 +240,11 @@ export const continueOrFinish = (
 };
 
 export const logout = (): void =>
-  void fetch("/oidc/logout").then(() => window.location.reload());
+  void fetch("/oidc/logout").then(() => {
+    if (!window.location.href.includes("/ui/login")) {
+      window.location.href = "/ui/login";
+    }
+  });
 
 export const capitalizeFirstLetter = (val: string): string =>
   val.charAt(0).toUpperCase() + val.slice(1);