feat: all examples are working now

examples/nextjs-app-router/.env

@@ -1 +1 @@
-ORY_SDK_URL=https://playground.projects.oryapis.com
+NEXT_PUBLIC_ORY_SDK_URL=https://playground.projects.oryapis.com

examples/nextjs-app-router/app/auth/layout.tsx

@@ -0,0 +1,6 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { DefaultCardLayout } from "@ory/elements-react/theme"
+
+export default DefaultCardLayout

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

@@ -2,16 +2,18 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Login } from "@ory/elements-react/theme"
-import { useOryConfig } from "@ory/nextjs"
-import { getLoginFlow, OryPageParams } from "@ory/nextjs/app"
+import {
+  getLoginFlow,
+  oryAppRouterConfig,
+  OryPageParams,
+} from "@ory/nextjs/app"
 import "@ory/elements-react/theme/styles.css"
 
 import config from "@/ory.config"
 import CardHeader from "@/app/auth/login/card-header"
 
 export default async function LoginPage(props: OryPageParams) {
-  const searchParams = await props.searchParams;
-  const flow = await getLoginFlow(searchParams)
+  const flow = await getLoginFlow(props.searchParams)
 
   if (!flow) {
     return null
@@ -20,7 +22,7 @@ export default async function LoginPage(props: OryPageParams) {
   return (
     <Login
       flow={flow}
-      config={useOryConfig(config)}
+      config={oryAppRouterConfig(config)}
       components={{
         Card: {
           Header: CardHeader,

examples/nextjs-app-router/tsconfig.json

@@ -1,10 +1,6 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,19 +18,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "target": "ES2017"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

examples/nextjs-pages-router/.env

@@ -1,2 +1 @@
-NEXT_PUBLIC_ORY_SDK_URL=https://amazing-goldberg-vrybkrc0c1.projects.oryapis.com
-ORY_SDK_URL=https://amazing-goldberg-vrybkrc0c1.projects.oryapis.com
+NEXT_PUBLIC_ORY_SDK_URL=https://playground.projects.oryapis.com

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

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

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

@@ -1,14 +1,11 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
+"use client"
 import { Registration } from "@ory/elements-react/theme"
+import { oryPageRouterConfig, useRegistrationFlow } from "@ory/nextjs/pages"
 import "@ory/elements-react/theme/styles.css"
-// import {
-//   useRegistrationFlow,
-// } from "@ory/nextjs/pages"
-import { useOryConfig } from "@ory/nextjs"
 
 import config from "@/ory.config"
-import { useRegistrationFlow } from "@/pages/auth/hook"
 
 export default function RegistrationPage() {
   const flow = useRegistrationFlow()
@@ -18,12 +15,14 @@ export default function RegistrationPage() {
   }
 
   return (
-    <Registration
-      flow={flow}
-      config={useOryConfig(config)}
-      components={{
-        Card: {},
-      }}
-    />
+    <div className="pt-4">
+      <Registration
+        flow={flow}
+        config={oryPageRouterConfig(config)}
+        components={{
+          Card: {},
+        }}
+      />
+    </div>
   )
 }

examples/nextjs-pages-router/tsconfig.json

@@ -1,10 +1,6 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -17,18 +13,10 @@
     "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"]
 }

packages/elements-react/src/theme/default/components/card/layout.tsx

@@ -5,7 +5,7 @@ import { PropsWithChildren } from "react"
 
 export function DefaultCardLayout({ children }: PropsWithChildren) {
   return (
-    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
+    <main className="pt-4 p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
       {children}
     </main>
   )