chore: polish page router example

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

@@ -10,6 +10,8 @@ const config: OryConfig = {
     registrationUiPath: "/auth/registration",
     recoveryUiPath: "/auth/recovery",
     verificationUiPath: "/auth/verification",
+    settingsUiPath: "/settings",
+    defaultRedirectUri: "/",
   },
 }
 

examples/nextjs-pages-router/pages/index.tsx

@@ -3,17 +3,91 @@
 
 import React from "react"
 import Link from "next/link"
-import { useSession } from "@ory/elements-react/client"
+import { SessionProvider, useSession } from "@ory/elements-react/client"
+import Image from "next/image"
+import OryLogo from "./logo.svg"
+import { useLogoutFlow } from "@ory/nextjs/pages"
 
-export default function Home() {
+function HomeContent() {
   const { session } = useSession()
-  if (session) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    return "Hello: " + session.identity?.traits.email
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <div className="flex flex-col items-center gap-4">
+        <Image src={OryLogo} alt="Ory Logo" width={160} />
+        <h1 className="font-bold text-xl">Ory Next.js App Router Example</h1>
+        {!session && (
+          <div className="flex items-center gap-2 bg-white rounded border flex-col w-60 p-3">
+            <Link className="underline block w-full" href="/auth/registration">
+              Registration
+            </Link>
+            <Link className="underline block w-full" href="/auth/login">
+              Login
+            </Link>
+            <Link className="underline block w-full" href="/auth/recovery">
+              Account Recovery
+            </Link>
+            <Link className="underline block w-full" href="/auth/verification">
+              Account Verification
+            </Link>
+          </div>
+        )}
+        {session && (
+          <div className="flex items-center gap-2 bg-white rounded border flex-col w-60 p-3">
+            <h2 className="w-full">
+              Hi,{" "}
+              {session.identity?.traits.email ??
+                session.identity?.traits.username ??
+                session.identity?.traits.phone}
+              !
+            </h2>
+            <Link className="underline block w-full" href="/settings">
+              Settings
+            </Link>
+            <LogoutLink />
+          </div>
+        )}
+        <div className="flex gap-2 text-sm">
+          <a
+            href="https://github.com/ory/elements/tree/master/examples/nextjs-pages-router"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            App Router Example
+          </a>
+          <a
+            href="https://github.com/ory/elements/tree/master/examples/nextjs-pages-router"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Page Router Example
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function LogoutLink() {
+  const flow = useLogoutFlow()
+
+  if (!flow) {
+    return null
   }
+
+  return (
+    <a className="underline block w-full" href={flow.logout_url}>
+      Logout
+    </a>
+  )
+}
+
+export default function Home() {
   return (
-    <p>
-      Not authenticated, please <Link href={"/ui/login"}>log in</Link>.
-    </p>
+    <SessionProvider>
+      <HomeContent />
+    </SessionProvider>
   )
 }

examples/nextjs-pages-router/pages/settings.tsx

@@ -0,0 +1,28 @@
+import config from "@/ory.config"
+import { getSettingsFlow, OryPageParams } from "@ory/nextjs/app"
+import { SessionProvider } from "../../../packages/elements-react/dist/client/session-provider"
+import { Settings } from "@ory/elements-react/theme"
+import { enhanceOryConfig } from "@ory/nextjs"
+import { useSettingsFlow } from "@ory/nextjs/pages"
+
+export default function SettingsPage() {
+  const flow = useSettingsFlow()
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col gap-8 items-center mb-8">
+      <SessionProvider>
+        <Settings
+          flow={flow}
+          config={enhanceOryConfig(config)}
+          components={{
+            Card: {},
+          }}
+        />
+      </SessionProvider>
+    </div>
+  )
+}

examples/nextjs-pages-router/styles/globals.css

@@ -5,22 +5,10 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Inter, Helvetica, sans-serif;
 }
 
 @layer utilities {

packages/nextjs/src/pages/index.ts

@@ -6,3 +6,5 @@ export { useRegistrationFlow } from "./registration"
 export { useVerificationFlow } from "./verification"
 export { useRecoveryFlow } from "./recovery"
 export { useLoginFlow } from "./login"
+export { useSettingsFlow } from "./settings"
+export { useLogoutFlow } from "./logout"

packages/nextjs/src/pages/logout.ts

@@ -0,0 +1,20 @@
+import { LogoutFlow } from "@ory/client-fetch"
+import { clientSideFrontendClient } from "./client"
+import { useEffect, useState } from "react"
+
+export function useLogoutFlow() {
+  const [flow, setFlow] = useState<LogoutFlow | undefined>(undefined)
+
+  const createFlow = async () => {
+    const flow = await clientSideFrontendClient().createBrowserLogoutFlow({})
+    setFlow(flow)
+  }
+
+  useEffect(() => {
+    if (!flow) {
+      void createFlow()
+    }
+  }, [])
+
+  return flow
+}

packages/nextjs/src/pages/settings.ts

@@ -0,0 +1,14 @@
+import { FlowType } from "@ory/client-fetch"
+import { createUseFlowFactory } from "./flow"
+import { clientSideFrontendClient } from "./client"
+
+export const useSettingsFlow = createUseFlowFactory(
+  FlowType.Settings,
+  (params: URLSearchParams) => {
+    return clientSideFrontendClient().createBrowserSettingsFlowRaw({
+      returnTo: params.get("return_to") ?? undefined,
+      cookie: params.get("cookie") ?? undefined,
+    })
+  },
+  (id) => clientSideFrontendClient().getSettingsFlowRaw({ id }),
+)