Building Custom Sign In and Sign Up Pages

Clerk allows you to host sign-in and sign-up forms directly inside your application routes instead of redirecting visitors to a Clerk-hosted domain. Let us build custom page routing.

1. Custom Sign In Page

To support Clerk dynamic sub-routing (such as login code email redirects), configure a Catch-All Route in Next.js:

Create the folder structure app/sign-in/[[...sign-in]]/ and create a page.tsx file inside it:

// app/sign-in/[[...sign-in]]/page.tsx
import React from "react";
import { SignIn } from "@clerk/nextjs";

export default function CustomSignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="w-full max-w-md space-y-8 flex flex-col items-center">
        <SignIn 
          path="/sign-in" 
          routing="path" 
          signUpUrl="/sign-up" 
        />
      </div>
    </div>
  );
}

2. Custom Sign Up Page

Similarly, create the folder structure app/sign-up/[[...sign-up]]/ and create a page.tsx file inside it:

// app/sign-up/[[...sign-up]]/page.tsx
import React from "react";
import { SignUp } from "@clerk/nextjs";

export default function CustomSignUpPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="w-full max-w-md space-y-8 flex flex-col items-center">
        <SignUp 
          path="/sign-up" 
          routing="path" 
          signInUrl="/sign-in" 
        />
      </div>
    </div>
  );
}

3. Customizing the Brand Aesthetics

You can customize the appearance of these components to match your website design style. Pass a theme configuration object inside the <SignIn /> component or configure global appearance values in your ClerkProvider:

// Example of inline theme customizations
<SignIn 
  appearance={{
    variables: {
      colorPrimary: "#2563eb", // Customize primary blue color
      colorBackground: "#ffffff",
      borderRadius: "12px",
    }
  }}
/>