feat: add page and app router examples (#307)

Co-authored-by: Jonas Hungershausen <[email protected]>

Makefile

@@ -6,24 +6,33 @@ export PATH               := .bin:${PATH}
 .PHONY: install
 install:
 	npm install
+	npx playwright install --with-deps
 
+.PHONY: test
 test:
 	npm run test
 
+.PHONY: build
+build:
+	npx nx run-many --target=build --all
+	npx nx run-many --all --target=build-storybook -- --stats-json
+
+.PHONY: dev
+dev:
+	npx nx run-many --target=dev --all
+
 test-containerized: 
 	# https://github.com/microsoft/playwright/issues/26482
 	# For unsupported distros, use the `test-containerized` target instead of `test`
 	sh -c ./playwright-docker.sh
 
-
 PRETTIER_VERSION=$(shell cat package.json | jq -r '.devDependencies["prettier"] // .dependencies["prettier"]')
 
 format: .bin/ory
 	.bin/ory dev headers copyright --type=open-source
 	@echo "Prettier Version: $(PRETTIER_VERSION)"
 	npx prettier@$$PRETTIER_VERSION --write .
 
-
 licenses: .bin/licenses node_modules  # checks open-source licenses
 	.bin/licenses
 

eslint.config.mjs

@@ -106,6 +106,17 @@ const config = tseslint.config([
       "no-extra-semi": "off",
     },
   },
+  {
+    files: [
+      "examples/nextjs-app-router/**/*.ts",
+      "examples/nextjs-app-router/**/*.tsx",
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ["./examples/nextjs-app-router/tsconfig.json"],
+      },
+    },
+  },
   {
     name: "elements-react",
     files: ["packages/elements-react/**"],

examples/nextjs-app-router/.env

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

examples/nextjs-app-router/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-app-router/README.md

@@ -0,0 +1,43 @@
+This is a simple example application using @ory/elements-react & Next.js app
+router.
+
+## Getting started
+
+1. Sign up for an account at https://console.ory.sh
+2. Create a new or use an existing project
+3. Go to https://console.ory.sh/projects/current/settings and copy the **API
+   endpoints** URL
+4. Set the `NEXT_PUBLIC_ORY_SDK_URL` to your project's **API endpoints** URL
+5. Run `npm install`
+6. Run `npm run dev` and open navigate to http://localhost:3000
+
+<!-- prettier-ignore-start -->
+> [!WARNING]
+> For convinience Ory provides a default "playground" project, that
+> can be used to interact with Ory's APIs. It is a public project, that can be
+> used by anyone and data can be deleted at any time. Make sure to use a
+> dedicated project.
+<!-- prettier-ignore-end -->
+
+## Features
+
+- All self-service user flows Ory supports
+  - [Login](http://localhost:3000/auth/login)
+  - [Registration](http://localhost:3000/auth/registration)
+  - [Recovery](http://localhost:3000/auth/recovery)
+  - [Verification](http://localhost:3000/auth/verification)
+  - [Settings](http://localhost:3000/settings)
+- User Logout
+
+## Project structure
+
+The project files reside in the `app/` directory:
+
+- `app/auth` - contains the page files for the user auth flows
+- `app/settings` - contaisn the page file for the settings flow
+- `app` - contains the root page file and layout.
+
+## Need help?
+
+If you have any issues using this examples, or Ory's products, don't hesitate to
+reach out via the [Ory Community Slack](https://slack.ory.sh).

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

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

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

@@ -0,0 +1,26 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { Login } from "@ory/elements-react/theme"
+import { enhanceOryConfig } from "@ory/nextjs"
+import { getLoginFlow, OryPageParams } from "@ory/nextjs/app"
+
+import config from "@/ory.config"
+
+export default async function LoginPage(props: OryPageParams) {
+  const flow = await getLoginFlow(props.searchParams)
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <Login
+      flow={flow}
+      config={enhanceOryConfig(config)}
+      components={{
+        Card: {},
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,29 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { Recovery } from "@ory/elements-react/theme"
+import { enhanceOryConfig } from "@ory/nextjs"
+import { getRecoveryFlow, OryPageParams } from "@ory/nextjs/app"
+
+import CustomCardHeader from "@/components/custom-card-header"
+import config from "@/ory.config"
+
+export default async function RecoveryPage(props: OryPageParams) {
+  const flow = await getRecoveryFlow(props.searchParams)
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <Recovery
+      flow={flow}
+      config={enhanceOryConfig(config)}
+      components={{
+        Card: {
+          Header: CustomCardHeader,
+        },
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,26 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { Registration } from "@ory/elements-react/theme"
+import { enhanceOryConfig } from "@ory/nextjs"
+import { getRegistrationFlow, OryPageParams } from "@ory/nextjs/app"
+
+import config from "@/ory.config"
+
+export default async function RegistrationPage(props: OryPageParams) {
+  const flow = await getRegistrationFlow(props.searchParams)
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <Registration
+      flow={flow}
+      config={enhanceOryConfig(config)}
+      components={{
+        Card: {},
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,29 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { Verification } from "@ory/elements-react/theme"
+import { enhanceOryConfig } from "@ory/nextjs"
+import { getVerificationFlow, OryPageParams } from "@ory/nextjs/app"
+
+import CustomCardHeader from "@/components/custom-card-header"
+import config from "@/ory.config"
+
+export default async function VerificationPage(props: OryPageParams) {
+  const flow = await getVerificationFlow(props.searchParams)
+
+  if (!flow) {
+    return null
+  }
+
+  return (
+    <Verification
+      flow={flow}
+      config={enhanceOryConfig(config)}
+      components={{
+        Card: {
+          Header: CustomCardHeader,
+        },
+      }}
+    />
+  )
+}

examples/nextjs-app-router/app/globals.css

@@ -0,0 +1,18 @@
+/* Copyright © 2024 Ory Corp */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Inter, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

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

@@ -0,0 +1,22 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import "./globals.css"
+import React, { Suspense, ReactNode } from "react"
+import { Inter } from "next/font/google"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning className={inter.className}>
+      <body>
+        <Suspense>{children}</Suspense>
+      </body>
+    </html>
+  )
+}