fix: revert the login form to example code and update ory client

#1443

package.json

@@ -16,7 +16,7 @@
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.4.6",
     "@netlify/plugin-nextjs": "^4.40.0",
-    "@ory/client": "^1.2.11",
+    "@ory/client": "^1.2.17",
     "@ory/integrations": "^1.1.5",
     "@storybook/client-api": "^7.2.2",
     "@storybook/theming": "^7.2.2",

src/components/Authentication/Kratos/KratosLogin.tsx

@@ -28,56 +28,67 @@ const Login: NextPage = () => {
   const onLogout = useCreateLogoutHandler([aal, refresh]);
 
   useEffect(() => {
-    const fetchFlow = async () => {
-      if (!router.isReady || flow) {
-        return;
-      }
+    // If the router is not ready yet, or we already have a flow, do nothing.
+    if (!router.isReady || flow) {
+      return;
+    }
 
-      if (flowId) {
-        try {
-          const { data } = await ory.getLoginFlow({ id: String(flowId) });
+    // If ?flow=.. was in the URL, we fetch it
+    if (flowId) {
+      ory
+        .getLoginFlow({ id: String(flowId) })
+        .then(({ data }) => {
           setFlow(data);
-        } catch (err: any) {
-          await handleGetFlowError(router, "login", setFlow)(err);
-        }
-        return;
-      }
+        })
+        .catch(handleGetFlowError(router, "login", setFlow));
+      return;
+    }
 
-      try {
-        const { data } = await ory.createBrowserLoginFlow({
-          returnTo: returnTo ? String(returnTo) : undefined,
-          refresh: Boolean(refresh),
-          aal: aal ? String(aal) : undefined
-        });
+    // Otherwise we initialize it
+    ory
+      .createBrowserLoginFlow({
+        refresh: Boolean(refresh),
+        aal: aal ? String(aal) : undefined,
+        returnTo: returnTo ? String(returnTo) : undefined
+      })
+      .then(({ data }) => {
         setFlow(data);
-      } catch (err: any) {
-        await handleFlowError(router, "login", setFlow)(err);
-      }
-    };
-
-    fetchFlow();
+      })
+      .catch(handleFlowError(router, "login", setFlow));
   }, [flowId, router, router.isReady, aal, refresh, returnTo, flow]);
 
-  const onSubmit = async (values: UpdateLoginFlowBody) => {
-    try {
-      await router.push(`/login?flow=${flow?.id}`, undefined, {
-        shallow: true
-      });
-      await ory.updateLoginFlow({
-        flow: flow?.id!,
-        updateLoginFlowBody: values
-      });
-      window.location.href = flow?.return_to ?? "/";
-    } catch (err: any) {
-      console.error(err);
-      await handleFlowError(router, "login", setFlow)(err);
-      if (err.response?.status === 400) {
-        setFlow((err.response as any).data);
-      } else {
-        throw err;
-      }
-    }
-  };
+  const onSubmit = (values: UpdateLoginFlowBody) =>
+    router
+      // On submission, add the flow ID to the URL but do not navigate. This prevents the user loosing
+      // his data when she/he reloads the page.
+      .push(`/login?flow=${flow?.id}`, undefined, { shallow: true })
+      .then(() =>
+        ory
+          .updateLoginFlow({
+            flow: String(flow?.id),
+            updateLoginFlowBody: values
+          })
+          // We logged in successfully! Let's bring the user home.
+          .then(() => {
+            if (flow?.return_to) {
+              window.location.href = flow?.return_to;
+              return;
+            }
+            router.push("/");
+          })
+          .then(() => {})
+          .catch(handleFlowError(router, "login", setFlow))
+          .catch((err: any) => {
+            // If the previous handler did not catch the error it's most likely a form validation error
+            if (err.response?.status === 400) {
+              // Yup, it is!
+              setFlow(err.response?.data);
+              return;
+            }
+
+            return Promise.reject(err);
+          })
+      );
 
   return (
     <div className="w-96">