Change request/ID verification flow to use separate pages instead of a modal

[jpople]

Ticket ENG-2283

Description Of Changes

Converted the privacy request flow from a modal-based approach to full-page routes. The form, verification, and success states now use dedicated Next.js pages with a consistent layout. Refactored ExternalAuthLayout to use a shared AuthFormLayout component to reduce code duplication.

Code Changes

• Extracted request creation and ID verification to separate pages instead of modals
• Refactored ExternalAuthLayout to use AuthFormLayout instead of duplicating layout code
• Added e2e tests for the privacy request flow

Steps to Confirm

1. Navigate to the privacy center homepage and click a privacy request action
2. Fill out the form and verify request is submitted as expected
3. Update your privacy center config so requests require identity verification
4. Confirm navigation to the verification page and ability to enter OTP code
5. After successful verification, confirm navigation to the success page
6. Verify external manual task authentication pages still render correctly with the refactored layout

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
fides-plus-nightly	Ignored		Jan 16, 2026 4:24pm
fides-privacy-center	Ignored		Jan 16, 2026 4:24pm

[greptile-apps]

Greptile Summary

Converted the privacy request flow from a modal-based approach to dedicated full-page routes (/privacy-request/[actionIndex], /privacy-request/[actionIndex]/verify, /privacy-request/[actionIndex]/success). Successfully extracted a shared AuthFormLayout component to eliminate ~80 lines of duplicated code between ExternalAuthLayout and the new privacy request layouts.

Key Changes:

• Created three new Next.js page routes for form submission, verification, and success states
• Refactored ExternalAuthLayout to use the new shared AuthFormLayout component
• Updated HomePage to navigate to routes instead of opening modals
• Added comprehensive e2e tests covering the full page-based flow
• Uses sessionStorage to pass privacy request ID between form and verification pages

Minor Style Issues:

• AuthFormLayout uses div elements where Ant Design's Flex component would be more appropriate per coding standards

Confidence Score: 4/5

• This PR is safe to merge with minimal risk - well-structured refactor with comprehensive test coverage
• Score reflects a solid architectural refactor with good test coverage and clean code. The only concerns are minor style issues (using div instead of semantic components per coding standards) that don't affect functionality. The refactoring successfully eliminates code duplication and the new page-based flow is well-tested.
• No files require special attention - the AuthFormLayout has minor style suggestions but they're non-blocking

Important Files Changed

Filename	Overview
clients/privacy-center/components/common/AuthFormLayout.tsx	New shared layout component extracted to reduce duplication - uses div elements instead of Flex/semantic components
clients/privacy-center/components/privacy-request/PrivacyRequestFormPage.tsx	Client component wrapper that bridges page routes to existing form component - uses sessionStorage to pass request ID
clients/privacy-center/components/privacy-request/VerificationPage.tsx	Verification page component with proper redirect handling when sessionStorage is missing
clients/privacy-center/features/external-manual-tasks/components/ExternalAuthLayout.tsx	Successfully refactored to use shared AuthFormLayout component, eliminating 80+ lines of duplicated code
clients/privacy-center/cypress/e2e/privacy-center/privacy-request.cy.ts	Comprehensive e2e tests added covering the full page-based flow including form submission, verification, and success states

[greptile-apps]

_{13 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: uses div instead of semantic components - per coding standards, prefer Ant Design's Flex component or other semantic elements

Suggested change

	<div style={{ width: "100%", maxWidth, padding: "48px 24px" }}>
	<Flex style={{ width: "100%", maxWidth, padding: "48px 24px" }}>

Context Used: Rule from dashboard - Avoid using div elements when possible. Use semantic HTML elements or component library alternativ... (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[greptile-apps]

style: uses div for form container - prefer semantic or Flex component

Suggested change

	<div
	style={{
	backgroundColor: "white",
	padding: "48px",
	width: "100%",
	borderRadius: "4px",
	boxShadow:
	"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
	}}
	<Flex
	style={{
	backgroundColor: "white",
	padding: "48px",
	width: "100%",
	borderRadius: "4px",
	boxShadow:
	"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
	}}
	>

Context Used: Rule from dashboard - Avoid using div elements when possible. Use semantic HTML elements or component library alternativ... (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}