Centralize Authentication

webui/src/lib/auth/authContext.tsx

@@ -0,0 +1,104 @@
+import React, { createContext, useContext, useMemo, useState, ReactNode, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { auth } from "../api";
+import { getCurrentRelativeUrl, isPublicAuthRoute, ROUTES } from "../utils";
+
+export const LAKEFS_POST_LOGIN_NEXT = "lakefs_post_login_next";
+export const AUTH_STATUS = {
+    AUTHENTICATED: "authenticated",
+    UNAUTHENTICATED: "unauthenticated",
+    PENDING: "pending",
+} as const;
+
+export type AuthStatus = typeof AUTH_STATUS[keyof typeof AUTH_STATUS];
+
+type User = { id?: string } | null;
+
+type AuthContextType = {
+    status: AuthStatus;
+    user: User;
+    refreshUser: (opts?: { useCache?: boolean }) => Promise<void>;
+    setStatus: (s: AuthStatus) => void;
+    onUnauthenticated: () => void;
+};
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [status, setStatus] = useState<AuthStatus>(AUTH_STATUS.PENDING);
+    const [user, setUser] = useState<User>(null);
+    const navigate = useNavigate();
+
+    const refreshUser = useCallback(
+        async ({ useCache = true }: { useCache?: boolean } = {}) => {
+            if (!useCache && status !== AUTH_STATUS.AUTHENTICATED) setStatus(AUTH_STATUS.PENDING);
+            try {
+                const u = useCache
+                    ? await auth.getCurrentUserWithCache()
+                    : await auth.getCurrentUser();
+                const ok = Boolean(u?.id);
+                setUser(ok ? u : null);
+                setStatus(ok ? AUTH_STATUS.AUTHENTICATED : AUTH_STATUS.UNAUTHENTICATED);
+            } catch {
+                setUser(null);
+                setStatus(AUTH_STATUS.UNAUTHENTICATED);
+            }
+        },
+        []
+    );
+
+    // When we get a 401, clear local auth and navigate to the login page.
+    // We set `redirected: true` and pass `next` (the current URL) so the login page
+    // knows this is an auth-driven redirect: it should apply the configured login
+    // strategy (e.g. auto-redirect to SSO) and, after successful auth, return to `next`.
+    const onUnauthenticated = useCallback(() => {
+        auth.clearCurrentUser();
+        setUser(null);
+        setStatus(AUTH_STATUS.UNAUTHENTICATED);
+
+        if (isPublicAuthRoute(window.location.pathname)) return;
+
+        navigate(ROUTES.LOGIN, {
+            replace: true,
+            state: { redirected: true, next: getCurrentRelativeUrl() },
+        });
+    }, [navigate]);
+
+    useEffect(() => { void refreshUser({ useCache: false }); }, []);
+
+    useEffect(() => {
+        const onPageShow = (e: PageTransitionEvent) => {
+            if ((e).persisted) {
+                void refreshUser({ useCache: false });
+            }
+        };
+        window.addEventListener('pageshow', onPageShow);
+        return () => window.removeEventListener('pageshow', onPageShow);
+    }, [refreshUser]);
+
+    useEffect(() => {
+        if (status === AUTH_STATUS.AUTHENTICATED) {
+            const postLoginNext = window.sessionStorage.getItem(LAKEFS_POST_LOGIN_NEXT);
+            if (postLoginNext && postLoginNext.startsWith("/")) {
+                window.sessionStorage.removeItem(LAKEFS_POST_LOGIN_NEXT);
+                const next = getCurrentRelativeUrl();
+                if (next !== postLoginNext) {
+                    navigate(postLoginNext, { replace: true });
+                }
+            }
+        }
+    }, [status, navigate]);
+
+    const value = useMemo<AuthContextType>(
+        () => ({ status, user, refreshUser, setStatus, onUnauthenticated }),
+        [status, user, refreshUser, onUnauthenticated]
+    );
+
+    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = (): AuthContextType => {
+    const ctx = useContext(AuthContext);
+    if (!ctx) throw new Error("useAuth must be used within <AuthProvider>");
+    return ctx;
+};

webui/src/lib/components/auth/layout.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 import {Outlet, useOutletContext} from "react-router-dom";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
@@ -8,8 +8,6 @@ import Card from "react-bootstrap/Card";
 
 import {Link} from "../nav";
 import {useLoginConfigContext} from "../../hooks/conf";
-import {useLayoutOutletContext} from "../layout";
-import {useRouter} from "../../hooks/router";
 import Alert from "react-bootstrap/Alert";
 import {InfoIcon} from "@primer/octicons-react";
 
@@ -20,22 +18,6 @@ export const AuthLayout = () => {
     const [showRBACAlert, setShowRBACAlert] = useState(!window.localStorage.getItem(rbacDismissedKey));
     const [activeTab, setActiveTab] = useState("credentials");
     const {RBAC: rbac} = useLoginConfigContext();
-    const [isLogged] = useLayoutOutletContext();
-    const router = useRouter();
-
-    useEffect(() => {
-        if (!isLogged) {
-            // Redirect to the login page here, instead of in Layout where isLogged is set, because Layout also wraps
-            // routes that don't require authentication, and redirecting would be incorrect.
-            router.push({
-                pathname: '/auth/login',
-                params: {},
-                query: { next: '/', redirected: 'true' },
-            });
-        }
-    }, [isLogged, router]);
-
-    if (!isLogged) return null;
 
     return (
         <Container fluid="xl">

webui/src/lib/components/layout.tsx

@@ -1,41 +1,30 @@
-import React, { FC, useContext, useState, useEffect } from "react";
-import { Outlet, useOutletContext } from "react-router-dom";
+import React, { FC, useContext, useEffect } from "react";
+import { Outlet } from "react-router-dom";
 import { ConfigProvider } from "../hooks/configProvider";
 import TopNav from './navbar';
 import { AppContext } from "../hooks/appContext";
-import useUser from "../hooks/user";
+import {AUTH_STATUS, useAuth} from "../auth/authContext";
 
-type LayoutOutletContext = [boolean];
+const Layout: FC = () => {
+    const { status } = useAuth();
+    const showTopNav = status === AUTH_STATUS.AUTHENTICATED;
 
-const Layout: FC<{logged: boolean}> = ({logged}) => {
-    const [isLogged, setIsLogged] = useState(logged ?? true);
-    const { user, loading, error } = useUser();
-    const userWithId = user as { id?: string } | null;
-
-    // Update isLogged state based on actual authentication status
+    const { state } = useContext(AppContext);
     useEffect(() => {
-        if (!loading) {
-            // If there's a user and no error, show authenticated (full) navbar
-            setIsLogged(!!userWithId?.id && !error);
-        }
-    }, [userWithId, loading, error]);
-
-    // handle global dark mode here
-    const {state} = useContext(AppContext);
-    document.documentElement.setAttribute('data-bs-theme', state.settings.darkMode ? 'dark' : 'light')
+        document.documentElement.setAttribute(
+            "data-bs-theme",
+            state.settings.darkMode ? "dark" : "light"
+        );
+    }, [state.settings.darkMode]);
 
     return (
         <ConfigProvider>
-            {!loading && <TopNav logged={isLogged}/>}
+            {showTopNav && <TopNav/>}
             <div className="main-app">
-                <Outlet context={[isLogged] satisfies LayoutOutletContext}/>
+                <Outlet />
             </div>
         </ConfigProvider>
     );
 };
 
-export function useLayoutOutletContext() {
-    return useOutletContext<LayoutOutletContext>();
-}
-
-export default Layout;
+export default Layout;

webui/src/lib/components/navbar.jsx

@@ -1,6 +1,4 @@
 import React from "react";
-import useUser from '../hooks/user'
-import {auth} from "../api";
 import {useRouter} from "../hooks/router";
 import {Link} from "./nav";
 import DarkModeToggle from "./darkModeToggle";
@@ -9,15 +7,19 @@ import Container from "react-bootstrap/Container";
 import {useLoginConfigContext} from "../hooks/conf";
 import {FeedPersonIcon} from "@primer/octicons-react";
 import {useConfigContext} from "../hooks/configProvider";
+import {auth} from "../api";
+import {AUTH_STATUS, LAKEFS_POST_LOGIN_NEXT, useAuth} from "../auth/authContext";
+import {ROUTES} from "../utils";
 
 const NavUserInfo = () => {
-    const { user, loading: userLoading, error } = useUser();
+    const { user, status } = useAuth();
+    const userLoading = status === AUTH_STATUS.PENDING;
     const logoutUrl = useLoginConfigContext()?.logout_url || "/logout"
     const {config, error: versionError, loading: versionLoading} = useConfigContext();
     const versionConfig = config?.versionConfig || {};
 
     if (userLoading || versionLoading) return <Navbar.Text>Loading...</Navbar.Text>;
-    if (!user || !!error) return (<></>);
+    if (!user) return (<></>);
     const notifyNewVersion = !versionLoading && !versionError && versionConfig.upgrade_recommended
     const NavBarTitle = () => {
         return (
@@ -37,17 +39,19 @@ const NavUserInfo = () => {
                     </>
             </NavDropdown.Item><NavDropdown.Divider/></>}
             <NavDropdown.Item
-                onClick={()=> {
+                onClick={() => {
                     auth.clearCurrentUser();
-                    window.location = logoutUrl;
+                    window.sessionStorage.removeItem(LAKEFS_POST_LOGIN_NEXT);
+                    window.history.replaceState(null, "", `${ROUTES.LOGIN}?redirected=true`);
+                    window.location.replace(logoutUrl);
                 }}>
                 Logout
             </NavDropdown.Item>
             <NavDropdown.Divider/>
             {!versionLoading && !versionError && <>
-            <NavDropdown.Item disabled={true}>
-                {`${versionConfig.version_context} ${versionConfig.version}`}
-            </NavDropdown.Item></>}
+                <NavDropdown.Item disabled={true}>
+                    {`${versionConfig.version_context} ${versionConfig.version}`}
+                </NavDropdown.Item></>}
         </NavDropdown>
     );
 };
@@ -63,8 +67,8 @@ const TopNavLink = ({ href, children }) => {
     );
 };
 
-const TopNav = ({logged = true}) => {
-    return logged && (
+const TopNav = () => {
+    return (
         <Navbar variant="dark" bg="dark" expand="md" className="border-bottom">
             <Container fluid={true}>
                 <Link component={Navbar.Brand} href="/">

webui/src/lib/components/requiresAuth.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import {Navigate, Outlet} from "react-router-dom";
+import {Loading} from "./controls";
+import {ROUTES} from "../utils";
+import {getCurrentRelativeUrl} from "../utils";
+import {AUTH_STATUS, useAuth} from "../auth/authContext";
+
+const RequiresAuth: React.FC = () => {
+    const { user, status } = useAuth();
+
+    if (status === AUTH_STATUS.PENDING) return <Loading />;
+    if (!user) {
+        const next = getCurrentRelativeUrl();
+        const params = new URLSearchParams({ redirected: "true", next });
+        return <Navigate to={{ pathname: ROUTES.LOGIN, search: `?${params.toString()}` }} replace state={{ redirected: true, next }}/>;
+    }
+
+    return <Outlet/>;
+};
+
+export default RequiresAuth;

webui/src/lib/hooks/api.jsx

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
 import {AuthenticationError} from "../api";
-import {useRouter} from "./router";
+import {useAuth} from "../auth/authContext";
 
 const initialPaginationState = {
     loading: true,
@@ -50,46 +50,23 @@ const initialAPIState = {
 };
 
 export const useAPI = (promise, deps = []) => {
-    const router = useRouter();
     const [request, setRequest] = useState(initialAPIState);
-    const [needToLogin, setNeedToLogin] = useState(false);
-
-    useEffect(() => {
-        if (needToLogin) {
-            const loginPathname = '/auth/login';
-            if (router.route === loginPathname) {
-                return;
-            }
-            // If the user is not logged in and attempts to access a lakeFS endpoint other than '/auth/login',
-            // they are first redirected to the '/auth/login' endpoint. For users logging in via lakeFS
-            // (not via SSO), after successful authentication they will be redirected back to the original endpoint
-            // they attempted to access. The redirected flag is set here so it can later be used to properly
-            // handle SSO redirection when login via SSO is configured.
-            router.push({
-                pathname: loginPathname,
-                query: {next: router.route, redirected: true},
-            });
-            setNeedToLogin(false);
-        }
-    }, [needToLogin, router])
+    const { onUnauthenticated } = useAuth();
 
     useEffect(() => {
         let isMounted = true;
         setRequest(initialAPIState);
         const execute = async () => {
             try {
                 const response = await promise();
-                setRequest({
-                    loading: false,
-                    error: null,
-                    response,
-                });
+                if (!isMounted) return;
+                setRequest({ loading: false, error: null, response });
             } catch (error) {
-                if (error instanceof AuthenticationError) {
-                    if (isMounted) {
-                        setNeedToLogin(true);
-                    }
-                    return;
+                if (!isMounted) return;
+                // On 401 we delegate to onUnauthenticated(), which redirects to /auth/login
+                // with { redirected: true, next } so the login page can apply SSO and return.
+                if (error instanceof AuthenticationError && error.status === 401) {
+                    onUnauthenticated();
                 }
                 setRequest({
                     loading: false,

webui/src/lib/hooks/configProvider.tsx

@@ -1,8 +1,9 @@
-import React, { createContext, FC, useContext, useEffect, useState, } from "react";
+import React, {createContext, FC, useContext, useEffect, useMemo} from "react";
 
 import { config } from "../api";
-import useUser from "./user";
 import { usePluginManager } from "../../extendable/plugins/pluginsContext";
+import {useAPI} from "./api";
+import {useAuth} from "../auth/authContext";
 
 type ConfigContextType = {
     error: Error | null;
@@ -57,21 +58,23 @@ const useConfigContext = () => useContext(configContext);
 
 const ConfigProvider: FC<{children: React.ReactNode}> = ({children}) => {
     const pluginManager = usePluginManager();
-    const {user} = useUser();
-    const [storageConfig, setConfig] = useState<ConfigContextType>(configInitialState);
+    const {user} = useAuth();
+    const { response, loading, error } = useAPI(() => config.getConfig(), [user]);
 
     useEffect(() => {
-        config.getConfig()
-            .then(configData => {
-                pluginManager.customObjectRenderers?.init(configData);
-                setConfig({config: configData, loading: false, error: null});
-            })
-            .catch((error) =>
-                setConfig({config: null, loading: false, error}));
-    }, [user]);
+        if (response) {
+            pluginManager.customObjectRenderers?.init(response);
+        }
+    }, [response, pluginManager]);
+
+    const value = useMemo(
+        () => (
+            { config: response ?? null, loading, error } satisfies ConfigContextType
+        ),
+        [response, loading, error]);
 
     return (
-        <configContext.Provider value={storageConfig}>
+        <configContext.Provider value={value}>
             {children}
         </configContext.Provider>
     );