Add Ory Hydra login and consent features to Next.js examples and Next.js package

[Jorgagu]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe your problem

Hello Ory team,

I would like to request the addition of the Ory Hydra login and consent features to the following Next.js projects in the Ory Elements monorepo:

Next.js App Router example
Next.js Pages Router example
Next.js package

Describe your ideal solution

Ory Hydra is a powerful OAuth2 and OpenID Connect provider, and integrating its login and consent flow into these Next.js examples and package would:

• Provide developers with a ready-to-use implementation for managing user authentication and consent.
• Simplify OAuth2/OIDC workflows in Next.js applications.
• Ensure better security and compliance with best practices.

This implementation has already been done in the Ory Kratos Self-Service UI Node project. Having the same functionality in the Next.js examples and package would improve consistency across Ory’s ecosystem and provide a better developer experience.

Workarounds or alternatives

The feature should include:

• A login and consent flow example in both the App Router and Pages Router examples.
• Documentation and guidance on how to customize the login and consent flows.
• Integration with the Next.js package for easier adoption.

This enhancement would make it easier for developers using Ory Elements to implement Ory Hydra in their Next.js projects.

Version

@ory/nextjs: v1.0.0

Additional Context

No response

[aeneasr]

Yes, this is planned