In the previous guide, we initialized Neon Auth. This time, we will take a quick look at some of the most useful components.

For the full documentation of all available components, see the components reference.

<UserButton />

The <UserButton /> component shows the user's avatar that opens a dropdown with various user settings on click.

UserButton 
import { UserButton } from '@stackframe/stack';

export default function Page() {
  return <UserButton />;
}

<SignIn /> and <SignUp />

These components show a sign-in and sign-up form, respectively.

SignIn 
import { SignIn } from '@stackframe/stack';

export default function Page() {
  return <SignIn />;
}

All Neon Auth components are modular and built from smaller primitives. For example, the <SignIn /> component is composed of the following:

  • An <OAuthButtonGroup />, which itself is composed of multiple <OAuthButton /> components
  • A <MagicLinkSignIn />, which has a text field and calls signInWithMagicLink()
  • A <CredentialSignIn />, which has two text fields and calls signInWithCredential()

You can use these components individually to build a custom sign-in component.

To change the default sign-in URL to your own, see the documentation on custom pages.

Others

Neon Auth has many more components available. For a comprehensive list, see the components reference.

Next steps

In the next guide, we will do a deep-dive into retrieving and modifying user objects, as well as how to protect a page.