chore: synchronize workspaces

examples/nextjs-app-router/app/auth/login/page.tsx

@@ -6,7 +6,7 @@ import { getLoginFlow, OryPageParams } from "@ory/nextjs/app"
 import { enhanceConfig } from "@ory/nextjs"
 
 import config from "@/ory.config"
-import CardHeader from "@/app/auth/login/card-header"
+import CustomCardHeader from "@/components/custom-card-header"
 
 export default async function LoginPage(props: OryPageParams) {
   const flow = await getLoginFlow(props.searchParams)
@@ -20,9 +20,7 @@ export default async function LoginPage(props: OryPageParams) {
       flow={flow}
       config={enhanceConfig(config)}
       components={{
-        Card: {
-          Header: CardHeader,
-        },
+        Card: {},
       }}
     />
   )

examples/nextjs-app-router/app/auth/recovery/page.tsx

@@ -0,0 +1,29 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { Recovery } from "@ory/elements-react/theme"
+import { getRecoveryFlow, OryPageParams } from "@ory/nextjs/app"
+import { enhanceConfig } from "@ory/nextjs"
+
+import config from "@/ory.config"
+import CustomCardHeader from "@/components/custom-card-header"
+
+export default async function RecoveryPage(props: OryPageParams) {
+  const flow = await getRecoveryFlow(props.searchParams)
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <Recovery
+      flow={flow}
+      config={enhanceConfig(config)}
+      components={{
+        Card: {
+          Header: CustomCardHeader,
+        },
+      }}
+    />
+  )
+}

examples/nextjs-app-router/app/auth/registration/page.tsx

@@ -0,0 +1,27 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { Registration } from "@ory/elements-react/theme"
+import { getRegistrationFlow, OryPageParams } from "@ory/nextjs/app"
+import { enhanceConfig } from "@ory/nextjs"
+
+import config from "@/ory.config"
+import CustomCardHeader from "@/components/custom-card-header"
+
+export default async function RegistrationPage(props: OryPageParams) {
+  const flow = await getRegistrationFlow(props.searchParams)
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <Registration
+      flow={flow}
+      config={enhanceConfig(config)}
+      components={{
+        Card: {},
+      }}
+    />
+  )
+}

examples/nextjs-app-router/app/auth/verification/page.tsx

@@ -0,0 +1,29 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { Verification } from "@ory/elements-react/theme"
+import { getVerificationFlow, OryPageParams } from "@ory/nextjs/app"
+import { enhanceConfig } from "@ory/nextjs"
+
+import config from "@/ory.config"
+import CustomCardHeader from "@/components/custom-card-header"
+
+export default async function VerificationPage(props: OryPageParams) {
+  const flow = await getVerificationFlow(props.searchParams)
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <Verification
+      flow={flow}
+      config={enhanceConfig(config)}
+      components={{
+        Card: {
+          Header: CustomCardHeader,
+        },
+      }}
+    />
+  )
+}

examples/nextjs-app-router/app/auth/login/card-header.tsx → examples/nextjs-app-router/components/custom-card-header.tsx

@@ -3,6 +3,6 @@
 
 "use client"
 
-export default function CardHeader() {
+export default function CustomCardHeader() {
   return <div>My custom card header</div>
 }

examples/nextjs-app-router/ory.config.ts

@@ -7,6 +7,9 @@ const config: OryConfig = {
   override: {
     applicationName: "NextJS app router example",
     loginUiPath: "/auth/login",
+    registrationUiPath: "/auth/registration",
+    recoveryUiPath: "/auth/recovery",
+    verificationUiPath: "/auth/verification",
   },
 }
 

examples/nextjs-pages-router/ory.config.ts

@@ -6,7 +6,10 @@ import type { OryConfig } from "@ory/nextjs"
 const config: OryConfig = {
   override: {
     applicationName: "NextJS pages router example",
+    loginUiPath: "/auth/login",
     registrationUiPath: "/auth/registration",
+    recoveryUiPath: "/auth/recovery",
+    verificationUiPath: "/auth/verification",
   },
 }
 

examples/nextjs-pages-router/pages/auth/login.tsx

@@ -0,0 +1,29 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+"use client"
+import { Login } from "@ory/elements-react/theme"
+import { useLoginFlow } from "@ory/nextjs/pages"
+import { enhanceConfig } from "@ory/nextjs"
+import "@ory/elements-react/theme/styles.css"
+
+import config from "@/ory.config"
+
+export default function LoginPage() {
+  const flow = useLoginFlow()
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <div className="pt-4">
+      <Login
+        flow={flow}
+        config={enhanceConfig(config)}
+        components={{
+          Card: {},
+        }}
+      />
+    </div>
+  )
+}

examples/nextjs-pages-router/pages/auth/recovery.tsx

@@ -0,0 +1,29 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+"use client"
+import { Recovery } from "@ory/elements-react/theme"
+import { useRecoveryFlow } from "@ory/nextjs/pages"
+import { enhanceConfig } from "@ory/nextjs"
+import "@ory/elements-react/theme/styles.css"
+
+import config from "@/ory.config"
+
+export default function RecoveryPage() {
+  const flow = useRecoveryFlow()
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <div className="pt-4">
+      <Recovery
+        flow={flow}
+        config={enhanceConfig(config)}
+        components={{
+          Card: {},
+        }}
+      />
+    </div>
+  )
+}

examples/nextjs-pages-router/pages/auth/verification.tsx

@@ -0,0 +1,29 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+"use client"
+import { Verification } from "@ory/elements-react/theme"
+import { useVerificationFlow } from "@ory/nextjs/pages"
+import { enhanceConfig } from "@ory/nextjs"
+import "@ory/elements-react/theme/styles.css"
+
+import config from "@/ory.config"
+
+export default function VerificationPage() {
+  const flow = useVerificationFlow()
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <div className="pt-4">
+      <Verification
+        flow={flow}
+        config={enhanceConfig(config)}
+        components={{
+          Card: {},
+        }}
+      />
+    </div>
+  )
+}

packages/nextjs/src/app/flow.ts

@@ -0,0 +1,64 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { redirect, RedirectType } from "next/navigation"
+import { FlowType, handleFlowError } from "@ory/client-fetch"
+
+import { getPublicUrl, onRedirect } from "./utils"
+import { QueryParams } from "../types"
+import { guessPotentiallyProxiedOrySdkUrl } from "../utils/sdk"
+import { onValidationError } from "../utils/utils"
+import { rewriteJsonResponse } from "../utils/rewrite"
+import * as runtime from "@ory/client-fetch/src/runtime"
+
+export async function getFlow<T extends object>(
+  params: QueryParams | Promise<QueryParams>,
+  fetchFlowRaw: () => Promise<runtime.ApiResponse<T>>,
+  flowType: FlowType,
+): Promise<T | null | void> {
+  const p = await params
+
+  // Guess our own public url using Next.js helpers. We need the hostname, port, and protocol.
+  const knownProxiedUrl = await getPublicUrl()
+
+  const onRestartFlow = () => {
+    return redirect(
+      new URL(
+        "/self-service/" +
+          flowType.toString() +
+          "/browser?" +
+          params.toString(),
+        guessPotentiallyProxiedOrySdkUrl({
+          knownProxiedUrl,
+        }),
+      ).toString(),
+      RedirectType.replace,
+    )
+  }
+
+  if (!p["flow"]) {
+    onRestartFlow()
+    return
+  }
+
+  try {
+    const rawResponse = await fetchFlowRaw()
+    return await rawResponse
+      .value()
+      .then(
+        (v: T): T =>
+          rewriteJsonResponse(
+            v,
+            guessPotentiallyProxiedOrySdkUrl({ knownProxiedUrl }),
+          ),
+      )
+  } catch (error) {
+    const errorHandler = handleFlowError({
+      onValidationError,
+      onRestartFlow,
+      onRedirect: onRedirect,
+    })
+    await errorHandler(error)
+    return null
+  }
+}

packages/nextjs/src/app/index.ts

@@ -3,4 +3,8 @@
 "use server"
 
 export { getLoginFlow } from "./login"
+export { getRegistrationFlow } from "./registration"
+export { getRecoveryFlow } from "./recovery"
+export { getVerificationFlow } from "./verification"
+
 export type { OryPageParams } from "./utils"