Sign-In-Or-Up with Intercepting Route Modals

One <SignIn withSignUp /> component handles both sign-in and sign-up. No dedicated sign-up page required.

References

Mental Model

User clicks "Sign In" link
  ├── Soft navigation → intercepting route → modal overlay
  └── Hard navigation (direct URL) → dedicated (auth) page

Both render the same <SignInCard /> component. The modal wraps it in a <Dialog>. The dedicated page centers it on screen. One component, two contexts.

Key Decisions

1. withSignUp on <SignIn> eliminates the need for a separate /sign-up route entirely
2. Intercepting routes (.) show sign-in as a modal on soft nav while preserving the background page
3. @modal parallel route in root layout renders alongside children — both are always present
4. <Show when="signed-out"> gate prevents the modal from rendering when already authenticated

File Tree

app/
├── layout.tsx                          # Accepts { children, modal } — renders both
├── @modal/
│   ├── default.tsx                     # Returns null (required for parallel routes)
│   └── (.)sign-in/
│       └── [[...sign-in]]/
│           ├── page.tsx                # Wraps SignInCard in <Show> + <Modal>
│           └── modal.tsx               # Dialog component with router.back() on close
└── (auth)/
    ├── layout.tsx                      # Centered container layout
    └── sign-in/
        └── [[...sign-in]]/
            └── page.tsx                # Renders <SignInCard /> directly
components/
└── sign-in-card.tsx                    # Single source of truth for <SignIn> config

Docs

• <SignIn /> props reference
• Custom sign-in-or-up page guide