elements icon indicating copy to clipboard operation
elements copied to clipboard

feat(core): add OAuth2 consent flow support

Open Jorgagu opened this issue 2 months ago • 5 comments

Add complete OAuth2 consent flow support to @ory/nextjs and @ory/elements-react packages, enabling applications to handle OAuth2 authorization consent screens with Ory Hydra.

Related Issue or Design Document

Fixex #327

Add complete OAuth2 consent flow support to @ory/nextjs and @ory/elements-react packages, enabling applications to handle OAuth2 authorization consent screens with Ory Hydra.

Features

  • Consent Flow Utilities (@ory/nextjs)

    • getConsentFlow - Fetch consent challenge from Ory Hydra
    • acceptConsentRequest - Accept consent with selected scopes
    • rejectConsentRequest - Reject consent request
  • OAuth2 Client Logo Display

    • Display OAuth2 client logo on login, registration, and consent cards
    • Shared getConfigWithOAuth2Logo utility for consistent behavior
  • Example Implementations

    • App Router: consent page + API route
    • Pages Router: consent page + API route
    • Custom Components: ConsentFooter, custom scope checkbox with toggle switches
  • Exported Utilities

    • getConsentNodeKey, isFooterNode from card-consent
    • isUiNodeInput, UiNodeInput type helpers

Improvements

  • Optimize rewriteUrls to single-pass regex replacement
  • Add OAuth2 path exclusion in URL rewriting
  • Add null/undefined handling in rewriteJsonResponse

Tests

  • Unit tests for consent utilities and rewrite functions

Checklist

  • [x] I have read the contributing guidelines and signed the CLA.
  • [x] I have referenced an issue containing the design document if my change introduces a new feature.
  • [x] I have read the security policy.
  • [x] I confirm that this pull request does not address a security vulnerability. If this pull request addresses a security vulnerability, I confirm that I got approval (please contact [email protected]) from the maintainers to push the changes.
  • [x] I have added tests that prove my fix is effective or that my feature works.
  • [x] I have added the necessary documentation within the code base (if appropriate).

Further comments

This implementation follows the pattern established in kratos-selfservice-ui-node for handling OAuth2 flows. The OAuth2 client logo is displayed by overriding the project configuration's logo_light_url when an OAuth2 client logo is available, keeping the existing DefaultCardLogo component unchanged.

Jorgagu avatar Jan 05 '26 18:01 Jorgagu