mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
4e467c4026
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com> Co-authored-by: Madison Kennedy <madison@Madisons-MacBook-Pro.local> Co-authored-by: BilalG1 <bg2002@gmail.com>
113 lines
4.8 KiB
Plaintext
113 lines
4.8 KiB
Plaintext
---
|
|
title: Overview
|
|
---
|
|
|
|
Welcome to Stack Auth, the developer-friendly open-source authentication platform that gets you started in minutes!
|
|
|
|
You can get started in five minutes with our [setup guide](./getting-started/setup.mdx), or jump straight into the documentation.
|
|
|
|
<CardGroup>
|
|
<Card
|
|
title="Setup & Installation"
|
|
icon="fa-regular fa-play"
|
|
href="./getting-started/setup"
|
|
>
|
|
Get started with Stack in 5 minutes
|
|
</Card>
|
|
{/* IF_PLATFORM: react-like */}
|
|
<Card
|
|
title="Components"
|
|
icon="fa-solid fa-puzzle"
|
|
href="./components/overview"
|
|
>
|
|
Use our pre-built React components, or create your own
|
|
</Card>
|
|
{/* END_PLATFORM */}
|
|
{/* IF_PLATFORM: js-like */}
|
|
<Card
|
|
title="SDK Reference"
|
|
icon="fa-regular fa-file-lines"
|
|
href="./sdk/overview"
|
|
>
|
|
Learn how to use Stack Auth's SDK
|
|
</Card>
|
|
{/* END_PLATFORM */}
|
|
<Card
|
|
title="REST API Reference"
|
|
icon="fa-solid fa-code"
|
|
href="/api/overview"
|
|
>
|
|
Explore Stack's REST APIs
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
Still have questions? Check out our [FAQ](./faq) or [join our Discord](https://discord.stack-auth.com).
|
|
|
|
## Why Choose Stack Auth?
|
|
|
|
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 developers need to worry about JWTs, OAuth flows, or password hashing, then the authentication solution has failed its purpose. 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 Auth. Integrating secure authentication into your app should take **5 minutes**, not 5 days.
|
|
|
|
At the core of Stack Auth are deep integrations into frontend and backend frameworks. We offer the best developer experience with Next.js. 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 get the current user, simply call:
|
|
|
|
```tsx
|
|
export function MyComponent() {
|
|
const user = useUser({ or: "redirect" });
|
|
return <div>Hi, {user.displayName}</div>;
|
|
}
|
|
```
|
|
|
|
That's it! Stack Auth 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:
|
|
|
|
```tsx
|
|
<button onClick={async () => await user.update({ displayName: "New Name" })}>
|
|
Change Name
|
|
</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:
|
|
|
|
<div className="stack-white-image-showcase stack-350h">
|
|
<img src="/imgs/sign-in.png" alt="SignIn" />
|
|
</div>
|
|
|
|
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 depend on your help 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:
|
|
|
|
```tsx
|
|
export default function CustomOAuthSignIn() {
|
|
const app = useStackApp();
|
|
return (
|
|
<div>
|
|
<button onClick={async () => await app.signInWithOAuth('google')}>
|
|
Sign In with Google
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
To manage everything efficiently, there is a powerful admin dashboard:
|
|
|
|
|
|
|
|
Best of all, Stack Auth is **100% open-source**. This means the client, server, dashboard, and even this documentation you're reading right now. Check out our [GitHub](https://github.com/stack-auth/stack-auth) to open an issue or pull request.
|
|
|
|
This is just a glimpse of what Stack Auth can do. We also handle 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](./getting-started/setup) with our interactive setup wizard, or join [our Discord community](https://discord.stack-auth.com) to ask questions and get help from our team.
|
|
|
|
We're excited to have you on board! 🚀
|