<SignIn />

Renders a sign-in component with customizable options.

Component Options

fullPage

If true, renders the sign-in page in full-page mode with additional styling.

automaticRedirect

If true, automatically redirects when user is already signed in without showing the 'You are signed in' message.

firstTab

magic-linkpassword

Determines which tab is initially active when both email and password authentication are enabled.

extraInfo

Additional content to be displayed below the sign-in form, such as terms of service links.

Live Preview

Component Demo

Code Example

For more information, please refer to the custom pages guide.

Props

Prop	Type	Default	Description
`fullPage`optional	`boolean`	`false`	If true, renders the component in full-page mode.
`automaticRedirect`optional	`boolean`	`false`	If true, redirect to afterSignIn/afterSignUp URL when user is already signed in without showing the 'You are signed in' message.
`extraInfo`optional	`React.ReactNode`	`undefined`	Additional content to be displayed on the sign-in page.
`firstTab`optional	`'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>
  );
}