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 <[email protected]>
TACC · Nov 3, 2023 · bcc1c0c · bcc1c0c
1 parent a01836e
commit bcc1c0c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;