<SignIn />
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]].tsximport { SignIn } from "@clerk/nextjs"; const SignInPage = () => ( <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" /> ); export default SignInPage;
/pages/sign-in/[[...index]].[jsx/tsx]import { SignIn } from "@clerk/react"; const SignInPage = () => ( <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" /> ); export default SignInPage;
app/routes/sign-in/$.tsximport { SignIn } from "@clerk/remix"; export default function SignInPage() { return ( <div style={{ border: "2px solid blue", padding: "2rem" }}> <h1>Sign In route</h1> <SignIn routing={"path"} path={"/sign-in"} /> </div> ); }
/pages/sign-in.jsimport { SignIn } from "gatsby-plugin-clerk"; export default function SignInPage() { return ( <div style={{ border: "2px solid blue", padding: "2rem" }}> <h1>Sign In Up route</h1> <SignIn routing={"path"} path={"/sign-in"} /> </div> ); }
sign-in.jswindow.Clerk.mountSignIn( document.getElementById("sign-in") ); window.Clerk.openSignIn();
Props
All props below are optional.
Name | Type | Description |
---|---|---|
appearance | object | Controls the overall look and feel of the component. See Appearance for more information. |
routing | string | The routing strategy for your pages. Supported values are:
|
path | string | The 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 . |
redirectUrl | string | Full URL or path to navigate to after successful sign-in or sign-up. The same as setting afterSignInUrl and afterSignUpUrl to the same value. |
afterSignInUrl | string | Full URL or path to navigate to after a successful sign-in. |
signInUrl | string | Full URL or path to the sign-in page. Use this property to provide the target of the 'Sign In' link that's rendered. |
afterSignUpUrl | string | Full URL or path to navigate to after a successful sign-up. |
initialValues | SignInInitialValues | The values used to prefill the sign-in fields with. |