<SignInButton />
The <SignInButton />
component is a button that links to the sign-in page or displays the sign-in modal.
Usage
Basic usage
pages/index.jsimport { SignInButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton /> </div> ); }
example.jsimport { SignInButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <h1> Sign in </h1> <SignInButton /> </div> ); }
pages/index.jsimport { SignInButton } from "@clerk/remix"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton /> </div> ); }
pages/index.jsimport { SignInButton } from "gatsby-plugin-clerk"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton /> </div> ); }
Custom usage
In some cases you will want to use your own button, or button text. You can do that by wrapping your button up.
pages/index.jsimport { SignInButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }
example.jsimport { SignInButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <h1> Sign in </h1> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }
pages/index.jsimport { SignInButton } from "@clerk/remix"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }
pages/index.jsimport { SignInButton } from "gatsby-plugin-clerk"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }
Properties
Name | Type | Description |
---|---|---|
redirectUrl | string | Full URL or path to navigate after successful sign in or sign up. The same as setting afterSignInUrl and afterSignUpUrl to the same value. |
afterSignInUrl | string | The full URL or path to navigate after a successful sign in. |
afterSignUpUrl | string | The full URL or path to navigate after a successful sign up. |
mode | 'redirect' | 'modal' | Determines what happens when a user clicks on the <SignInButton /> . Setting this to 'redirect' will redirect the user to the sign-in route. Setting this to 'modal' will open a modal on the current route.Defaults to 'redirect'` |
Last updated on November 21, 2023