<SignIn />
Renders a sign-in component with customizable options.
Component Options
If true, renders the sign-in page in full-page mode with additional styling.
If true, automatically redirects when user is already signed in without showing the 'You are signed in' message.
Determines which tab is initially active when both email and password authentication are enabled.
Additional content to be displayed below the sign-in form, such as terms of service links.
Live Preview
Component Demo
For more information, please refer to the custom pages guide.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
fullPageoptional | boolean | false | If true, renders the component in full-page mode. |
automaticRedirectoptional | boolean | false | If true, redirect to afterSignIn/afterSignUp URL when user is already signed in without showing the 'You are signed in' message. |
extraInfooptional | React.ReactNode | undefined | Additional content to be displayed on the sign-in page. |
firstTaboptional | 'magic-link' | 'password' | undefined | Determines which tab is initially active. |
Example
import { SignIn } from '@stackframe/stack';
export default function Page() {
return (
<div>
<h1>Sign In</h1>
<SignIn
fullPage={true}
automaticRedirect={true}
firstTab='password'
extraInfo={<>When signing in, you agree to our <a href="/terms">Terms</a></>}
/>
</div>
);
}