Skip to content

Commit

Permalink
Add note about Pages Router (#10315)
Browse files Browse the repository at this point in the history
Co-authored-by: Rita Zerrizuela <zeta@widcket.com>
  • Loading branch information
adamjmcgrath and Widcket authored Oct 12, 2023
1 parent 6cc3358 commit ff8c7e3
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 0 deletions.
4 changes: 4 additions & 0 deletions articles/quickstart/webapp/nextjs/01-login.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<body>` tag with a `UserProvider` in the file `app/layout.jsx`.
Expand Down
4 changes: 4 additions & 0 deletions articles/quickstart/webapp/nextjs/interactive.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit ff8c7e3

Please sign in to comment.