Created seperate hook for signup flow

client/hooks/useSignUpFlow.ts

@@ -0,0 +1,54 @@
+import {
+  SelfServiceRegistrationFlow,
+  SubmitSelfServiceRegistrationFlowBody,
+} from "@ory/client"
+import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
+import ory from "../services/ory"
+
+export const useSignUpFlow = () => {
+  const router = useRouter()
+  const [flow, setFlow] = useState<SelfServiceRegistrationFlow>()
+  const { flow: flowId, return_to: returnTo } = router.query
+
+  useEffect(() => {
+    const func = async () => {
+      if (!router.isReady || flow) {
+        return
+      }
+
+      let serviceFlow
+      if (flowId) {
+        serviceFlow = await ory.getSelfServiceRegistrationFlow(String(flowId))
+      } else {
+        serviceFlow =
+          await ory.initializeSelfServiceRegistrationFlowForBrowsers(
+            returnTo ? String(returnTo) : undefined,
+          )
+      }
+
+      setFlow(serviceFlow.data)
+    }
+
+    func()
+  }, [flowId, router, router.isReady, returnTo, flow])
+
+  const submitData = async (data: SubmitSelfServiceRegistrationFlowBody) => {
+    await router.push(`/signup?flow=${flow?.id}`, undefined, {
+      shallow: true,
+    })
+    try {
+      const resp = await ory.submitSelfServiceRegistrationFlow(
+        String(flow?.id),
+        data,
+      )
+      // TODO: handle registration
+    } catch (e) {
+      // TODO: handle errors
+    }
+  }
+
+  return { flow, submitData }
+}
+
+export default useSignUpFlow