Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add page and app router examples #307

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
11 changes: 11 additions & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,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/**"],
Expand Down
1 change: 1 addition & 0 deletions examples/nextjs-app-router/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
NEXT_PUBLIC_ORY_SDK_URL=https://playground.projects.oryapis.com
36 changes: 36 additions & 0 deletions examples/nextjs-app-router/.gitignore
Original file line number Diff line number Diff line change
@@ -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
49 changes: 49 additions & 0 deletions examples/nextjs-app-router/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with
[`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the
result.

You can start editing the page by modifying `app/page.tsx`. The page
auto-updates as you edit the file.

This project uses
[`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts)
to automatically optimize and load [Geist](https://vercel.com/font), a new font
family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out
[the Next.js GitHub repository](https://github.com/vercel/next.js) - your
feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the
[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
from the creators of Next.js.

Check out our
[Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying)
for more details.
7 changes: 7 additions & 0 deletions examples/nextjs-app-router/app/auth/layout.tsx
Original file line number Diff line number Diff line change
@@ -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
26 changes: 26 additions & 0 deletions examples/nextjs-app-router/app/auth/login/page.tsx
Original file line number Diff line number Diff line change
@@ -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: {},
}}
/>
)
}
29 changes: 29 additions & 0 deletions examples/nextjs-app-router/app/auth/recovery/page.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
}}
/>
)
}
26 changes: 26 additions & 0 deletions examples/nextjs-app-router/app/auth/registration/page.tsx
Original file line number Diff line number Diff line change
@@ -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: {},
}}
/>
)
}
29 changes: 29 additions & 0 deletions examples/nextjs-app-router/app/auth/verification/page.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
}}
/>
)
}
18 changes: 18 additions & 0 deletions examples/nextjs-app-router/app/globals.css
Original file line number Diff line number Diff line change
@@ -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: Arial, Helvetica, sans-serif;
}

@layer utilities {
.text-balance {
text-wrap: balance;
}
}
19 changes: 19 additions & 0 deletions examples/nextjs-app-router/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Copyright © 2024 Ory Corp
// SPDX-License-Identifier: Apache-2.0

import "./globals.css"
import React, { Suspense, ReactNode } from "react"

export default function RootLayout({
children,
}: Readonly<{
children: ReactNode
}>) {
return (
<html lang="en">
<body className={`antialiased overflow-hidden`}>
<Suspense>{children}</Suspense>
</body>
</html>
)
}
19 changes: 19 additions & 0 deletions examples/nextjs-app-router/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Copyright © 2024 Ory Corp
// SPDX-License-Identifier: Apache-2.0

"use client"
import { useSession } from "@ory/elements-react/client"
import Link from "next/link"

export default function RootLayout() {
const { session } = useSession()
if (session) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
return "Hello: " + session.identity?.traits.email
}
return (
<p>
Not authenticated, please <Link href={"/auth/login"}>log in</Link>.
</p>
)
}
8 changes: 8 additions & 0 deletions examples/nextjs-app-router/components/custom-card-header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// Copyright © 2024 Ory Corp
// SPDX-License-Identifier: Apache-2.0

"use client"

export default function CustomCardHeader() {
return <div>My custom card header</div>
}
11 changes: 11 additions & 0 deletions examples/nextjs-app-router/middleware.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Copyright © 2024 Ory Corp
// SPDX-License-Identifier: Apache-2.0

import { createOryMiddleware } from "@ory/nextjs/middleware"
import oryConfig from "@/ory.config"

// This function can be marked `async` if using `await` inside
export const middleware = createOryMiddleware(oryConfig)

// See "Matching Paths" below to learn more
export const config = {}
4 changes: 4 additions & 0 deletions examples/nextjs-app-router/next.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/** @type {import('next').NextConfig} */
const nextConfig = {}

export default nextConfig
16 changes: 16 additions & 0 deletions examples/nextjs-app-router/ory.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// Copyright © 2024 Ory Corp
// SPDX-License-Identifier: Apache-2.0

import type { OryConfig } from "@ory/nextjs"

const config: OryConfig = {
override: {
applicationName: "NextJS app router example",
loginUiPath: "/auth/login",
registrationUiPath: "/auth/registration",
recoveryUiPath: "/auth/recovery",
verificationUiPath: "/auth/verification",
},
}

export default config
27 changes: 27 additions & 0 deletions examples/nextjs-app-router/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "nextjs-app-router",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@ory/nextjs": "^0.0.1",
"next": "^15.0.3",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.15",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
Loading
Loading