<SignInButton>
The <SignInButton> component is a button that links to the sign-in page or displays the sign-in modal.
<SignInButton> properties
- Name
forceRedirectUrl?- Type
string- Description
If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.
- Name
signUpForceRedirectUrl?- Type
string- Description
If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.
- Name
fallbackRedirectUrl?- Type
string- Description
The fallback URL to redirect to after the user signs in, if there's no
redirect_urlin the path already. Defaults to/. It's recommended to use the environment variable instead.
- Name
signUpFallbackRedirectUrl?- Type
string- Description
The fallback URL to redirect to after the user signs up, if there's no
redirect_urlin the path already. Defaults to/. It's recommended to use the environment variable instead.
- Name
mode?- Type
'redirect' | 'modal'- Description
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'.
- Name
children?- Type
React.ReactNode- Description
Children you want to wrap the
<SignInButton>in.
import { SignInButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<SignInButton />
</div>
);
}import { SignInButton } from "@clerk/clerk-react";
export default function Example() {
return (
<div>
<SignInButton />
</div>
);
}import { SignInButton } from "@clerk/remix";
export default function Home() {
return (
<div>
<SignInButton />
</div>
);
}import { SignInButton } from "gatsby-plugin-clerk";
export default function Home() {
return (
<div>
<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 in the <SignInButton> component.
import { SignInButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<SignInButton>
<button>Sign in with Clerk</button>
</SignInButton>
</div>
);
}import { SignInButton } from "@clerk/clerk-react";
export default function Example() {
return (
<div>
<SignInButton>
<button>Sign in with Clerk</button>
</SignInButton>
</div>
);
}import { SignInButton } from "@clerk/remix";
export default function Home() {
return (
<div>
<SignInButton>
<button>Sign in with Clerk</button>
</SignInButton>
</div>
);
}import { SignInButton } from "gatsby-plugin-clerk";
export default function Home() {
return (
<div>
<SignInButton>
<button>Sign in with Clerk</button>
</SignInButton>
</div>
);
}