Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<SignIn />

Sign in component example

The <SignIn /> component renders a UI for signing in users. The functionality of the <SignIn /> component is controlled by the instance settings you specify in your Clerk Dashboard. You can further customize your <SignIn /> component by passing additional properties at the time of rendering.

Usage

Below is basic implementation of the <SignIn /> component. You can use this as a starting point for your own implementation.

You can embed the <SignIn /> component using the Next.js optional catch-all route. This allows you to redirect the user inside your application. The <SignIn /> component should be mounted on a public page.

/app/sign-in/[[...sign-in]]/page.[jsx/tsx]
import { SignIn } from "@clerk/nextjs"; export default function Page() { return <SignIn />; }
/pages/sign-in/[[...index]].tsx
import { SignIn } from "@clerk/nextjs"; const SignInPage = () => ( <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" /> ); export default SignInPage;

Props

All props below are optional.

NameTypeDescription
appearanceobjectControls the overall look and feel of the component. See Appearance for more information.
routingstringThe routing strategy for your pages.
Supported values are:
  • hash (default): Hash-based routing.
  • path: Path-based routing.
  • virtual: Virtual-based routing.
pathstringThe path where the component is mounted on when path-based routing is used e.g. /sign-up. Note: If you are using Environment Variables for Next.js or Remix to specify your routes, this will be set to path.
redirectUrlstringFull URL or path to navigate to after successful sign-in or sign-up.
The same as setting afterSignInUrl and afterSignUpUrl to the same value.
afterSignInUrlstringFull URL or path to navigate to after a successful sign-in.
signInUrlstringFull URL or path to the sign-in page. Use this property to provide the target of the 'Sign In' link that's rendered.
afterSignUpUrlstringFull URL or path to navigate to after a successful sign-up.
initialValuesSignInInitialValuesThe values used to prefill the sign-in fields with.

What did you think of this content?

Clerk © 2023