From 76d6f48e0016f0d411fafed3c98d91ca6f559363 Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Fri, 13 Dec 2024 14:04:47 +0100 Subject: [PATCH] chore: polish page router example --- examples/nextjs-pages-router/.eslintrc.json | 11 --- examples/nextjs-pages-router/ory.config.ts | 2 + examples/nextjs-pages-router/pages/index.tsx | 90 +++++++++++++++++-- examples/nextjs-pages-router/pages/logo.svg | 8 ++ .../nextjs-pages-router/pages/settings.tsx | 28 ++++++ .../nextjs-pages-router/styles/globals.css | 14 +-- packages/nextjs/src/pages/index.ts | 2 + packages/nextjs/src/pages/logout.ts | 20 +++++ packages/nextjs/src/pages/settings.ts | 14 +++ 9 files changed, 157 insertions(+), 32 deletions(-) delete mode 100644 examples/nextjs-pages-router/.eslintrc.json create mode 100644 examples/nextjs-pages-router/pages/logo.svg create mode 100644 examples/nextjs-pages-router/pages/settings.tsx create mode 100644 packages/nextjs/src/pages/logout.ts create mode 100644 packages/nextjs/src/pages/settings.ts diff --git a/examples/nextjs-pages-router/.eslintrc.json b/examples/nextjs-pages-router/.eslintrc.json deleted file mode 100644 index 16ccd3a5..00000000 --- a/examples/nextjs-pages-router/.eslintrc.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": ["next/core-web-vitals", "next/typescript"], - "overrides": [ - { - "files": ["*.ts", "*.tsx"], - "parserOptions": { - "project": ["./examples/nextjs-pages-router/tsconfig.json"] - } - } - ] -} diff --git a/examples/nextjs-pages-router/ory.config.ts b/examples/nextjs-pages-router/ory.config.ts index 8ec4d57f..0e674b7c 100644 --- a/examples/nextjs-pages-router/ory.config.ts +++ b/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: "/", }, } diff --git a/examples/nextjs-pages-router/pages/index.tsx b/examples/nextjs-pages-router/pages/index.tsx index a6a3e28b..ff49d7a2 100644 --- a/examples/nextjs-pages-router/pages/index.tsx +++ b/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 ( +
+
+ Ory Logo +

Ory Next.js App Router Example

+ {!session && ( +
+ + Registration + + + Login + + + Account Recovery + + + Account Verification + +
+ )} + {session && ( +
+

+ Hi,{" "} + {session.identity?.traits.email ?? + session.identity?.traits.username ?? + session.identity?.traits.phone} + ! +

+ + Settings + + +
+ )} +
+ + App Router Example + + + Page Router Example + +
+
+
+ ) +} + +function LogoutLink() { + const flow = useLogoutFlow() + + if (!flow) { + return null } + + return ( + + Logout + + ) +} + +export default function Home() { return ( -

- Not authenticated, please log in. -

+ + + ) } diff --git a/examples/nextjs-pages-router/pages/logo.svg b/examples/nextjs-pages-router/pages/logo.svg new file mode 100644 index 00000000..aa232910 --- /dev/null +++ b/examples/nextjs-pages-router/pages/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/examples/nextjs-pages-router/pages/settings.tsx b/examples/nextjs-pages-router/pages/settings.tsx new file mode 100644 index 00000000..eac93581 --- /dev/null +++ b/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 ( +
+ + + +
+ ) +} diff --git a/examples/nextjs-pages-router/styles/globals.css b/examples/nextjs-pages-router/styles/globals.css index a16bd3df..5c75f0d9 100644 --- a/examples/nextjs-pages-router/styles/globals.css +++ b/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 { diff --git a/packages/nextjs/src/pages/index.ts b/packages/nextjs/src/pages/index.ts index e2a8c6ae..a82a2ce5 100644 --- a/packages/nextjs/src/pages/index.ts +++ b/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" diff --git a/packages/nextjs/src/pages/logout.ts b/packages/nextjs/src/pages/logout.ts new file mode 100644 index 00000000..9b057274 --- /dev/null +++ b/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(undefined) + + const createFlow = async () => { + const flow = await clientSideFrontendClient().createBrowserLogoutFlow({}) + setFlow(flow) + } + + useEffect(() => { + if (!flow) { + void createFlow() + } + }, []) + + return flow +} diff --git a/packages/nextjs/src/pages/settings.ts b/packages/nextjs/src/pages/settings.ts new file mode 100644 index 00000000..08c4a82b --- /dev/null +++ b/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 }), +)