Client Error: TypeError: resp is undefined on transaction submission

src/api/auth/AuthProvider.tsx

@@ -64,12 +64,20 @@ const AuthProvider: FC<{ children: ReactNode }> = ({ children }) => {
     setCookies(response.data);
   }
 
+  async function logout() {
+    console.log('Logout called')
+    clearCookies();
+    setAuthenticated(false);
+    window.location.href = buildLogoutHref();
+  }
+
   async function authorize(code: string) {
     console.log('Authorize called')
     setLoading(true);
     try {
       const response = await oauthAuthorize(code);
       setCookies(response.data);
+      setInterceptorIds(createInterceptors(refresh, setError, logout));
       setAuthenticated(true);
     } catch (error) {
       setError(error as Error);
@@ -79,13 +87,6 @@ const AuthProvider: FC<{ children: ReactNode }> = ({ children }) => {
     }
   }
 
-  async function logout() {
-    console.log('Logout called')
-    clearCookies();
-    setAuthenticated(false);
-    window.location.href = buildLogoutHref();
-  }
-
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const value = useMemo(() => ({ loading, authenticated, error, authorize, logout }), [loading, error, authenticated]);
 

src/api/auth/instance.ts

@@ -50,6 +50,8 @@ export function createInterceptors(
       (error) => {
         if (error.response.status === 401) {
           refreshRetry(error.config, error);
+        } else {
+          return Promise.reject(error);
         }
       }
     ),

src/api/transaction.ts

@@ -14,8 +14,5 @@ export type TransactionResponse = Record<string, string>;
 export async function postTransaction(
   request: TransactionRequest
 ): Promise<AxiosResponse<TransactionResponse>> {
-  return axiosAuthInstance.post("/transaction", request).then((resp) => {
-    resp.data = resp.data as TransactionResponse;
-    return resp;
-  });
+  return axiosAuthInstance.post<TransactionResponse>("/transaction", request);
 }

src/api/userinfo.ts

@@ -6,13 +6,11 @@ export type UserInfoResponse = {
   name?: string;
   given_name?: string;
   family_name?: string;
-  preferred_username: string;
+  preferred_username?: string;
+  username: string
   email: string;
 };
 
 export async function getUserInfo(): Promise<AxiosResponse<UserInfoResponse>> {
-  return axiosAuthInstance.get(`${AUTH_URL}/oauth2/userInfo`).then((resp) => {
-    resp.data = resp.data as UserInfoResponse;
-    return resp;
-  });
+  return axiosAuthInstance.get<UserInfoResponse>(`${AUTH_URL}/oauth2/userInfo`);
 }

src/components/Footer.tsx → src/components/Footer/Footer.tsx

@@ -48,7 +48,7 @@ export function FooterSimple({ links }: FooterSimpleProps) {
   return (
     <div className={classes.footer}>
       <Container className={classes.inner}>
-        <Image src="./nist.png" height={105} fit="contain" />
+        <Image src={`${import.meta.env.BASE_URL}/nist.png`} height={105} fit="contain" />
         <Group className={classes.links}>{items}</Group>
       </Container>
     </div>

src/components/Footer/index.ts

@@ -0,0 +1,2 @@
+import { FooterSimple } from "./Footer";
+export default FooterSimple;

src/components/Header.tsx

@@ -14,12 +14,11 @@ import {
   IconLogout,
   IconSettings,
 } from "@tabler/icons";
-import { useAuth } from "api/auth";
 import React from "react";
 import { useState } from "react";
 import LoginButton from "./LoginButton";
 
-import { getUserInfo } from "api";
+import { getUserInfo, useAuth } from "api";
 
 const useStyles = createStyles((theme) => ({
   link: {
@@ -88,11 +87,13 @@ export default function HeaderMegaMenu() {
   const [userName, setUserName] = useState("");
 
   React.useEffect(() => {
-    const getData = async () => {
-      const { preferred_username } = (await getUserInfo()).data;
-      setUserName(preferred_username);
-    };
-    getData();
+    if (authenticated && userName === "") {
+      // horribly hacky, waits until the auth interceptor has been set after being authenticated
+      new Promise(resolve => setTimeout(resolve, 500)).then(_ => {
+        getUserInfo().then(info => setUserName(info.data.username));
+      });
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [authenticated]);
 
   return (

src/components/Transaction/TransactionResultsDisplay.tsx

@@ -10,11 +10,11 @@ const CodeDisplay: React.FC<{text: string, label?: string}> = ({ label, text })
       sx={{
         borderRadius: '5px',
         background: '#002b36',
-        color: '#839496'
+        color: '#839496',
       }}
     >
       <pre>
-        <code>
+        <code style={{whiteSpace: 'pre-line'}}>
           {text}
         </code>
       </pre>

src/components/index.ts

@@ -1,7 +1,8 @@
 import LoginButton from "./LoginButton";
+import FooterSimple from "./Footer";
+import HeaderMegaMenu from "./Header";
 
-export { LoginButton };
-export { FooterSimple } from "./Footer";
+export { LoginButton, FooterSimple as Footer, HeaderMegaMenu as Header };
 
 export {
   TransactionSelect,

src/main.tsx

@@ -3,8 +3,7 @@ import ReactDOM from "react-dom/client";
 import { HashRouter, Outlet, Route, Routes } from "react-router-dom";
 import { AuthProvider, RequireAuth } from "api/auth";
 import { Dashboard, Landing, NotFound, Transaction, UserInfo } from "pages";
-import { FooterSimple } from "components";
-import HeaderMegaMenu from "components/Header";
+import { Footer, Header } from "components";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
@@ -13,7 +12,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         <div
           style={{ height: "100vh", display: "flex", flexDirection: "column" }}
         >
-          <HeaderMegaMenu />
+          <Header />
           <Routes>
             <Route path="/" element={<Landing />} />
             <Route
@@ -31,7 +30,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
               <Route path="*" element={<NotFound />} />
             </Route>
           </Routes>
-          <FooterSimple links={[{ link: "", label: "" }]} />
+          <Footer links={[{ link: "", label: "" }]} />
         </div>
       </AuthProvider>
     </HashRouter>

src/pages/Transaction.tsx

@@ -3,26 +3,27 @@ import { Title, Grid, Button } from "@mantine/core";
 import { postTransaction, TransactionRequest } from "api";
 import { builders, TransactionResults, TransactionResultsDisplay, TransactionSelect } from "components";
 import { IconClearAll } from "@tabler/icons";
+import { AxiosError } from "axios";
 
 export default function Transaction() {
   const [responses, setResponses] = useState<TransactionResults[]>([])
   const onSubmit = async (request: TransactionRequest) => {
     try {
       const response = await postTransaction(request);
-
-      // fake sleeping for now
-      // await new Promise(r => setTimeout(r, 1000));
-      // const response = {'test': 'response'};
 
       setResponses([{
         request,
         response: response.data,
         date: new Date()
       }, ...responses]);
     } catch (e) {
+      let message = `Client Error: ${e}`;
+      if (e instanceof AxiosError) {
+        message = `Server Error (${e.code}): ${e.response?.data}`;
+      } else {}
       setResponses([{
         request,
-        response: `Client Error: ${e}`,
+        response: message,
         date: new Date()
       }, ...responses])
     }

vite.config.ts

@@ -6,7 +6,7 @@ import tsconfigPaths from "vite-tsconfig-paths";
 // for deployments that are deployed to a sub-folder like /dev, specify below or use the `BASE_URL` env var
 const DEFAULT_BASE_URL = "/";
 // to proxy transaction api requests on a different domain, specify below or use the `PROXY_URL` env var
-const DEFAULT_PROXY_URL = "https://n2ft4ng3qh.execute-api.us-east-1.amazonaws.com/dev";
+const DEFAULT_PROXY_URL = "https://719hgl5ejk.execute-api.us-east-1.amazonaws.com/dev";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -16,6 +16,8 @@ export default defineConfig({
     proxy: {
       "/transaction": {
         target: process.env.PROXY_URL ?? DEFAULT_PROXY_URL,
+        // Fixes SSL error on some requests
+        changeOrigin: true
       }
     }
   }