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
| Reference | What it covers |
|---|---|
references/sign-in-or-up-flow.md | CRITICAL - withSignUp prop, SignInCard component, env vars |
references/auth-modal.md | HIGH - Intercepting route modal pattern, parallel routes, fallback page |
Mental Model
code
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
- •
withSignUpon<SignIn>eliminates the need for a separate/sign-uproute entirely - •Intercepting routes
(.)show sign-in as a modal on soft nav while preserving the background page - •
@modalparallel route in root layout renders alongsidechildren— both are always present - •
<Show when="signed-out">gate prevents the modal from rendering when already authenticated
File Tree
code
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