Skip to main content

Build your own sign-in-or-up page for your Next.js app with Clerk

This guide shows you how to use the <SignIn /> 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.

Tip

If prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the custom flow guides.

Build a sign-in-or-up page

The following example demonstrates how to render the <SignIn /> component on a dedicated page using the Next.js optional catch-all route.

app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs'

export default function Page() {
  return <SignIn />
}

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.

Update your environment variables

  • Set the CLERK_SIGN_IN_URL environment variable to tell Clerk where the <SignIn /> 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.

.env
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

Visit your new page

Run your project with the following command:

npm run dev
pnpm run dev
yarn dev
bun run dev

Visit your new custom page locally at localhost:3000/sign-in.

Next steps

Learn more about Clerk components, how to use them to create custom pages, and how to use Clerk's client-side helpers using the following guides.

Create a custom sign-up page

Learn how to add a custom sign-up page to your Next.js app with Clerk components.

Read user data

Learn how to use Clerk's hooks and helpers to read user data in your Next.js app.

Client-side helpers

Learn more about Clerk's client-side helpers and how to use them.

Prebuilt components

Learn how to quickly add authentication to your app using Clerk's suite of components.

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub