Docs

Build your own sign-in and sign-up pages for your Next.js app with Clerk

This guide shows you how to use the <SignIn /> and <SignUp /> components with the Next.js optional catch-all route in order to build custom sign-in and sign-up pages for your Next.js app.

If Clerk's 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, check out the custom flows guides.

Note

Watch the video version of this guide on the Clerk YouTube channel → YouTube (4 minutes).

Note

Just getting started with Clerk and Next.js? Check out the quickstart tutorial!

Build a sign-up page

Create a new file that will be used to render the sign-up page. In the file, import the <SignUp /> component from @clerk/nextjs and render it.

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

export default function Page() {
  return <SignUp />
}
/pages/sign-up/[[...index]].tsx
import { SignUp } from '@clerk/nextjs'

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

Build a sign-in page

Create a new file that will be used to render the sign-in page. In the file, import the <SignIn /> component from @clerk/nextjs and render it.

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

export default function Page() {
  return <SignIn />
}
/pages/sign-in/[[...index]].tsx
import { SignIn } from '@clerk/nextjs'

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

Make the sign-up and sign-in routes public

By default, clerkMiddleware() makes all routes public. This step is specifically for applications that have configured clerkMiddleware() to make all routes protected. If you have not configured clerkMiddleware() to protect all routes, you can skip this step.

To make the sign-up and sign-in routes public:

  • Navigate to your middleware.ts file.
  • Create a new route matcher that matches the sign-up and sign-in routes, or you can add them to an existing route matcher that is making routes public.
  • Create a check to see if the user's current route is a public route. If it is not a public route, use auth().protect() to protect the route.
middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isPublicRoute = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)'])

export default clerkMiddleware((auth, request) => {
  if (!isPublicRoute(request)) {
    auth().protect()
  }
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

Update your environment variables

In the previous steps, a path prop is passed to the <SignIn /> and <SignUp /> components. This is because the components need to know which route they are originally mounted on.

In Next.js applications, you can either pass the path prop, or you can define the NEXT_PUBLIC_CLERK_SIGN_IN_URL and NEXT_PUBLIC_CLERK_SIGN_UP_URL environment variables, like so:

.env.local
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Visit your new pages

Run your project with the following terminal command from the root directory of your project:

terminal
npm run dev
terminal
yarn dev
terminal
pnpm dev

Visit your new custom pages locally at localhost:3000/sign-in and localhost:3000/sign-up.

Read user and session data

Learn how to use Clerk's hooks and helpers to access the active session and user data in your Next.js application.

Client Side Helpers

Learn more about Next.js client-side helpers and how to use them.

Next.js SDK Reference

Learn more about additional Next.js methods.

Clerk Components

Learn more about Clerk's prebuilt components that make authentication and user management easy.

Feedback

What did you think of this content?

Last updated on