Added login flow

client/hooks/useLogInFlow.ts

@@ -0,0 +1,53 @@
+import {
+  SelfServiceRegistrationFlow,
+  SubmitSelfServiceLoginFlowBody,
+} from "@ory/client"
+import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
+import ory from "../services/ory"
+import useSession from "./useSession"
+
+const useLogInFlow = () => {
+  const router = useRouter()
+  const [flow, setFlow] = useState<SelfServiceRegistrationFlow>()
+  const { flow: flowId } = router.query
+  const updateSession = useSession((state) => state.update)
+
+  useEffect(() => {
+    const func = async () => {
+      if (!router.isReady || flow) {
+        return
+      }
+
+      let serviceFlow
+      if (flowId) {
+        serviceFlow = await ory.getSelfServiceLoginFlow(String(flowId))
+      } else {
+        serviceFlow = await ory.initializeSelfServiceLoginFlowForBrowsers()
+      }
+
+      setFlow(serviceFlow.data)
+    }
+
+    func()
+  }, [flowId, router, router.isReady, flow])
+
+  const submitData = async (data: SubmitSelfServiceLoginFlowBody) => {
+    await router.push(`/login?flow=${flow?.id}`, undefined, {
+      shallow: true,
+    })
+    ory
+      .submitSelfServiceLoginFlow(String(flow?.id), undefined, data)
+      .then(async ({ data }) => {
+        updateSession(data.session)
+        await router.push(flow?.return_to || "/")
+      })
+      .catch((err) => {
+        console.log({ err })
+      })
+  }
+
+  return { flow, submitData }
+}
+
+export default useLogInFlow

client/hooks/useLogout.ts

@@ -0,0 +1,38 @@
+import { AxiosError } from "axios"
+import { useRouter } from "next/router"
+import { useState, useEffect, DependencyList } from "react"
+
+import ory from "../services/ory"
+import useSession from "./useSession"
+
+export function useLogout(deps?: DependencyList) {
+  const session = useSession()
+  const [logoutToken, setLogoutToken] = useState<string>("")
+  const router = useRouter()
+
+  useEffect(() => {
+    ory
+      .createSelfServiceLogoutFlowUrlForBrowsers()
+      .then(({ data }) => {
+        setLogoutToken(data.logout_token)
+      })
+      .catch((err: AxiosError) => {
+        switch (err.response?.status) {
+          case 401:
+            return
+        }
+
+        return Promise.reject(err)
+      })
+  }, deps)
+
+  return () => {
+    if (logoutToken) {
+      session.drop()
+      ory
+        .submitSelfServiceLogoutFlow(logoutToken)
+        .then(() => router.push("/"))
+        .then(() => router.reload())
+    }
+  }
+}

client/hooks/useSession.ts

@@ -0,0 +1,31 @@
+import create from "zustand"
+
+import { Session } from "@ory/client"
+import ory from "../services/ory"
+import { AxiosError } from "axios"
+
+export interface SessionState {
+  session?: Session
+
+  load: () => void
+  update: (data: Session) => void
+  drop: () => void
+}
+const useSession = create<SessionState>((set) => ({
+  session: undefined,
+
+  load: () => {
+    ory
+      .toSession()
+      .then(({ data }) => {
+        set({ session: data })
+      })
+      .catch((err: AxiosError) => {})
+  },
+  update: (session) => set({ session }),
+  drop: () => {
+    set({ session: undefined })
+  },
+}))
+
+export default useSession

client/hooks/useSignUpFlow.ts

@@ -1,15 +1,18 @@
 import {
   SelfServiceRegistrationFlow,
+  Session,
   SubmitSelfServiceRegistrationFlowBody,
 } from "@ory/client"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 import ory from "../services/ory"
+import useSession from "./useSession"
 
 export const useSignUpFlow = () => {
   const router = useRouter()
   const [flow, setFlow] = useState<SelfServiceRegistrationFlow>()
-  const { flow: flowId, return_to: returnTo } = router.query
+  const { flow: flowId } = router.query
+  const updateSession = useSession((state) => state.update)
 
   useEffect(() => {
     const func = async () => {
@@ -22,30 +25,28 @@ export const useSignUpFlow = () => {
         serviceFlow = await ory.getSelfServiceRegistrationFlow(String(flowId))
       } else {
         serviceFlow =
-          await ory.initializeSelfServiceRegistrationFlowForBrowsers(
-            returnTo ? String(returnTo) : undefined,
-          )
+          await ory.initializeSelfServiceRegistrationFlowForBrowsers()
       }
 
       setFlow(serviceFlow.data)
     }
 
     func()
-  }, [flowId, router, router.isReady, returnTo, flow])
+  }, [flowId, router, router.isReady, 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
-    }
+    ory
+      .submitSelfServiceRegistrationFlow(String(flow?.id), data)
+      .then(async ({ data }) => {
+        updateSession(data.session as Session)
+        await router.push(flow?.return_to || "/")
+      })
+      .catch((err) => {
+        console.log({ err })
+      })
   }
 
   return { flow, submitData }