---
source_url: "https://clerk.com/docs/nextjs/guides/development/custom-sign-in-or-up-page"
title: "Build your own sign-in-or-up page for your Next.js app with Clerk - Authentication flows | Clerk Docs"
mirrored_at: 2026-08-10T13:02:45.559Z
host: clerk.com
cited_in_42a: true
mirror_canonical: "https://index.42a.ai/clerk.com/docs/nextjs/guides/development/custom-sign-in-or-up-page"
---
> **Original source:** https://clerk.com/docs/nextjs/guides/development/custom-sign-in-or-up-page
This guide shows you how to use the [](https://clerk.com/docs/reference/components/authentication/sign-in) component to build a custom page that **allows users to sign in or sign up within a single flow**.
To set up separate sign-in and sign-up pages, follow this guide, and then follow the [custom sign-up page guide](https://clerk.com/docs/nextjs/guides/development/custom-sign-up-page).
app/sign-in/\[\[...sign-in\]\]/page.tsx
## [Make the route public](#make-the-route-public)
Ensure the `/sign-in` route is accessible to all users, including unauthenticated users.
If your `clerkMiddleware()` includes auth checks, this pattern is no longer recommended. See [Migrating away from Middleware-based auth checks](https://clerk.com/docs/guides/development/upgrading/upgrade-guides/migrate-from-create-route-matcher).
## [Update your environment variables](#update-your-environment-variables)
- Set the `CLERK_SIGN_IN_URL` environment variable to tell Clerk where the `` component is being hosted.
- Set `CLERK_SIGN_IN_FALLBACK_REDIRECT_URL` as a fallback URL incase users visit the `/sign-in` route directly.
- Set `CLERK_SIGN_UP_FALLBACK_REDIRECT_URL` as a fallback URL incase users select the 'Don't have an account? Sign up' link at the bottom of the component.
Learn more about these environment variables and how to customize Clerk's redirect behavior in the [dedicated guide](https://clerk.com/docs/guides/development/customize-redirect-urls).
.env
## [Visit your new page](#visit-your-new-page)
Run your project with the following command: