Skip to content

docs: add browser redirects configuration step and missing custom component instructions for Next.js quickstarts #2383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wassimoo wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs: add browser redirects configuration step and missing custom component instructions for Next.js quickstarts #2383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/getting-started/_static/nextjs/branding_browser_redirects.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 27 additions & 11 deletions docs/getting-started/integrate-auth/16_nextjs_app_router.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,23 @@ all files referenced as being in the `root` directory inside `src/` instead.
src="https://raw.githubusercontent.com/ory/elements/refs/heads/main/examples/nextjs-app-router/middleware.ts"
/>

5. Create a new folder named `app` in the root of your project. Inside the `app` folder, create a new folder named `auth`. Inside
5. Configure browser redirects in your Ory Console. Navigate to **Branding** > **Browser redirects** and set the **Global redirect
Copy link
Contributor

@unatasha8 unatasha8 Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
5. Configure browser redirects in your Ory Console. Navigate to **Branding** > **Browser redirects** and set the **Global redirect
5. Configure browser redirects in Ory Console. Navigate to **Branding** > **Browser redirects** and set the **Global redirect

Copy link
Member

@jonas-jonas jonas-jonas Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have the <ConsoleLink /> component for links to Console.

URL** to `/ui/welcome`. This ensures users are redirected to the correct page after completing authentication flows.

![Browser Redirects Configuration](../_static/nextjs/branding_browser_redirects.png)

6. Create a new folder named `components` in the root of your project. Inside the `components` folder, create a new file named
`custom-card-header.tsx` and add the following code:

<CodeFromRemote
lang="tsx"
title="components/custom-card-header.tsx"
src="https://raw.githubusercontent.com/ory/elements/refs/heads/main/examples/nextjs-app-router/components/custom-card-header.tsx"
/>

This component is used by the Verification and Settings pages to customize the card header.

7. Create a new folder named `app` in the root of your project. Inside the `app` folder, create a new folder named `auth`. Inside
the `auth` folder, create the following files:

- `login/page.tsx`
Expand Down Expand Up @@ -155,7 +171,16 @@ all files referenced as being in the `root` directory inside `src/` instead.
</Tabs>
```

6. Run the application and create your first user by navigating to `/auth/registration`. After registration, you can log in at
8. Use your own Ory Network project by setting the `ORY_SDK_URL` environment variable in your `.env` file:

```mdx-code-block
<CodeFromRemote lang="bash" title=".env" src="https://raw.githubusercontent.com/ory/elements/refs/heads/main/examples/nextjs-app-router/.env" />
```

You can find your Ory Network project URL in the [**Get started**](https://console.ory.sh/projects/current/get-started) section
of the Ory Console.

9. Run the application and create your first user by navigating to `/auth/registration`. After registration, you can log in at
`/auth/login`. You can also access the other self-service flows at the following URLs:

- Recovery: `/auth/recovery`
Expand Down Expand Up @@ -189,15 +214,6 @@ all files referenced as being in the `root` directory inside `src/` instead.

Open your browser and navigate to `http://localhost:3000/auth/registration` to create your first user.

7. Optional: use your own Ory Network project by setting the `ORY_SDK_URL` environment variable in your `.env` file:

```mdx-code-block
<CodeFromRemote lang="bash" title=".env" src="https://raw.githubusercontent.com/ory/elements/refs/heads/main/examples/nextjs-app-router/.env" />
```

You can find your Ory Network project URL in the [**Get started**](https://console.ory.sh/projects/current/get-started) section
of the Ory Console.

## Next steps

Now that you have set up Ory Elements with the App Router in your Next.js application, you can further customize the components,
Expand Down
40 changes: 28 additions & 12 deletions docs/getting-started/integrate-auth/17_nextjs_pages_router.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,23 @@ The code used in the following quickstart is available in the
src="https://raw.githubusercontent.com/ory/elements/refs/heads/main/examples/nextjs-pages-router/middleware.ts"
/>

4. Create a new folder named `pages` in the root of your project. Inside the `pages` folder, create a new folder named `auth`.
4. Configure browser redirects in your Ory Console. Navigate to **Branding** > **Browser redirects** and set the **Global redirect
Copy link
Contributor

@unatasha8 unatasha8 Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
4. Configure browser redirects in your Ory Console. Navigate to **Branding** > **Browser redirects** and set the **Global redirect
4. Configure browser redirects in Ory Console. Navigate to **Branding** > **Browser redirects** and set the **Global redirect

URL** to `/ui/welcome`. This ensures users are redirected to the correct page after completing authentication flows.

![Browser Redirects Configuration](../_static/nextjs/branding_browser_redirects.png)

5. Create a new folder named `components` in the root of your project. Inside the `components` folder, create a new file named
`custom-card-header.tsx` and add the following code:

<CodeFromRemote
lang="tsx"
title="components/custom-card-header.tsx"
src="https://raw.githubusercontent.com/ory/elements/refs/heads/main/examples/nextjs-app-router/components/custom-card-header.tsx"
/>

This component is used by the Verification and Settings pages to customize the card header.

6. Create a new folder named `pages` in the root of your project. Inside the `pages` folder, create a new folder named `auth`.
Inside the `auth` folder, create the following files:

- `login.tsx`
Expand Down Expand Up @@ -118,7 +134,16 @@ The code used in the following quickstart is available in the
</Tabs>
```

5. Run the application and create your first user by navigating to `/auth/registration`. After registration, you can log in at
7. Use your own Ory Network project by setting the `ORY_SDK_URL` environment variable in your `.env` file:

```mdx-code-block
<CodeFromRemote lang="bash" title=".env" src="https://raw.githubusercontent.com/ory/elements/refs/heads/main/examples/nextjs-pages-router/.env" />
```

You can find your Ory Network project URL in the [**Get started**](https://console.ory.sh/projects/current/get-started) section
of the Ory Console.

8. Run the application and create your first user by navigating to `/auth/registration`. After registration, you can log in at
`/auth/login`. You can also access the other self-service flows at the following URLs:

- Recovery: `/auth/recovery`
Expand Down Expand Up @@ -152,18 +177,9 @@ The code used in the following quickstart is available in the

Open your browser and navigate to `http://localhost:3000/auth/registration` to create your first user.

6. Optional: use your own Ory Network project by setting the `ORY_SDK_URL` environment variable in your `.env` file:

```mdx-code-block
<CodeFromRemote lang="bash" title=".env" src="https://raw.githubusercontent.com/ory/elements/refs/heads/main/examples/nextjs-pages-router/.env" />
```

You can find your Ory Network project URL in the [**Get started**](https://console.ory.sh/projects/current/get-started) section
of the Ory Console.

## Next steps

Now that you have set up Ory Elements with the App Router in your Next.js application, you can further customize the components,
Now that you have set up Ory Elements with the Pages Router in your Next.js application, you can further customize the components,
add your own styles, and integrate them into your application as needed. You can also explore the Ory Elements documentation for
more information on how to use the components and customize them to fit your needs. See
[Theming](../../elements/guides/02_theming.mdx) for more details on how to customize look and feel of the components.
Loading