From ff8c7e3c45918495a0399a1488388d2281a3ab4e Mon Sep 17 00:00:00 2001 From: Adam Mcgrath Date: Thu, 12 Oct 2023 14:27:32 +0100 Subject: [PATCH] Add note about Pages Router (#10315) Co-authored-by: Rita Zerrizuela --- articles/quickstart/webapp/nextjs/01-login.md | 4 ++++ articles/quickstart/webapp/nextjs/interactive.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/articles/quickstart/webapp/nextjs/01-login.md b/articles/quickstart/webapp/nextjs/01-login.md index 80cb7b4656..f23cd7ec60 100644 --- a/articles/quickstart/webapp/nextjs/01-login.md +++ b/articles/quickstart/webapp/nextjs/01-login.md @@ -68,6 +68,10 @@ This creates the following routes: - `/api/auth/callback`: The route Auth0 will redirect the user to after a successful login. - `/api/auth/me`: The route to fetch the user profile from. +::: note +This QuickStart targets the Next.js [App Router](https://nextjs.org/docs/app). If you're using the [Pages Router](https://nextjs.org/docs/pages), check out the example in the SDK's [README](https://github.com/auth0/nextjs-auth0#page-router). +::: + ### Add the `UserProvider` component On the frontend side, the SDK uses React Context to manage the authentication state of your users. To make that state available to all your pages, you need to override the [Root Layout component](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) and wrap the `` tag with a `UserProvider` in the file `app/layout.jsx`. diff --git a/articles/quickstart/webapp/nextjs/interactive.md b/articles/quickstart/webapp/nextjs/interactive.md index 8cff7ed8ee..e792e7b77b 100644 --- a/articles/quickstart/webapp/nextjs/interactive.md +++ b/articles/quickstart/webapp/nextjs/interactive.md @@ -56,6 +56,10 @@ The SDK will read these values from the Node.js process environment and automati ## Add the dynamic Route Handler {{{ data-action=code data-code="app/api/auth/[auth0]/route.js" }}} +::: note +This QuickStart targets the Next.js [App Router](https://nextjs.org/docs/app). If you're using the [Pages Router](https://nextjs.org/docs/pages), check out the example in the SDK's [README](https://github.com/auth0/nextjs-auth0#page-router). +::: + Create a file at `app/api/auth/[auth0]/route.js`. This is your Route Handler file with a [Dynamic Route Segment](https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments). Then, import in that file the `handleAuth` method from the SDK, and export the result of calling it from the `GET` export. This creates the following routes: