feat: add nextjs example and supporting libraries #240

aeneasr · 2024-10-17T14:11:34Z

Closes ory/integrations#61

BREAKING CHANGES: This patch changes the options structure for useSesssion.

zepatrik

Sorry, but this triggered me during the presentation 😉

examples/nextjs-app-router/next/types.ts

aeneasr · 2024-10-18T08:05:52Z

🤣

aeneasr · 2024-10-18T14:26:06Z

I'm stuck trying to create the @ory/nextjs library and importing them in the two examples. Kinda lost here, would appreciate some help @jonas-jonas

examples/nextjs-app-router/nextjs/index.ts

packages/nextjs/package.json

packages/nextjs/src/app/index.ts

aeneasr · 2024-10-18T14:29:34Z

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

@@ -0,0 +1,3 @@
+import { OryCardContent } from "@ory/elements-react"


This should actually be `OryCardLayout

Suggested change

import { OryCardContent } from "@ory/elements-react"

import { OryCardLayout } from "@ory/elements-react"

If we do export that file, it should be

This should actually be

Suggested change

import { OryCardContent } from "@ory/elements-react"

import { OryCardLayout } from "@ory/elements-react/theme"

@jonas-jonas it's now:

// app/auth/layout.tsx // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 import { DefaultCardLayout } from "@ory/elements-react/theme" export default DefaultCardLayout

aeneasr · 2024-10-18T14:30:41Z

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

+
+export function DefaultCardLayout({ children }: PropsWithChildren) {
+  return (
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">


The problem kinda is that we have the card element, but no backdrop element, so the card just is on the top left of the screen. We should add a layout component or background component. Not sure where to put it, so i put it here. But it's kinda weird because we don't override it anywhere, we just import it (see nextjs app router example app)

This is intentional. IMO, if you use Ory Elements, you should need to decide where to put the elements on the page, so it's up to the consumer to implement this. I guess it doesn't hurt to export this, but it's a really optional element.

Agreed and this is how it's done now.

jonas-jonas · 2024-10-21T07:56:55Z

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

+
+export function DefaultCardLayout({ children }: PropsWithChildren) {
+  return (
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">


This is intentional. IMO, if you use Ory Elements, you should need to decide where to put the elements on the page, so it's up to the consumer to implement this. I guess it doesn't hurt to export this, but it's a really optional element.

jonas-jonas · 2024-10-21T08:00:01Z

packages/nextjs/src/pages/utils.ts

+export function useSearchParams() {
+  const router = useRouter()
+  return toSearchParams(router.query)
+}


Is this exported in the package? If so, this will lead to it showing up in code completion if you have this package installed, which is not great, IMO.

Only

// Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 "use client" export { useRegistrationFlow } from "./registration" export { oryPageRouterConfig } from "./config"

is exported in utils/index.js

jonas-jonas · 2024-10-21T14:52:36Z

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

@@ -0,0 +1,3 @@
+import { OryCardContent } from "@ory/elements-react"


If we do export that file, it should be

This should actually be

Suggested change

import { OryCardContent } from "@ory/elements-react"

import { OryCardLayout } from "@ory/elements-react/theme"

packages/nextjs/src/app/actions.ts

jonas-jonas · 2024-11-15T16:03:28Z

Makefile

+build:
+	npm run build
+
+dev:
+	npm run build
+


I've adjusted the scripts to now use the nx commands, which I always had to lookup in the GitHub ci config.

jonas-jonas · 2024-11-15T16:03:43Z

examples/nextjs-app-router/README.md

@@ -0,0 +1,49 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with


This needs a proper README.

jonas-jonas · 2024-11-15T16:04:36Z

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

+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;


We use Inter in the designs, so the examples should, too.

jonas-jonas · 2024-11-15T16:06:17Z

examples/nextjs-pages-router/pages/api/hello.ts

what is this?

This is included in the default example. We should probably add an api route that verifies the cookie here?

examples/nextjs-pages-router/pages/fonts/GeistMonoVF.woff

jonas-jonas · 2024-11-15T16:15:14Z

packages/nextjs/src/utils/config.test.ts

+  })
+
+  xit("should use window.location.origin if VERCEL_URL is not provided", () => {
+    // Not sure if this works


What do we need to check to make sure this works?

Somehow be able to modify window.location.origin which I have not been able to get working in this test

jonas-jonas · 2024-11-15T16:15:49Z

packages/nextjs/src/utils/config.ts

+import { OryConfig } from "../types"
+import { isProduction } from "./sdk"
+
+export function enhanceConfig(


Suggested change

export function enhanceConfig(

export function enhanceOryConfig(

And it needs docs.

jonas-jonas · 2024-11-15T16:16:24Z

packages/nextjs/src/utils/cookie.test.ts

+  test("understands public suffix list", () => {
+    expect(
+      guessCookieDomain(
+        "https://spark-public.s3.amazonaws.com/dataanalysis/loansData.csv",


Lol, where does this come from?

An LLM, maybe.

jonas-jonas · 2024-11-15T16:18:45Z

packages/nextjs/src/utils/rewrite.ts

+    new URL(selfUrl).toString().replace(/\/$/, ""),
+  )
+}
+export function rewriteJsonResponse<T extends object>(


I think this needs tests. Seems like a pretty complicated function, maybe some docs/explanations would be good?

We have several tests for this in describe("rewriteJsonResponse", () => {

I added docs

jonas-jonas · 2024-11-15T16:19:36Z

tsconfig.base.json

@@ -9,6 +9,7 @@
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
+      "@ory/nextjs": ["packages/nextjs/src/index.ts"],


Don't think this is needed with npm workspaces, why did you add it?

zepatrik reviewed Oct 18, 2024

View reviewed changes

This comment was marked as outdated.

Sign in to view

aeneasr closed this Oct 18, 2024

aeneasr reopened this Oct 18, 2024

aeneasr commented Oct 18, 2024

View reviewed changes

This comment was marked as outdated.

Sign in to view

jonas-jonas force-pushed the aeneasr/add-nextjs-app-router-example-2 branch 2 times, most recently from 079ab44 to 8c3bc44 Compare October 30, 2024 17:08

jonas-jonas force-pushed the aeneasr/add-nextjs-app-router-example-2 branch from 8c3bc44 to 7f3319b Compare November 8, 2024 10:44

aeneasr marked this pull request as ready for review November 11, 2024 11:29

jonas-jonas reviewed Nov 12, 2024

View reviewed changes

aeneasr self-assigned this Nov 14, 2024

jonas-jonas requested changes Nov 15, 2024

View reviewed changes

aeneasr force-pushed the aeneasr/add-nextjs-app-router-example-2 branch from 53178c6 to 254f36e Compare November 19, 2024 10:26

aeneasr and others added 14 commits December 5, 2024 11:27

feat: add nextjs example and supporting libraries

776debd

chore: synchronize workspaces

dd6a11a

chore: synchronize workspaces

fca5a96

chore: synchronize workspaces

fb918aa

chore: synchronize workspaces

1d2afa4

chore: synchronize workspaces

fda6f37

chore: synchronize workspaces

9c44c5d

chore: synchronize workspaces

f6d7993

chore: synchronize workspaces

7496888

chore: synchronize workspaces

c7b8f46

chore: synchronize workspaces

75e4f55

chore: synchronize workspaces

674553b

chore: integrate next.js package properly (#243)

e7c8f15

chore: licenses and format

9a0a1e9

aeneasr and others added 25 commits December 5, 2024 11:27

fix: invalid URL error

87d85a8

fix: hook and invalid URL in examples

54f5508

chore: synchronize workspaces

9d6615e

chore: synchronize workspaces

059e977

chore: synchronize workspaces

6bbce0d

chore: synchronize workspaces

8047fb6

feat: all examples are working now

3803397

chore: synchronize workspaces

520edf3

chore: synchronize workspaces

0ec83de

chore: synchronize workspaces

f9f4b8b

chore: synchronize workspaces

31a8b5b

chore: synchronize workspaces

5eb8bc8

chore: synchronize workspaces

58ed677

chore: synchronize workspaces

e478158

chore: synchronize workspaces

2ab7877

chore: synchronize workspaces

778731b

chore: synchronize workspaces

abeb00b

chore: synchronize workspaces

1827b48

chore: synchronize workspaces

7194754

middleware tests

13cabb4

chore: synchronize workspaces

6d9fe44

chore: synchronize workspaces

90c6cbc

chore: synchronize workspaces

3422a7f

chore: fix example linting (#285)

d24acf8

chore: synchronize workspaces

4311b66

aeneasr force-pushed the aeneasr/add-nextjs-app-router-example-2 branch from 254f36e to 4311b66 Compare December 5, 2024 10:27

aeneasr requested a review from jonas-jonas December 5, 2024 10:28

chore: synchronize workspaces

4e3d19f

aeneasr closed this Dec 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add nextjs example and supporting libraries #240

feat: add nextjs example and supporting libraries #240

aeneasr commented Oct 17, 2024 •

edited

Loading

zepatrik left a comment

aeneasr commented Oct 18, 2024

This comment was marked as outdated.

aeneasr commented Oct 18, 2024

aeneasr Oct 18, 2024

jonas-jonas Oct 21, 2024

aeneasr Nov 13, 2024

aeneasr Oct 18, 2024

jonas-jonas Oct 21, 2024

aeneasr Nov 13, 2024

This comment was marked as outdated.

jonas-jonas Oct 21, 2024

jonas-jonas Oct 21, 2024

aeneasr Nov 13, 2024

jonas-jonas Oct 21, 2024

jonas-jonas Nov 15, 2024

aeneasr Nov 19, 2024

jonas-jonas Nov 15, 2024

jonas-jonas Nov 15, 2024

jonas-jonas Nov 15, 2024

aeneasr Nov 19, 2024

jonas-jonas Nov 15, 2024

aeneasr Nov 19, 2024

jonas-jonas Nov 15, 2024

aeneasr Nov 19, 2024

jonas-jonas Nov 15, 2024

aeneasr Nov 19, 2024

jonas-jonas Nov 15, 2024

aeneasr Nov 19, 2024

jonas-jonas Nov 15, 2024

aeneasr Nov 19, 2024

		@@ -0,0 +1,3 @@
		import { OryCardContent } from "@ory/elements-react"

	import { OryCardContent } from "@ory/elements-react"
	import { OryCardLayout } from "@ory/elements-react"

		@@ -0,0 +1,49 @@
		This is a [Next.js](https://nextjs.org) project bootstrapped with

	export function enhanceConfig(
	export function enhanceOryConfig(

feat: add nextjs example and supporting libraries #240

feat: add nextjs example and supporting libraries #240

Conversation

aeneasr commented Oct 17, 2024 • edited Loading

zepatrik left a comment

Choose a reason for hiding this comment

aeneasr commented Oct 18, 2024

This comment was marked as outdated.

aeneasr commented Oct 18, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aeneasr commented Oct 17, 2024 •

edited

Loading