RealtimeKeep your app up to date
AuthenticationOver 80+ OAuth integrations
Convex Components
ComponentsIndependent, modular, TypeScript building blocks for your backend.
Open sourceSelf host and develop locally
AI CodingGenerate high quality Convex code with AI
Compare
Convex vs. Firebase
Convex vs. Supabase
Convex vs. SQL
DocumentationGet started with your favorite frameworks
SearchSearch across Docs, Stack, and Discord
TemplatesUse a recipe to get started quickly
Convex for StartupsStart and scale your company with Convex
Convex ChampionsAmbassadors that support our thriving community
Convex CommunityShare ideas and ask for help in our community Discord
Stack
Stack

Stack is the Convex developer portal and blog, sharing bright ideas and techniques for building with Convex.

Explore Stack
BlogDocsPricing
GitHub
Log inStart building
Back to Components

Stack Auth

stack-auth's avatar
stack-auth/stack-auth
View repo
GitHub logoView package

Category

Integrations
Stack Auth hero image
npm install @stack-auth/stack-auth

Stack Auth Convex Component

This component is the official way to integrate Stack Auth with your Convex project.

Installation#

To get started, first install Stack Auth using the setup wizard:

npx @stackframe/init-stack@latest

Get Started#

Create a new Stack Auth project and set the environment variables in Convex to the project ID & API key environment variables from the Stack Auth dashboard. Also, add the same values to the .env.local file.

Next, update or create a file in convex/auth.config.ts:

import { getConvexProvidersConfig } from "@stackframe/js";  // Vanilla JS
// or: import { getConvexProvidersConfig } from "@stackframe/react";  // React
// or: import { getConvexProvidersConfig } from "@stackframe/stack";  // Next.js

export default {
  providers: getConvexProvidersConfig({
    projectId: process.env.STACK_PROJECT_ID,  // or: process.env.NEXT_PUBLIC_STACK_PROJECT_ID
  }),
}

Then, update your Convex client to use Stack Auth:

convexClient.setAuth(stackServerApp.getConvexClientAuth());  // browser JS
convexReactClient.setAuth(stackServerApp.getConvexClientAuth());  // React
convexHttpClient.setAuth(stackServerApp.getAuthForConvexHttpClient({ tokenStore: requestObject }));  // HTTP, see Stack Auth docs for more information on tokenStore

Now, you'll be able to access Stack Auth's functionality from your frontend & backend:

// MyPage.tsx
export function MyPage() {
  // see https://docs.stack-auth.com for more information on how to use Stack Auth
  const user = useUser();
  return <div>Your email is {user.email}</div>;
}

// myFunctions.ts
export const myQuery = query({
  handler: async (ctx, args) => {
    // In queries & mutations, use the special `getPartialUser` function to get user info
    const obj = await stackServerApp.getPartialUser({ from: "convex", ctx });
    return JSON.stringify(obj);
  },
});

For more information on how to use Stack Auth, see the Stack Auth docs.

Get your app up and running in minutes
Start building
Convex logo
ProductSyncRealtimeAuthOpen sourceAI codingChefFAQPricing
DevelopersDocsBlogComponentsTemplatesStartupsChampionsChangelogPodcastLLMs.txt
CompanyAbout usBrandInvestorsBecome a partnerJobsNewsEventsTerms of servicePrivacy policySecurity
SocialTwitterDiscordYouTubeLumaBlueskyGitHub
A Trusted Solution
  • SOC 2 Type II Compliant
  • HIPAA Compliant
  • GDPR Verified
©2025 Convex, Inc.