feat: add nextjs package

packages/elements-nextjs/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ory/elements-nextjs",
+  "version": "1.0.0-next.10",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "index": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@ory/client-fetch": "^1.15.4"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+  },
+  "keywords": [
+    "ory",
+    "auth",
+    "nextjs",
+    "react",
+    "passwordless",
+    "authentication",
+    "passkeys"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/ory/elements.git",
+    "directory": "packages/elements-nextjs"
+  },
+  "bugs": {
+    "url": "https://github.com/ory/elements/issues"
+  },
+  "homepage": "https://github.com/ory/elements#readme",
+  "author": "Ory Corp",
+  "license": "Apache License 2.0",
+  "description": "Ory Elements React - a collection of React components for authentication UIs.",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/elements-nextjs/src/router/app/error.ts

@@ -0,0 +1,55 @@
+import { init, initOverrides, onRedirect, QueryParams, toValue } from "./utils"
+import { FlowType, FlowError, handleFlowError ,FrontendApi} from "@ory/client-fetch"
+
+/**
+ * Use this method in an app router page to fetch an existing flow error. This method works with server-side rendering.
+ *
+ * ```
+ * import { getOrCreateErrorFlow } from "$/elements/frameworks/nextjs/routers/app/error"
+ * import { Error } from "$/elements/headless/flows/error"
+ *
+ * export default async function ErrorPage({ searchParams }: PageProps) {
+ *   const flow = await getFlowError(searchParams)
+ *
+ *   return (
+ *     <Error
+ *       flow={flow}
+ *       config={{
+ *         name: "My Project",
+ *         sdk: { url: "https://<project.slug>.projects.oryapis.com" },
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @param params The query parameters of the request.
+ */
+export function getFlowError(client: FrontendApi): (params: QueryParams) => Promise<FlowError> {
+  return async (params: QueryParams) => {
+    // Restart in an error scenario happens when the error does not exist or is expired. In that case there is
+    // nothing to do but try to sign in, which will redirect us if we're already logged in.
+    const onRestartFlow = () => init(params, FlowType.Login)
+    if (!params.id) {
+      return onRestartFlow()
+    }
+
+    try {
+      const response = await client.getFlowErrorRaw(
+        {
+          id: params.id,
+        },
+        initOverrides,
+      )
+      return toValue(response)
+    } catch (error) {
+      const errorHandler = handleFlowError({
+        onValidationError: () => onRestartFlow(),
+        onRestartFlow,
+        onRedirect,
+      })
+      await errorHandler(error)
+      return null
+    }
+  }
+}

packages/elements-nextjs/src/router/app/index.ts

@@ -0,0 +1,15 @@
+import { getFlowError } from "./error"
+import { getOrCreateLoginFlow } from "./login"
+import { getOrCreateRecoveryFlow } from "./recovery"
+import { getOrCreateRegistrationFlow } from "./registration"
+import { getOrCreateSettingsFlow } from "./settings"
+import { getOrCreateVerificationFlow } from "./verification"
+
+export {
+  getFlowError,
+  getOrCreateLoginFlow,
+  getOrCreateRecoveryFlow,
+  getOrCreateRegistrationFlow,
+  getOrCreateSettingsFlow,
+  getOrCreateVerificationFlow,
+}

packages/elements-nextjs/src/router/app/login.ts

@@ -0,0 +1,62 @@
+import {
+  init,
+  initOverrides,
+  onRedirect,
+  onValidationError,
+  QueryParams,
+  requestParams,
+  toValue,
+} from "$/elements/frameworks/nextjs/routers/app/utils"
+import { serverClientFrontend } from "$/utils/sdk"
+import { LoginFlow } from "@ory-corp/client"
+import { FlowType, handleFlowError } from "@ory/client-fetch"
+
+/**
+ * Use this method in an app router page to fetch an existing login flow or to create a new one. This method works with server-side rendering.
+ *
+ * ```
+ * import { getOrCreateLoginFlow } from "$/elements/frameworks/nextjs/routers/app/login"
+ * import { Login } from "$/elements/headless/flows/login"
+ *
+ * export default async function LoginPage({ searchParams }: PageProps) {
+ *   const flow = await getOrCreateLoginFlow(searchParams)
+ *
+ *   return (
+ *     <Login
+ *       flow={flow}
+ *       config={{
+ *         name: "My Project",
+ *         sdk: { url: "https://<project.slug>.projects.oryapis.com" },
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @param params The query parameters of the request.
+ */
+export async function getOrCreateLoginFlow(
+  params: QueryParams,
+): Promise<LoginFlow | null> {
+  const onRestartFlow = () => init(params, FlowType.Login)
+  if (!params.flow) {
+    return onRestartFlow()
+  }
+
+  try {
+    const resp = await serverClientFrontend().getLoginFlowRaw(
+      requestParams(params),
+      initOverrides,
+    )
+
+    return toValue(resp)
+  } catch (error) {
+    const errorHandler = handleFlowError({
+      onValidationError,
+      onRestartFlow,
+      onRedirect,
+    })
+    errorHandler(error)
+    return null
+  }
+}

packages/elements-nextjs/src/router/app/recovery.ts

@@ -0,0 +1,61 @@
+import {
+  init,
+  initOverrides,
+  onRedirect,
+  onValidationError,
+  QueryParams,
+  requestParams,
+  toValue,
+} from "$/elements/frameworks/nextjs/routers/app/utils"
+import { serverClientFrontend } from "$/utils/sdk"
+import { RecoveryFlow } from "@ory-corp/client"
+import { FlowType, handleFlowError } from "@ory/client-fetch"
+
+/**
+ * Use this method in an app router page to fetch an existing recovery flow or to create a new one. This method works with server-side rendering.
+ *
+ * ```
+ * import { getOrCreateRecoveryFlow } from "$/elements/frameworks/nextjs/routers/app/recovery"
+ * import { Recovery } from "$/elements/headless/flows/recovery"
+ *
+ * export default async function RecoveryPage({ searchParams }: PageProps) {
+ *   const flow = await getOrCreateRecoveryFlow(searchParams)
+ *
+ *   return (
+ *     <Recovery
+ *       flow={flow}
+ *       config={{
+ *         name: "My Project",
+ *         sdk: { url: "https://<project.slug>.projects.oryapis.com" },
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @param params The query parameters of the request.
+ */
+export async function getOrCreateRecoveryFlow(
+  params: QueryParams,
+): Promise<RecoveryFlow | null> {
+  const onRestartFlow = () => init(params, FlowType.Recovery)
+  if (!params.flow) {
+    return onRestartFlow()
+  }
+
+  try {
+    const response = await serverClientFrontend().getRecoveryFlowRaw(
+      requestParams(params),
+      initOverrides,
+    )
+    return toValue<RecoveryFlow>(response)
+  } catch (error) {
+    const errorHandler = handleFlowError({
+      onValidationError,
+      onRestartFlow,
+      onRedirect,
+    })
+    errorHandler(error)
+    return null
+  }
+}

packages/elements-nextjs/src/router/app/registration.ts

@@ -0,0 +1,61 @@
+import {
+  init,
+  initOverrides,
+  onRedirect,
+  onValidationError,
+  QueryParams,
+  requestParams,
+  toValue,
+} from "$/elements/frameworks/nextjs/routers/app/utils"
+import { serverClientFrontend } from "$/utils/sdk"
+import { RegistrationFlow } from "@ory-corp/client"
+import { FlowType, handleFlowError } from "@ory/client-fetch"
+
+/**
+ * Use this method in an app router page to fetch an existing registration flow or to create a new one. This method works with server-side rendering.
+ *
+ * ```
+ * import { getOrCreateRegistrationFlow } from "$/elements/frameworks/nextjs/routers/app/registration"
+ * import { Registration } from "$/elements/headless/flows/registration"
+ *
+ * export default async function RegistrationPage({ searchParams }: PageProps) {
+ *   const flow = await getOrCreateRegistrationFlow(searchParams)
+ *
+ *   return (
+ *     <Registration
+ *       flow={flow}
+ *       config={{
+ *         name: "My Project",
+ *         sdk: { url: "https://<project.slug>.projects.oryapis.com" },
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @param params The query parameters of the request.
+ */
+export async function getOrCreateRegistrationFlow(
+  params: QueryParams,
+): Promise<RegistrationFlow | null> {
+  const onRestartFlow = () => init(params, FlowType.Registration)
+  if (!params.flow) {
+    return onRestartFlow()
+  }
+
+  try {
+    const response = await serverClientFrontend().getRegistrationFlowRaw(
+      requestParams(params),
+      initOverrides,
+    )
+    return toValue<RegistrationFlow>(response)
+  } catch (error) {
+    const errorHandler = handleFlowError({
+      onValidationError,
+      onRestartFlow,
+      onRedirect,
+    })
+    errorHandler(error)
+    return null
+  }
+}