From bcc1c0c75c819beeb644455b54b6d51746702532 Mon Sep 17 00:00:00 2001
From: Jake Rosenberg <jrosenberg@tacc.utexas.edu>
Date: Fri, 3 Nov 2023 18:30:10 -0500
Subject: [PATCH] Bug/TUP-641: Detect authentication timeouts and show an error
 message (#366)

* show an error if authentication times out

* formatting

---------

Co-authored-by: Jake Rosenberg <jrosenberg@MacBook-Pro.lan>
---
 apps/tup-cms/src/apps/portal/backend.py               |  2 +-
 .../src/auth/LoginComponent/LoginComponent.tsx        | 11 +++++++----
 libs/tup-hooks/src/auth/useAuth.ts                    |  5 ++++-
 libs/tup-hooks/src/requests.ts                        |  3 +++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/tup-cms/src/apps/portal/backend.py b/apps/tup-cms/src/apps/portal/backend.py
index acbe973ba..e8a1a13f0 100644
--- a/apps/tup-cms/src/apps/portal/backend.py
+++ b/apps/tup-cms/src/apps/portal/backend.py
@@ -15,7 +15,7 @@ def authenticate(self, request):
         headers = {"x-tup-token": token}
         
         try:
-            req = requests.get(profile_url, headers=headers, timeout=10)
+            req = requests.get(profile_url, headers=headers, timeout=15)
             req.raise_for_status()
         except Exception as exc:
             raise PermissionDenied from exc
diff --git a/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx b/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx
index 0066ff3e2..5520649b4 100644
--- a/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx
+++ b/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx
@@ -17,8 +17,11 @@ type LoginProps = {
   className?: string;
 };
 
-const LoginError: React.FC<{ status?: number }> = ({ status }) => {
-  if (status === 200 || status === undefined) {
+const LoginError: React.FC<{ status?: number; isError: boolean }> = ({
+  status,
+  isError,
+}) => {
+  if (!isError && (status === 200 || status === undefined)) {
     return null;
   }
   if (status === 403) {
@@ -85,7 +88,7 @@ const LoginComponent: React.FC<LoginProps> = ({ className }) => {
   const authCallback = useCallback(() => {
     window.location.replace(from);
   }, [from]);
-  const { login, data, error, isLoading } = useAuth();
+  const { login, data, error, isLoading, isError } = useAuth();
 
   // FAQ: To use inline messaging for required fields (instead of browser):
   //      1. Uncomment this constant definition
@@ -121,7 +124,7 @@ const LoginComponent: React.FC<LoginProps> = ({ className }) => {
       </p>
       <Formik initialValues={initialValues} onSubmit={onSubmit}>
         <Form className="c-form">
-          <LoginError status={status} />
+          <LoginError status={status} isError={isError} />
           <FormikInput
             name="username"
             label="User Name"
diff --git a/libs/tup-hooks/src/auth/useAuth.ts b/libs/tup-hooks/src/auth/useAuth.ts
index 21d7448e4..2837e4c70 100644
--- a/libs/tup-hooks/src/auth/useAuth.ts
+++ b/libs/tup-hooks/src/auth/useAuth.ts
@@ -34,7 +34,10 @@ const useAuth = () => {
   // Use the post hook with the auth endpoint and the callback
   const mutation = usePost<AuthBody, AuthResponse>({
     endpoint: '/auth',
-    options: { onSuccess },
+    timeout: 15000,
+    options: {
+      onSuccess,
+    },
   });
 
   // Rename some of the default react-query functions to be meaningful to this hook's functions
diff --git a/libs/tup-hooks/src/requests.ts b/libs/tup-hooks/src/requests.ts
index 3a40a00d5..8e5724d92 100644
--- a/libs/tup-hooks/src/requests.ts
+++ b/libs/tup-hooks/src/requests.ts
@@ -45,12 +45,14 @@ type UsePostParams<BodyType, ResponseType> = {
   endpoint: string;
   options?: UseMutationOptions<ResponseType, AxiosError, BodyType>;
   baseUrl?: string;
+  timeout?: number;
 };
 
 export function usePost<BodyType, ResponseType>({
   endpoint,
   options = {},
   baseUrl: alternateBaseUrl,
+  timeout = undefined,
 }: UsePostParams<BodyType, ResponseType>) {
   const client = axios;
   const { baseUrl } = useConfig();
@@ -61,6 +63,7 @@ export function usePost<BodyType, ResponseType>({
       body,
       {
         headers: { 'x-tup-token': jwt ?? '' },
+        timeout,
       }
     );
     return response.data;