diff --git a/examples/nextjs-app-router/middleware.ts b/examples/nextjs-app-router/middleware.ts index f38bfa5e..5d713195 100644 --- a/examples/nextjs-app-router/middleware.ts +++ b/examples/nextjs-app-router/middleware.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { createOryMiddleware } from "@ory/nextjs/middleware" -import oryConfig from "./ory.config" +import oryConfig from "@/ory.config" // This function can be marked `async` if using `await` inside export const middleware = createOryMiddleware(oryConfig) diff --git a/examples/nextjs-pages-router/.env b/examples/nextjs-pages-router/.env new file mode 100644 index 00000000..5428a38d --- /dev/null +++ b/examples/nextjs-pages-router/.env @@ -0,0 +1,2 @@ +NEXT_PUBLIC_ORY_SDK_URL=https://amazing-goldberg-vrybkrc0c1.projects.oryapis.com +ORY_SDK_URL=https://amazing-goldberg-vrybkrc0c1.projects.oryapis.com diff --git a/examples/nextjs-pages-router/pages/auth/login.tsx b/examples/nextjs-pages-router/pages/auth/registration.tsx similarity index 59% rename from examples/nextjs-pages-router/pages/auth/login.tsx rename to examples/nextjs-pages-router/pages/auth/registration.tsx index 6fa77e5e..e0da560b 100644 --- a/examples/nextjs-pages-router/pages/auth/login.tsx +++ b/examples/nextjs-pages-router/pages/auth/registration.tsx @@ -1,20 +1,15 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 - import { Registration } from "@ory/elements-react/theme" import { useRegistrationFlow, - getRegistrationServerSideProps, } from "@ory/nextjs/pages" - import { useOryConfig } from "@ory/nextjs" -import config from "nextjs-app-router/ory.config" -// This gets called on every request -export const getServerSideProps = getRegistrationServerSideProps +import config from "@/ory.config" -export default async function RegistrationPage() { - const flow = await useRegistrationFlow() +export default function LoginPage() { + const flow = useRegistrationFlow() if (!flow) { return null diff --git a/examples/nextjs-pages-router/tsconfig.json b/examples/nextjs-pages-router/tsconfig.json index 649790e5..0febbe75 100644 --- a/examples/nextjs-pages-router/tsconfig.json +++ b/examples/nextjs-pages-router/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -13,9 +17,18 @@ "jsx": "preserve", "incremental": true, "paths": { - "@/*": ["./*"] - } + "@/*": [ + "./*" + ] + }, + "target": "ES2017" }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "node_modules" + ] } diff --git a/package-lock.json b/package-lock.json index 727b4e6a..9c6ba930 100644 --- a/package-lock.json +++ b/package-lock.json @@ -562,6 +562,7 @@ "version": "0.1.0", "dependencies": { "@ory/nextjs": "^0.0.1", + "lodash": "^4.17.21", "next": "^15.0.3", "react": "^18", "react-dom": "^18" @@ -25974,8 +25975,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "license": "MIT" + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.clonedeepwith": { "version": "4.5.0", diff --git a/packages/nextjs/project.json b/packages/nextjs/project.json index 4a7732b1..c28dd483 100644 --- a/packages/nextjs/project.json +++ b/packages/nextjs/project.json @@ -10,6 +10,12 @@ "options": { "cwd": "packages/nextjs" } + }, + "dev": { + "command": "tsup --watch --dts", + "options": { + "cwd": "packages/nextjs" + } } } } diff --git a/packages/nextjs/src/middleware/middleware.ts b/packages/nextjs/src/middleware/middleware.ts index 8295d040..e6f15dd4 100644 --- a/packages/nextjs/src/middleware/middleware.ts +++ b/packages/nextjs/src/middleware/middleware.ts @@ -6,16 +6,7 @@ import { rewriteUrls } from "../rewrite" import { filterRequestHeaders, processSetCookieHeaders } from "../utils" import { OryConfig } from "../types" import { defaultOmitHeaders } from "../headers" - -function getProjectSdkUrl() { - let baseUrl = "" - - if (process.env["ORY_SDK_URL"]) { - baseUrl = process.env["ORY_SDK_URL"] - } - - return baseUrl.replace(/\/$/, "") -} +import {getProjectSdkUrl} from "../sdk"; function getProjectApiKey() { let baseUrl = "" @@ -104,7 +95,6 @@ async function proxyRequest(request: NextRequest, options: OryConfig) { selfUrl, options, ) - console.log({originalLocation, location}) if (!location.startsWith("http")) { // console.debug('rewriting location', selfUrl, location, new URL(location, selfUrl).toString()) diff --git a/packages/nextjs/src/pages/index.ts b/packages/nextjs/src/pages/index.ts index ad8b3c89..6c26025d 100644 --- a/packages/nextjs/src/pages/index.ts +++ b/packages/nextjs/src/pages/index.ts @@ -3,5 +3,6 @@ export { useRegistrationFlow, - getRegistrationServerSideProps, } from "./registration" + +export type {RegistrationPageProps} from "./registration" \ No newline at end of file diff --git a/packages/nextjs/src/pages/registration.ts b/packages/nextjs/src/pages/registration.ts index 52369654..50895bb9 100644 --- a/packages/nextjs/src/pages/registration.ts +++ b/packages/nextjs/src/pages/registration.ts @@ -1,22 +1,21 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -"use client" -import { FlowType, handleFlowError, RegistrationFlow } from "@ory/client-fetch" + import { useEffect, useState } from "react" +import { + FlowType, + handleFlowError, + RegistrationFlow, +} from "@ory/client-fetch" import { useRouter } from "next/router" import { newOryFrontendClient } from "../sdk" -import { onValidationError, toBrowserEndpointRedirect, toValue } from "../utils" -import { GetServerSidePropsContext } from "next" +import { onValidationError } from "../utils" import { useSearchParams } from "next/navigation" -import { handleRestartFlow, toSearchParams, useOnRedirect } from "./utils" +import { handleRestartFlow, useOnRedirect } from "./utils" const client = newOryFrontendClient() -export interface RegistrationPageProps { - flow: RegistrationFlow -} - -export async function useRegistrationFlow(): Promise { +export function useRegistrationFlow(): RegistrationFlow | null | void { const [flow, setFlow] = useState() const router = useRouter() const searchParams = useSearchParams() @@ -52,40 +51,59 @@ export async function useRegistrationFlow(): Promise ({ props: { flow: v } })) - .catch( - handleFlowError({ - onValidationError, - onRestartFlow: () => ({ - redirect: { - destination: toBrowserEndpointRedirect( - query, - FlowType.Registration, - ), - permanent: false, - }, - }), - onRedirect: (url) => ({ - redirect: { - destination: url, - permanent: false, - }, - }), - }), - ) -} +// // This gets called on every request +// export async function getRegistrationServerSideProps( +// context: GetServerSidePropsContext, +// ) { +// // Otherwise we initialize it +// const query = toSearchParams(context.query) +// return await client +// .createBrowserRegistrationFlowRaw({ +// returnTo: query.get("return_to") ?? undefined, +// loginChallenge: query.get("login_challenge") ?? undefined, +// afterVerificationReturnTo: +// query.get("after_verification_return_to") ?? undefined, +// organization: query.get("organization") ?? undefined, +// }) +// .then(toValue) +// .then((v) => ({ +// props: { flow: replaceUndefinedWithNull(RegistrationFlowToJSON(v)) }, +// })) +// .catch( +// handleFlowError({ +// onValidationError, +// onRestartFlow: () => ({ +// redirect: { +// destination: toBrowserEndpointRedirect( +// query, +// FlowType.Registration, +// ), +// permanent: false, +// }, +// }), +// onRedirect: (url) => ({ +// redirect: { +// destination: url, +// permanent: false, +// }, +// }), +// }), +// ) +// } +// +// function replaceUndefinedWithNull(obj: unknown): unknown { +// if (Array.isArray(obj)) { +// return obj.map(replaceUndefinedWithNull) +// } else if (obj !== null && typeof obj === "object") { +// Object.keys(obj).forEach((key) => { +// const value = (obj as Record)[key] +// if (value === undefined) { +// delete (obj as Record)[key] +// } else { +// (obj as Record)[key] = replaceUndefinedWithNull(value) +// } +// }) +// return obj +// } +// return obj +// } \ No newline at end of file diff --git a/packages/nextjs/src/rewrite.ts b/packages/nextjs/src/rewrite.ts index 3b015597..cb1dbcdf 100644 --- a/packages/nextjs/src/rewrite.ts +++ b/packages/nextjs/src/rewrite.ts @@ -18,7 +18,7 @@ export function rewriteUrls( ["/ui/verification", config.override?.verificationUiPath], ["/ui/settings", config.override?.settingsUiPath], ].entries()) { - console.log(matchPath, replaceWith) + const match = joinUrlPaths(matchBaseUrl, matchPath || "") if (replaceWith && source.startsWith(match)) { source = source.replaceAll( diff --git a/packages/nextjs/src/sdk.ts b/packages/nextjs/src/sdk.ts index f391eac5..77868bcd 100644 --- a/packages/nextjs/src/sdk.ts +++ b/packages/nextjs/src/sdk.ts @@ -3,7 +3,25 @@ import { Configuration, FrontendApi, ProjectApi } from "@ory/client-fetch" -const sdkUrl = process.env["ORY_SDK_URL"] || "" +export function getProjectSdkUrl() { + let baseUrl = "" + + if (process.env["NEXT_PUBLIC_ORY_SDK_URL"]) { + baseUrl = process.env["NEXT_PUBLIC_ORY_SDK_URL"] + } + + if (process.env["ORY_SDK_URL"]) { + baseUrl = process.env["ORY_SDK_URL"] + } + + if (!baseUrl) { + throw new Error( + "You need to set environment variable ORY_SDK_URL to your Ory Network SDK URL.", + ) + } + + return baseUrl.replace(/\/$/, "") +} function isProduction() { return ( @@ -22,7 +40,7 @@ export function getSdkUrl() { return `https://${process.env["VERCEL_URL"]}`.replace(/\/$/, "") } - return sdkUrl.replace(/\/$/, "") + return getProjectSdkUrl().replace(/\/$/, "") } export function newOryClient(): {