fix(auth): add login timeout and error handling

Author: moshloop

pages/api/auth/login.ts

@@ -13,21 +13,35 @@ export default async function handler(
   const { username, password } = req.body;
   const basicAuth = Buffer.from(`${username}:${password}`).toString("base64");
 
-  const response = await fetch(`${BACKEND_URL}/auth/login`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Basic ${basicAuth}`
-    },
-    body: JSON.stringify(req.body)
-  });
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 10_000);
 
-  const setCookie = response.headers.get("set-cookie");
-  if (setCookie) {
-    res.setHeader("set-cookie", setCookie);
-  }
+  try {
+    const response = await fetch(`${BACKEND_URL}/auth/login`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Basic ${basicAuth}`
+      },
+      body: JSON.stringify(req.body),
+      signal: controller.signal
+    });
+
+    const setCookie = response.headers.get("set-cookie");
+    if (setCookie) {
+      res.setHeader("set-cookie", setCookie);
+    }
 
-  const text = await response.text();
-  res.status(response.status);
-  res.send(text);
+    const text = await response.text();
+    res.status(response.status).send(text);
+  } catch (error: any) {
+    if (error.name === "AbortError") {
+      return res.status(504).json({ error: "Login request timed out" });
+    }
+    return res
+      .status(502)
+      .json({ error: "Failed to connect to authentication service" });
+  } finally {
+    clearTimeout(timeout);
+  }
 }

src/api/axios.ts

@@ -244,18 +244,20 @@ for (const client of [
 
 export function redirectToLoginPageOnSessionExpiry(error: AxiosError) {
   if (error?.response?.status === 401) {
+    const returnTo = encodeURIComponent(
+      `${window.location.pathname}${window.location.search}`
+    );
+
     if (isBasicAuthSystem) {
-      window.location.href = `/login?return_to=${window.location.pathname}${window.location.search}`;
+      window.location.href = `/login?return_to=${returnTo}`;
       return;
     }
 
     if (isClerkAuthSystem) {
-      const url = `/auth-state-checker?return_to=${window.location.pathname}${window.location.search}`;
-      window.location.href = url;
+      window.location.href = `/auth-state-checker?return_to=${returnTo}`;
       return;
     }
 
-    const url = `/login?return_to=${window.location.pathname}${window.location.search}`;
-    window.location.href = url;
+    window.location.href = `/login?return_to=${returnTo}`;
   }
 }

src/components/Authentication/Kratos/KratosLogin.tsx

@@ -33,7 +33,7 @@ const KratosLogin = () => {
   const searchParams = useSearchParams();
 
   const flowId = searchParams.get("flow") || undefined;
-  const returnTo = searchParams.get("return_to") || "/";
+  const returnTo = searchParams.get("return_to") || undefined;
   const username = searchParams.get("username");
   const password = searchParams.get("password");
 
@@ -54,7 +54,7 @@ const KratosLogin = () => {
       const { data } = await ory.getLoginFlow({ id });
       setFlow(data);
     } catch (error) {
-      handleError(error as AxiosError);
+      return handleError(error as AxiosError);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -68,13 +68,13 @@ const KratosLogin = () => {
   );
 
   const createFlow = useCallback(
-    async (refresh: boolean, aal: string, returnTo: string = "/") => {
+    async (refresh: boolean, aal: string, returnTo?: string) => {
       try {
         const { data } = await ory.createBrowserLoginFlow({
           refresh: refresh,
           // Check for two-factor authentication
           aal: aal,
-          returnTo: returnTo
+          ...(returnTo ? { returnTo } : {})
         });
         setFlow(data);
         if (flowId !== data.id) {
@@ -97,13 +97,13 @@ const KratosLogin = () => {
 
     if (flowId) {
       getFlow(flowId).catch(() => {
-        createFlow(refresh, aal, String(returnTo ?? "/"));
+        createFlow(refresh, aal, returnTo);
       });
       return;
     }
 
     // Otherwise we initialize it
-    createFlow(refresh, aal, returnTo ?? "/");
+    createFlow(refresh, aal, returnTo);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReady]);
 
@@ -115,7 +115,7 @@ const KratosLogin = () => {
           updateLoginFlowBody: values
         });
         setLoginSuccessful(true);
-        push(String(returnTo || "/"));
+        push(returnTo ?? "/");
       } catch (error) {
         if ((error as AxiosError).response?.status === 400) {
           // Yup, it is!
@@ -157,7 +157,6 @@ const KratosLogin = () => {
     }
   }, [flow, submitFlow, credentials]);
 
-
   return (
     <div className="w-96">
       <ToasterWithCloseButton />