<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

Name	Type	Description
`redirectUrl`	`string`	Full 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.
`afterSignInUrl`	`string`	Full URL or path to navigate after successful sign in.
`afterSignUpUrl`	`string`	Full URL or path to navigate after successful sign up.