fix(auth): cookie expiry and renewal (#1527)

* fix(auth/web): logout when expired/invalid/no cookie is present

* fix(auth/web): specify error message in invalid cookie

* fix(auth/web): reset error boundary on login

* fix(auth/web): fix onboarding

* chore: code cleanup

* fix(web): revert tanstack/router to 1.31.0

* refactor(web): remove react-error-boundary

* feat(auth): refresh cookie when close to expiry

* enhancement(web): specify defaultError message in HttpClient

* fix(web): use absolute paths for router links (#1530)

* chore(web): bump `@tanstack/react-router` to `1.31.6`

* fix(web): settings routes

* fix(web): filter routes

* fix(web): remove unused ReleasesIndexRoute

* chore(web): add documentation for HttpClient

* chore(lint): remove unnecessary whitespace

web/src/components/header/Header.tsx

@@ -16,13 +16,11 @@ import { LeftNav } from "./LeftNav";
 import { RightNav } from "./RightNav";
 import { MobileNav } from "./MobileNav";
 import { ExternalLink } from "@components/ExternalLink";
-
-import { AuthIndexRoute } from "@app/routes";
 import { ConfigQueryOptions, UpdatesQueryOptions } from "@api/queries";
+import { AuthContext } from "@utils/Context";
 
 export const Header = () => {
   const router = useRouter()
-  const { auth } = AuthIndexRoute.useRouteContext()
 
   const { isError:isConfigError, error: configError, data: config } = useQuery(ConfigQueryOptions(true));
   if (isConfigError) {
@@ -40,9 +38,8 @@ export const Header = () => {
       toast.custom((t) => (
         <Toast type="success" body="You have been logged out. Goodbye!" t={t} />
       ));
-      auth.logout()
-
-      router.history.push("/")
+      AuthContext.reset();
+      router.history.push("/");
     },
     onError: (err) => {
       console.error("logout error", err)
@@ -60,7 +57,7 @@ export const Header = () => {
             <div className="border-b border-gray-300 dark:border-gray-775">
               <div className="flex items-center justify-between h-16 px-4 sm:px-0">
                 <LeftNav />
-                <RightNav logoutMutation={logoutMutation.mutate} auth={auth} />
+                <RightNav logoutMutation={logoutMutation.mutate} />
                 <div className="-mr-2 flex sm:hidden">
                   {/* Mobile menu button */}
                   <Disclosure.Button className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
@@ -92,7 +89,7 @@ export const Header = () => {
             )}
           </div>
 
-          <MobileNav logoutMutation={logoutMutation.mutate} auth={auth} />
+          <MobileNav logoutMutation={logoutMutation.mutate} />
         </>
       )}
     </Disclosure>

web/src/components/header/RightNav.tsx

@@ -13,7 +13,7 @@ import { RightNavProps } from "./_shared";
 
 import { Cog6ToothIcon, ArrowLeftOnRectangleIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
 import { Link } from "@tanstack/react-router";
-import { SettingsContext } from "@utils/Context";
+import { AuthContext, SettingsContext } from "@utils/Context";
 
 export const RightNav = (props: RightNavProps) => {
   const [settings, setSettings] = SettingsContext.use();
@@ -56,7 +56,7 @@ export const RightNav = (props: RightNavProps) => {
                   <span className="sr-only">
                     Open user menu for{" "}
                   </span>
-                  {props.auth.username}
+                  {AuthContext.get().username}
                 </span>
                 <UserIcon
                   className="inline ml-1 h-5 w-5"

web/src/components/header/_shared.ts

@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { AuthCtx } from "@utils/Context";
-
 interface NavItem {
   name: string;
   path: string;
@@ -13,7 +11,6 @@ interface NavItem {
 
 export interface RightNavProps {
   logoutMutation: () => void;
-  auth: AuthCtx
 }
 
 export const NAV_ROUTES: Array<NavItem> = [