feat: add @ory/nextjs package

.github/codecov.yml

@@ -0,0 +1,18 @@
+flag_management:
+  default_rules:
+    carryforward: true
+    statuses:
+      - type: project
+        target: auto
+        threshold: 1%
+      - type: patch
+        target: 90%
+  individual_flags:
+    - name: "@ory/elements-react"
+      paths:
+        - packages/elements-react
+      carryforward: true
+    - name: "@ory/nextjs"
+      paths:
+        - packages/nextjs
+      carryforward: true

.github/workflows/ci.yml

@@ -51,3 +51,4 @@ jobs:
         uses: codecov/codecov-action@v4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
+          codecov_yml_path: .github/codecov.yml

packages/nextjs/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  // "extends": ["../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

packages/nextjs/README.md

@@ -0,0 +1,17 @@
+# nextjs
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build @ory/nextjs` to build the library.
+
+## Developing
+
+Run `nx dev @ory/nextjs` to watch the source code for changes and continuously
+build the library.
+
+## Running unit tests
+
+Run `nx test @ory/nextjs` to execute the unit tests via
+[Jest](https://jestjs.io).

packages/nextjs/jest.config.ts

@@ -0,0 +1,15 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable */
+export default {
+  displayName: "nextjs",
+  preset: "../../jest.preset.js",
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.[tj]s$": ["ts-jest", { tsconfig: "<rootDir>/tsconfig.spec.json" }],
+  },
+  collectCoverageFrom: ["src/**/*.ts", "src/**/*.js"],
+  moduleFileExtensions: ["ts", "js", "html"],
+  coverageDirectory: "../../coverage/packages/nextjs",
+}

packages/nextjs/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@ory/nextjs",
+  "version": "0.0.1",
+  "type": "commonjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "private": false,
+  "dependencies": {
+    "@ory/client-fetch": "^1.15.6",
+    "cookie": "^1.0.1",
+    "psl": "^1.10.0",
+    "set-cookie-parser": "^2.7.1"
+  },
+  "devDependencies": {
+    "@types/cookie": "^0.6.0",
+    "@types/psl": "^1.1.3",
+    "@types/set-cookie-parser": "^2.4.10",
+    "babel-jest": "^29.7.0",
+    "jest-esm-transformer": "^1.0.0",
+    "tsup": "8.3.0"
+  },
+  "keywords": [
+    "ory",
+    "auth",
+    "react",
+    "passwordless",
+    "login",
+    "user management",
+    "permissions",
+    "authentication",
+    "nextjs",
+    "vercel",
+    "app router",
+    "pages router"
+  ],
+  "peerDependencies": {
+    "next": ">=13.1.0",
+    "react": ">=16.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./middleware": {
+      "types": "./dist/middleware/index.d.ts",
+      "import": "./dist/middleware/index.mjs",
+      "require": "./dist/middleware/index.js"
+    },
+    "./app": {
+      "types": "./dist/app/index.d.ts",
+      "import": "./dist/app/index.mjs",
+      "require": "./dist/app/index.js"
+    },
+    "./pages": {
+      "types": "./dist/pages/index.d.ts",
+      "import": "./dist/pages/index.mjs",
+      "require": "./dist/pages/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "index": [
+        "./dist/index.d.ts"
+      ],
+      "middleware": [
+        "./dist/middleware/index.d.ts"
+      ]
+    }
+  }
+}

packages/nextjs/project.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ory/nextjs",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/nextjs/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "command": "tsup --clean --dts",
+      "options": {
+        "cwd": "packages/nextjs"
+      }
+    },
+    "dev": {
+      "command": "tsup --watch --dts",
+      "options": {
+        "cwd": "packages/nextjs"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "dependsOn": ["build"],
+      "options": {
+        "jestConfig": "packages/nextjs/jest.config.ts",
+        "coverage": true,
+        "coverageReporters": ["text", "cobertura"]
+      }
+    }
+  }
+}

packages/nextjs/src/app/client.ts

@@ -0,0 +1,15 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { Configuration, FrontendApi } from "@ory/client-fetch"
+
+import { orySdkUrl } from "../utils/sdk"
+
+export const serverSideFrontendClient = new FrontendApi(
+  new Configuration({
+    headers: {
+      Accept: "application/json",
+    },
+    basePath: orySdkUrl(),
+  }),
+)

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

@@ -0,0 +1,10 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+"use server"
+
+export { getLoginFlow } from "./login"
+export { getRegistrationFlow } from "./registration"
+export { getRecoveryFlow } from "./recovery"
+export { getVerificationFlow } from "./verification"
+
+export type { OryPageParams } from "./utils"

packages/nextjs/src/app/layout.tsx

@@ -0,0 +1,13 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+import { PropsWithChildren } from "react"
+
+import "@ory/elements-react/theme/styles.css"
+
+export default async function AuthLayout({ children }: PropsWithChildren) {
+  return (
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
+      {children}
+    </main>
+  )
+}

packages/nextjs/src/app/login.ts

@@ -0,0 +1,53 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+import { FlowType, LoginFlow } from "@ory/client-fetch"
+
+import { initOverrides, QueryParams } from "../types"
+import { serverSideFrontendClient } from "./client"
+import { getFlow } from "./flow"
+import { toFlowParams } from "./utils"
+
+/**
+ * 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 { Login } from "@ory/elements-react/theme"
+ * 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"
+ *
+ * export default async function LoginPage(props: OryPageParams) {
+ *   const flow = await getLoginFlow(props.searchParams)
+ *
+ *   if (!flow) {
+ *     return null
+ *   }
+ *
+ *   return (
+ *     <Login
+ *       flow={flow}
+ *       config={enhanceConfig(config)}
+ *       components={{
+ *         Card: {
+ *           Header: CardHeader,
+ *         },
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @param params The query parameters of the request.
+ */
+export async function getLoginFlow(
+  params: QueryParams | Promise<QueryParams>,
+): Promise<LoginFlow | null | void> {
+  const p = await toFlowParams(await params)
+  return getFlow(
+    params,
+    () => serverSideFrontendClient.getLoginFlowRaw(p, initOverrides),
+    FlowType.Login,
+  )
+}