From 6712c12c51b50898d5f68b60b605c738c9a13d9d Mon Sep 17 00:00:00 2001
From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com>
Date: Mon, 24 Jul 2023 08:15:13 +0200
Subject: [PATCH] chore: nextjs add readme to use consent ui

---
 examples/nextjs-spa/README.md                    | 16 ++++++++++++++++
 examples/nextjs-spa/src/app/api/consent/route.ts |  7 +++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/examples/nextjs-spa/README.md b/examples/nextjs-spa/README.md
index b38472eff..1032d565b 100644
--- a/examples/nextjs-spa/README.md
+++ b/examples/nextjs-spa/README.md
@@ -41,6 +41,22 @@ export.
 Now you can see Ory Elements in action by opening http://localhost:3000 in your
 browser!
 
+#### OAuth2 Login/Consent page
+
+This example provides a working Login/Consent page using the Ory Elements UserAuthCard and UserConsentCard.
+
+To use the Consent page, the NextJS application will need a Ory API Token set as an environment variable.
+
+```
+export NEXT_ADMIN_ORY_API_KEY=ory_pat_xxxxx
+```
+
+The `NEXT_PUBLIC_ORY_SDK_URL` will be used for admin API calls as well since Ory Network projects expose both endpoint under the same URL.
+
+Take a look at the Ory Documentation to configure your Ory Network project to use this NextJS application as a custom consent UI. 
+https://www.ory.sh/docs/oauth2-oidc/custom-login-consent/flow#consent
+
+
 ### Using and Modifying the Example
 
 If you want to re-use this example in your own project, you can do so by
diff --git a/examples/nextjs-spa/src/app/api/consent/route.ts b/examples/nextjs-spa/src/app/api/consent/route.ts
index a78fd1bb2..69175ab07 100644
--- a/examples/nextjs-spa/src/app/api/consent/route.ts
+++ b/examples/nextjs-spa/src/app/api/consent/route.ts
@@ -1,9 +1,8 @@
 import { oryIdentity, oryOAuth } from "@/pkg/sdk"
-import type { NextApiRequest, NextApiResponse } from "next"
 import { redirect } from "next/navigation"
-import { NextResponse } from "next/server"
+import { NextRequest, NextResponse } from "next/server"
 
-export async function GET(req: NextApiRequest, res: NextApiResponse) {
+export async function GET(req: NextRequest, res: NextResponse) {
   const { searchParams } = new URL(req.url || "")
 
   const consent_challenge = searchParams.get("consent_challenge") || ""
@@ -94,7 +93,7 @@ export async function GET(req: NextApiRequest, res: NextApiResponse) {
     })
 }
 
-export async function POST(req: Request, res: NextApiResponse) {
+export async function POST(req: NextRequest, res: NextResponse) {
   // The challenge is a hidden input field, so we have to retrieve it from the request body
   const body = await req.json()
   const challenge = body.consent_challenge