Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<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.js
import { SignInButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton /> </div> ); }
example.js
import { SignInButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <h1> Sign in </h1> <SignInButton /> </div> ); }
pages/index.js
import { SignInButton } from "@clerk/remix"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton /> </div> ); }
pages/index.js
import { 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.js
import { SignInButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }
example.js
import { 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.js
import { 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.js
import { SignInButton } from "gatsby-plugin-clerk"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }

Props

NameTypeDescription
redirectUrlstringFull URL or path to navigate after successful sign in or sign up. This is the same as setting afterSignInUrl and afterSignUpUrl to the same value.
afterSignInUrlstringFull URL or path to navigate after successful sign in.
afterSignUpUrlstringFull URL or path to navigate after successful sign up.

What did you think of this content?

Clerk © 2023