Repository files navigation

Stack Auth is a managed user authentication solution. It is developer-friendly and fully open-source (licensed under MIT and AGPL).

Stack Auth gets you started in just five minutes, after which you'll be ready to use all of its features as you grow your project. Our managed service is completely optional and you can export your user data and self-host, for free, at any time.

We support Next.js, React, and JavaScript frontends, along with any backend that can use ourREST API. Check out oursetup guide to get started.

• How is this different from X?
• ✨ Features
• 📦 Installation & Setup
• 🌱 Some community projects built with Stack Auth
  • Templates
  • Examples
• 🏗 Development & Contribution
  • Requirements
  • Setup
  • Database migrations
  • Chat with the codebase
  • Architecture overview
• ❤ Contributors

Ask yourself aboutX:

• IsX open-source?
• IsX developer-friendly, well-documented, and lets you get started in minutes?
• Besides authentication, doesX also do authorization and user management (see feature list below)?

If you answered "no" to any of these questions, then that's how Stack Auth is different fromX.

To get notified first when we add new features, please subscribe toour newsletter.

<SignIn/> and<SignUp/> Authentication components that support OAuth, password credentials, and magic links, with shared development keys to make setup faster. All components support dark/light modes.
Idiomatic Next.js APIs We build on server components, React hooks, and route handlers.
User dashboard Dashboard to filter, analyze, and edit users. Replaces the first internal tool you would have to build.
Account settings Lets users update their profile, verify their e-mail, or change their password. No setup required.
Multi-tenancy & teams Manage B2B customers with an organization structure that makes sense and scales to millions.
Role-based access control Define an arbitrary permission graph and assign it to users. Organizations can create org-specific roles.
OAuth Connections Beyond login, Stack Auth can also manage access tokens for third-party APIs, such as Outlook and Google Calendar. It handles refreshing tokens and controlling scope, making access tokens accessible via a single function call.
Passkeys Support for passwordless authentication using passkeys, allowing users to sign in securely with biometrics or security keys across all their devices.
Impersonation Impersonate users for debugging and support, logging into their account as if you were them.
Webhooks Get notified when users use your product, built on Svix.
Automatic emails Send customizable emails on triggers such as sign-up, password reset, and email verification, editable with a WYSIWYG editor.
User session & JWT handling Stack Auth manages refresh and access tokens, JWTs, and cookies, resulting in the best performance at no implementation cost.
M2M authentication Use short-lived access tokens to authenticate your machines to other machines.

To install Stack Auth in your Next.js project (for React, JavaScript, or other frameworks, see ourcomplete documentation):

1. Run Stack Auth's installation wizard with the following command:

   npx @stackframe/init-stack@latest

   If you prefer not to open a browser during setup (useful for CI/CD environments or restricted environments):

   npx @stackframe/init-stack@latest --no-browser

2. Then, create an account on theStack Auth dashboard, create a new project with an API key, and copy its environment variables into the .env.local file of your Next.js project:

   NEXT_PUBLIC_STACK_PROJECT_ID=<your-project-id>NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=<your-publishable-client-key>STACK_SECRET_SERVER_KEY=<your-secret-server-key>

3. That's it! You can run your app withnpm run dev and go tohttp://localhost:3000/handler/signup to see the sign-up page. You can also check out the account settings page athttp://localhost:3000/handler/account-settings.

Check out thedocumentation for a more detailed guide.

Have your own? Happy to feature it if you create a PR or message us onDiscord.

• Stack Auth Template by Stack Auth Team
• Next SaaSkit by wolfgunblood
• SaaS Boilerplate by Robin Faraj

• Stack Auth Example by career-tokens
• Stack Auth Demo by the Stack Auth team
• Stack Auth E-Commerce Example by the Stack Auth team

This is for you if you want to contribute to the Stack Auth project or run the Stack Auth dashboard locally.

Important: Please read thecontribution guidelines carefully and joinour Discord if you'd like to help.

• Node v20
• pnpm v9
• Docker

Pre-populated .env files for the setup below are available and used by default in.env.development in each of the packages. (Note: If you're creating a production build (eg. withpnpm run build), you must supply the environment variables manually.)

In a new terminal:

pnpm install# Build the packages and generate code. We only need to do this once, as `pnpm dev` will do this from now onpnpm build:packagespnpm codegen# Start the dependencies (DB, Inbucket, etc.) as Docker containers, seeding the DB with the Prisma schemapnpm restart-deps# restart-deps is the same as:#   pnpm run stop-deps  (if the containers are already running)#   pnpm run start-deps# Start the dev serverpnpm dev# For systems with limited resources, you can run a minimal development setup with just the backend and dashboard# pnpm run dev:basic# In a different terminal, run tests in watch modepnpmtest

You can now open the dev launchpad athttp://localhost:8100. From there, you can navigate to the dashboard athttp://localhost:8101, API on port 8102, demo on port 8103, docs on port 8104, Inbucket (e-mails) on port 8105, and Prisma Studio on port 8106. See the dev launchpad for a list of all running services.

Your IDE may show an error on all@stackframe/XYZ imports. To fix this, simply restart the TypeScript language server; for example, in VSCode you can open the command palette (Ctrl+Shift+P) and runDeveloper: Reload Window orTypeScript: Restart TS server.

You can also open Prisma Studio to see the database interface and edit data directly:

pnpm run prisma studio

If you make changes to the Prisma schema, you need to run the following command to create a migration:

pnpm run prisma migrate dev

Storia trained anAI on our codebase that can answer questions about using and contributing to Stack Auth.

  graph TB      Website[Your Website]      User((User))      Admin((Admin))      subgraph "Stack Auth System"          Dashboard[Stack Auth Dashboard<br/>/apps/dashboard]          Backend[Stack Auth API Backend<br/>/apps/backend]          Database[(PostgreSQL Database)]          EmailService[Email Service<br/>Inbucket]          WebhookService[Webhook Service<br/>Svix]          StackSDK[Client SDK<br/>/packages/stack]          subgraph Shared              StackUI[Stack Auth UI<br/>/packages/stack-ui]              StackShared[Stack Auth Shared<br/>/packages/stack-shared]              StackEmails[Stack Auth Emails<br/>/packages/stack-emails]          end      end      Admin --> Dashboard      User --> Website      Website --> StackSDK      Backend --> Database      Backend --> EmailService      Backend --> WebhookService      Dashboard --> Shared      Dashboard --> StackSDK      StackSDK --HTTP Requests--> Backend      StackSDK --> Shared      Backend --> Shared      classDef container fill:#1168bd,stroke:#0b4884,color:#ffffff      classDef database fill:#2b78e4,stroke:#1a4d91,color:#ffffff      classDef external fill:#999999,stroke:#666666,color:#ffffff      classDef deprecated stroke-dasharray: 5 5      class Dashboard,Backend,EmailService,WebhookService,Website container      class Database database

Thanks toCodeViz for generating the diagram!