From cc7df5a842839e9e54340cb2e617d5051364b7e6 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Sun, 19 Nov 2023 17:11:02 +0300
Subject: [PATCH] fix: fix issue with sign in with microsoft

---
 .../Authentication/Kratos/KratosLogin.tsx     |  2 +-
 src/components/ory/helpers.ts                 | 17 ++++-
 src/components/ory/hooks.ts                   | 10 ++-
 src/components/ory/ui/Flow.tsx                | 68 +++++++++----------
 4 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/src/components/Authentication/Kratos/KratosLogin.tsx b/src/components/Authentication/Kratos/KratosLogin.tsx
index 4102f281c8..f7a687d916 100644
--- a/src/components/Authentication/Kratos/KratosLogin.tsx
+++ b/src/components/Authentication/Kratos/KratosLogin.tsx
@@ -54,7 +54,7 @@ const Login: NextPage = () => {
         })
         .then(({ data }) => {
           setFlow(data);
-          SetUriFlow(Router, data.id);
+          SetUriFlow(Router, data.id, returnTo);
         })
         .catch(handleError),
     [handleError]
diff --git a/src/components/ory/helpers.ts b/src/components/ory/helpers.ts
index 035c2258a0..88211cf9b8 100644
--- a/src/components/ory/helpers.ts
+++ b/src/components/ory/helpers.ts
@@ -3,11 +3,24 @@
 
 import { NextRouter } from "next/router";
 
-export const SetUriFlow = (router: NextRouter, id: string) => {
+export const SetUriFlow = (
+  router: NextRouter,
+  id: string,
+  returnTo: string
+) => {
   // Check that current query flow id does not match requested one - pushing will trigger useEffect if router bound
   if (router.query.flow === id) {
     return;
   }
 
-  router.push(`${router.pathname}?flow=${id}`, undefined, { shallow: true });
+  router.push(
+    `${router.pathname}`,
+    {
+      query: {
+        return_to: returnTo,
+        flow: id
+      }
+    },
+    { shallow: true }
+  );
 };
diff --git a/src/components/ory/hooks.ts b/src/components/ory/hooks.ts
index 643f5f6a29..4dc1f3f6f3 100644
--- a/src/components/ory/hooks.ts
+++ b/src/components/ory/hooks.ts
@@ -173,12 +173,10 @@ export function useCreateLogoutHandler(deps?: DependencyList) {
   const handleError = HandleError();
   const { push } = useRouter();
 
-  const returnTo = useMemo(() => {
-    if (typeof window !== "undefined") {
-      return window.location.pathname + window.location.search;
-    }
-    return undefined;
-  }, []);
+  const returnTo =
+    typeof window !== "undefined"
+      ? window.location.pathname + window.location.search
+      : undefined;
 
   useEffect(() => {
     ory
diff --git a/src/components/ory/ui/Flow.tsx b/src/components/ory/ui/Flow.tsx
index 4fb8cafbf0..e1e7f738d4 100644
--- a/src/components/ory/ui/Flow.tsx
+++ b/src/components/ory/ui/Flow.tsx
@@ -201,42 +201,40 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
               />
             );
           })}
+          <hr className="border-gray-200 my-3" />
+          <div className="flex flex-col">
+            {filterNodesByGroups({
+              nodes: nodes,
+              groups: ["oidc", "webauthn"],
+              withoutDefaultGroup: true
+            }).map((node, k) => {
+              const id = getNodeId(node) as keyof Values;
+              return (
+                <Node
+                  key={`${id}-${k}`}
+                  disabled={isLoading}
+                  node={node}
+                  value={values[id]}
+                  dispatchSubmit={this.handleSubmit}
+                  setValue={(value) =>
+                    new Promise((resolve) => {
+                      this.setState(
+                        (state) => ({
+                          ...state,
+                          values: {
+                            ...state.values,
+                            [getNodeId(node)]: value
+                          }
+                        }),
+                        resolve
+                      );
+                    })
+                  }
+                />
+              );
+            })}
+          </div>
         </form>
-
-        <hr className="border-gray-200 my-3" />
-
-        <div className="flex flex-col">
-          {filterNodesByGroups({
-            nodes: nodes,
-            groups: ["oidc", "webauthn"],
-            withoutDefaultGroup: true
-          }).map((node, k) => {
-            const id = getNodeId(node) as keyof Values;
-            return (
-              <Node
-                key={`${id}-${k}`}
-                disabled={isLoading}
-                node={node}
-                value={values[id]}
-                dispatchSubmit={this.handleSubmit}
-                setValue={(value) =>
-                  new Promise((resolve) => {
-                    this.setState(
-                      (state) => ({
-                        ...state,
-                        values: {
-                          ...state.values,
-                          [getNodeId(node)]: value
-                        }
-                      }),
-                      resolve
-                    );
-                  })
-                }
-              />
-            );
-          })}
-        </div>
       </div>
     );
   }