UI feat: attempt to refresh auth token on forbidden requests

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

ui/admin/app/components/auth/AuthContext.tsx

@@ -1,14 +1,14 @@
 import { ReactNode, createContext, useContext } from "react";
 import useSWR from "swr";
 
+import { AuthDisabledUsername } from "~/lib/model/auth";
 import { Role, User } from "~/lib/model/users";
 import { UserService } from "~/lib/service/api/userService";
 
-export const AuthDisabledUsername = "nobody";
-
 interface AuthContextType {
     me: User;
     isLoading: boolean;
+    isSignedIn: boolean;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -20,8 +20,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         { fallbackData: { role: Role.Default } as User }
     );
 
+    const isSignedIn = !!me.username && me.username !== AuthDisabledUsername;
+
     return (
-        <AuthContext.Provider value={{ me, isLoading }}>
+        <AuthContext.Provider value={{ me, isLoading, isSignedIn }}>
             {children}
         </AuthContext.Provider>
     );

ui/admin/app/components/user/UserMenu.tsx

@@ -1,10 +1,11 @@
 import { User } from "lucide-react";
 import React from "react";
 
+import { AuthDisabledUsername } from "~/lib/model/auth";
 import { roleToString } from "~/lib/model/users";
 import { cn } from "~/lib/utils";
 
-import { AuthDisabledUsername, useAuth } from "~/components/auth/AuthContext";
+import { useAuth } from "~/components/auth/AuthContext";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
 import {

ui/admin/app/hooks/useAsync.tsx

@@ -1,14 +1,16 @@
+import { AxiosError } from "axios";
 import { useCallback, useState } from "react";
 
 import { handlePromise } from "~/lib/service/async";
-import { noop } from "~/lib/utils";
 
 type Config<TData, TParams extends unknown[]> = {
     onSuccess?: (data: TData, params: TParams) => void;
     onError?: (error: unknown, params: TParams) => void;
     onSettled?: ({ params }: { params: TParams }) => void;
 };
 
+const defaultShouldThrow = (error: unknown) => !(error instanceof AxiosError);
+
 export function useAsync<TData, TParams extends unknown[]>(
     callback: (...params: TParams) => Promise<TData>,
     config?: Config<TData, TParams>
@@ -20,6 +22,8 @@ export function useAsync<TData, TParams extends unknown[]>(
     const [isLoading, setIsLoading] = useState(false);
     const [lastCallParams, setLastCallParams] = useState<TParams | null>(null);
 
+    if (error && defaultShouldThrow(error)) throw error;
+
     const executeAsync = useCallback(
         async (...params: TParams) => {
             setIsLoading(true);
@@ -41,14 +45,14 @@ export function useAsync<TData, TParams extends unknown[]>(
                     onSettled?.({ params });
                 });
 
-            return handlePromise(promise);
+            return await handlePromise(promise);
         },
         [callback, onSuccess, onError, onSettled]
     );
 
     const execute = useCallback(
         (...params: TParams) => {
-            executeAsync(...params).catch(noop);
+            executeAsync(...params);
         },
         [executeAsync]
     );

ui/admin/app/lib/model/auth.tsx

@@ -0,0 +1 @@
+export const AuthDisabledUsername = "nobody";

ui/admin/app/lib/service/api/apiErrors.tsx

@@ -1 +1,3 @@
 export class ConflictError extends Error {}
+export class ForbiddenError extends Error {}
+export class UnauthorizedError extends Error {}

ui/admin/app/lib/service/api/primitives.ts

@@ -1,7 +1,14 @@
 // TODO: Add default configurations with auth tokens, etc. When ready
 import axios, { AxiosRequestConfig, AxiosResponse, isAxiosError } from "axios";
 
-import { ConflictError } from "~/lib/service/api/apiErrors";
+import { AuthDisabledUsername } from "~/lib/model/auth";
+import { User } from "~/lib/model/users";
+import { ApiRoutes } from "~/lib/routers/apiRoutes";
+import {
+    ConflictError,
+    ForbiddenError,
+    UnauthorizedError,
+} from "~/lib/service/api/apiErrors";
 
 export const ResponseHeaders = {
     ThreadId: "x-otto-thread-id",
@@ -12,10 +19,12 @@ const internalFetch = axios.request;
 interface ExtendedAxiosRequestConfig<D = unknown>
     extends AxiosRequestConfig<D> {
     errorMessage?: string;
+    disableTokenRefresh?: boolean;
 }
 
 export async function request<T, R = AxiosResponse<T>, D = unknown>({
     errorMessage = "Request failed",
+    disableTokenRefresh,
     ...config
 }: ExtendedAxiosRequestConfig<D>): Promise<R> {
     try {
@@ -26,6 +35,32 @@ export async function request<T, R = AxiosResponse<T>, D = unknown>({
     } catch (error) {
         console.error(errorMessage);
 
+        if (isAxiosError(error) && error.response?.status === 401) {
+            throw new UnauthorizedError(error.response.data);
+        }
+
+        if (isAxiosError(error) && error.response?.status === 403) {
+            // Tokens are automatically refreshed on GET requests
+            if (disableTokenRefresh) {
+                throw new ForbiddenError(error.response.data);
+            }
+
+            console.info("Forbidden request, attempting to refresh token");
+            const { data } = await internalFetch<User>({
+                url: ApiRoutes.me().url,
+            });
+
+            // if token is refreshed successfully, retry the request
+            if (!data?.username || data.username === AuthDisabledUsername)
+                throw new ForbiddenError(error.response.data);
+
+            console.info("Token refreshed");
+            return request<T, R, D>({
+                ...config,
+                disableTokenRefresh: true,
+            });
+        }
+
         if (isAxiosError(error) && error.response?.status === 409) {
             throw new ConflictError(error.response.data);
         }

ui/admin/app/routes/_auth.tsx

@@ -1,31 +1,20 @@
 import { Outlet, isRouteErrorResponse, useRouteError } from "@remix-run/react";
-import { AxiosError } from "axios";
+import { preload } from "swr";
 
-import { AuthDisabledUsername, useAuth } from "~/components/auth/AuthContext";
+import { ForbiddenError, UnauthorizedError } from "~/lib/service/api/apiErrors";
+import { UserService } from "~/lib/service/api/userService";
+
+import { useAuth } from "~/components/auth/AuthContext";
 import { Error, RouteError, Unauthorized } from "~/components/errors";
 import { HeaderNav } from "~/components/header/HeaderNav";
 import { Sidebar } from "~/components/sidebar";
 import { SignIn } from "~/components/signin/SignIn";
 
-export function ErrorBoundary() {
-    const error = useRouteError();
-    const { me } = useAuth();
-
-    switch (true) {
-        case error instanceof AxiosError:
-            if (
-                error.response?.status === 403 &&
-                me.username &&
-                me.username !== AuthDisabledUsername
-            ) {
-                return <Unauthorized />;
-            }
-            return <SignIn />;
-        case isRouteErrorResponse(error):
-            return <RouteError error={error} />;
-        default:
-            return <Error error={error as Error} />;
-    }
+export async function clientLoader() {
+    const me = await preload(UserService.getMe.key(), () =>
+        UserService.getMe()
+    );
+    return { me };
 }
 
 export default function AuthLayout() {
@@ -41,3 +30,19 @@ export default function AuthLayout() {
         </div>
     );
 }
+
+export function ErrorBoundary() {
+    const error = useRouteError();
+    const { isSignedIn } = useAuth();
+
+    switch (true) {
+        case error instanceof UnauthorizedError:
+        case error instanceof ForbiddenError:
+            if (isSignedIn) return <Unauthorized />;
+            else return <SignIn />;
+        case isRouteErrorResponse(error):
+            return <RouteError error={error} />;
+        default:
+            return <Error error={error as Error} />;
+    }
+}