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