Overview

You can get started in five minutes with our setup guide, or jump straight into the documentation.

Why Choose Stack?

Authentication is inherently difficult. Few things are more sensitive than user data and more complex than cryptography. Not surprisingly, many online businesses struggle to get it right.

The optimal authentication solution should be secure, yet approachable. If a developer has to worry about JWTs, OAuth flows, or password hashing, then we have failed. If an authentication solution uses closed-source, unauditable code for the most critical parts of your application, then we have failed.

In truth, the authentication services industry has collectively failed. It’s dominated by proprietary giants with predatory “bait-and-switch” pricing, providing no transparency into their codebase and delivering a subpar developer experience — because they know enterprises will pay more if setting up auth systems is painful.

That’s why we built Stack. Integrating secure authentication into your app should take 5 minutes, not 5 days.

At the core of Stack are deep integrations into frontend and backend frameworks. We offer the best developer experience to those using our supported tech stacks — currently, Next.js with Postgres and TypeScript or Python backends. Instead of providing mediocre support for numerous frameworks, we focused on making a few integrations excellent before adding new ones. We also offer a cross-compatible REST API as a fallback.

Here’s an example. To retrieve the current user, simply call:

1
export function MyComponent() {
2
  const user = useUser({ or: "redirect" });
3
  return <div>{user ? `Hi, ${user.displayName}` : 'You are not logged in'}</div>;
4
}

That’s it! Stack will either return a User object or redirect the user to the login page.

You can also add a button to change the user’s name:

1
<button onClick={async () => await user.update({ displayName: "New Name" })}>
2
  Change Name
3
</button>

The user data will update in both the frontend and backend automatically. The updated user data will be reflected in all other components on your page as well.

You also get pages and components for the authentication flow out-of-the-box. This is the sign-in page you get without writing a single line of code:

Notice, there’s no branding on our components. We believe we should grow by building the best product, not by forcing our brand onto your users. This means we rely on you to spread the word about Stack. If you like what you’re reading, please take a moment to tell one or two of your friends about us.

If you prefer a fully customized UI, you can use our low-level functions like signInWithOAuth or signInWithCredential to build your own sign-in page:

1
export default function CustomOAuthSignIn() {
2
  const app = useStackApp();
3
  return (
4
    <div>
5
      <button onClick={async () => await app.signInWithOAuth('google')}>
6
        Sign In with Google
7
      </button>
8
    </div>
9
  );
10
}

To manage everything efficiently, there is a powerful admin dashboard:

Best of all, Stack is 100% open-source. This means the client, server, dashboard, and even this documentation you’re reading right now. Check out our GitHub to open an issue or pull request.

This is just a glimpse of what Stack can do. Stack also handles many other tasks like backend integration, data storage, emails, teams, permissions, and more, which you will learn about later in the documentation.

If this sounds interesting, get started with our interactive setup wizard, or join our Discord community to ask questions and get help from our team.

We’re excited to have you on board! 🚀