Stack Auth
GuidesSDKComponentsAPI Reference
Back to home
Platform
OverviewFAQ
Getting Started
SetupComponentsUsersProduction
Concepts
API KeysBackend IntegrationCustom User DataEmailsJWT TokensOAuth
OAuth Providers
Orgs and TeamsPermissionsStack AppTeam SelectionUser OnboardingWebhooks
Customization
Custom PagesCustom StylesDark ModeInternationalization
Page Examples
Other
Self-hostSupabaseMCP SetupConvex
Stack Auth Docs

Components

Pre-built Next.js components to make your life easier

In the last guide, we initialized Stack. This time, we will take a quick look at some of the most useful Next.js components.

For the full documentation of all available components, please refer to the components reference.

<UserButton />

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

UserButton
page.tsx
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
page.tsx
import { SignIn } from '@stackframe/stack';

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

All of Stack's 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 useStackApp().signInWithMagicLink()
  • A <CredentialSignIn />, which has two text fields and calls useStackApp().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

Stack has many more components available. For a comprehensive list, please check the documentation on components.

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.

Previous PageSetup
Next PageUsers

Table of Contents

Navigate this page

On this page

<UserButton /><SignIn /> and <SignUp />OthersNext steps

Stack Auth AI

Documentation assistant

Experimental: AI responses may not always be accurate—please verify important details.

For the most accurate information, please join our Discord or email us.

How can I help?

Ask me about Stack Auth while you browse the docs.