feat: Integrate Stack Auth #144
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,9 @@ | ||
| "use server"; | ||
|
|
||
| export async function getSignInUrlAction() { | ||
| return "/handler/sign-in"; | ||
| } | ||
|
|
||
| export async function getSignUpUrlAction() { | ||
| return "/handler/sign-up"; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { StackHandler } from "@stackframe/stack"; | ||
| import { stackTheme } from "@/stack-theme"; | ||
|
|
||
| export default function StackHandlerPage() { | ||
| return <StackHandler app={stackTheme} />; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,51 @@ | ||
| import { StackServerApp } from "@stackframe/stack"; | ||
| import { ConvexHttpClient } from "convex/browser"; | ||
|
|
||
| /** | ||
| * Get the authenticated user from Stack Auth | ||
| */ | ||
| export async function getUser() { | ||
| const stack = new StackServerApp({ | ||
| tokenStore: "nextjs-cookie", | ||
| }); | ||
| const user = await stack.getUser(); | ||
|
|
||
| if (!user) return null; | ||
|
|
||
| // Map Stack user to a structure compatible with existing code where possible | ||
| // or return the Stack user extended with compatibility fields | ||
|
|
||
| const displayName = user.displayName || ""; | ||
| const parts = displayName.split(" "); | ||
| const firstName = parts[0] || ""; | ||
| const lastName = parts.slice(1).join(" ") || ""; | ||
|
|
||
| return { | ||
| ...user, | ||
| // Compatibility fields | ||
| email: user.primaryEmail, | ||
| firstName: firstName, | ||
| lastName: lastName, | ||
| // Ensure id is present (it is) | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * Get the authentication token for Convex | ||
| */ | ||
| export async function getToken() { | ||
| return null; | ||
| } | ||
|
|
||
| /** | ||
| * Get auth headers for API calls | ||
| */ | ||
| export async function getAuthHeaders() { | ||
| return {}; | ||
| } | ||
|
Comment on lines
36
to
45
Contributor
There was a problem hiding this comment. 🧩 Analysis chainStubbed token/auth helpers will drop server-side authorization
If that’s intentional (e.g., you’re temporarily disabling those code paths), it’d be safer to either delete these helpers or clearly guard their callers. Otherwise, they should be updated to retrieve the appropriate Stack token and call I recommend grepping for usages of these helpers to understand impact: And consult Stack Auth + Convex docs for the proper way to obtain and pass an OIDC/JWT token from Stack into Convex or your own APIs. Also applies to: 57-66 🏁 Script executed: #!/bin/bash
rg -n "getToken\\(" -S
rg -n "getAuthHeaders\\(" -S
rg -n "getConvexClientWithAuth\\(" -SLength of output: 1676 🌐 Web query: 💡 Result: Short answer — use the Stack Next.js server SDK to read the user’s session server‑side (via the StackServerApp / Next.js cookie token store), extract the JWT (ID or access token) and forward it to Convex (or your backend) as a Bearer token. Convex expects an OIDC ID token (or a JWT that satisfies your convex/auth.config.ts) and will validate iss/aud/jwks. [1][2] How (high level)
Concrete pointers / reading
If you want, tell me:
Sources I need to examine the actual usage in the API routes and check how Stack Auth is initialized in the codebase. 🏁 Script executed: #!/bin/bash
# View the API routes that call getConvexClientWithAuth
echo "=== fix-errors/route.ts ===" && cat src/app/api/fix-errors/route.ts
echo ""
echo "=== messages/update/route.ts ===" && cat src/app/api/messages/update/route.tsLength of output: 4715 🏁 Script executed: #!/bin/bash
# Search for Stack Auth initialization or StackServerApp
rg -n "StackServerApp|StackAuth|initializeStackAuth" -C3Length of output: 3375 🏁 Script executed: #!/bin/bash
# Check if there's any conditional logic around auth helpers or TODOs
rg -n "TODO|FIXME|disable|stub" src/lib/auth-server.ts -C2Length of output: 266 🏁 Script executed: #!/bin/bash
# Look for convex/auth.config.ts or Stack Auth configuration
fd -t f -n "auth\.config\|auth\.ts\|\.env" | head -20Length of output: 230 Let me view the complete 🏁 Script executed: #!/bin/bash
# View the full auth-server.ts file to see getConvexClientWithAuth
cat src/lib/auth-server.tsLength of output: 1811 🏁 Script executed: #!/bin/bash
# Search for convex auth config
find . -type f -name "auth.config.*" 2>/dev/null | head -10Length of output: 23 🏁 Script executed: #!/bin/bash
# View the convex auth config to understand what token is expected
cat convex/auth.config.tsLength of output: 188 🏁 Script executed: #!/bin/bash
# Search for how tokens are accessed from Stack in the codebase
rg -n "accessToken|idToken|getToken|forceRefreshToken" src/lib/auth-server.ts -C3
rg -n "accessToken|idToken" -C2 --type=ts --type=tsx | head -40Length of output: 153 Implement server-side authentication bridge between Stack Auth and Convex The review comment is validated. The codebase has
This matches 🤖 Prompt for AI Agents |
||
|
|
||
| /** | ||
| * Create a Convex HTTP client with Stack Auth authentication | ||
| * Use this in API routes that need to call Convex | ||
| */ | ||
| export async function getConvexClientWithAuth() { | ||
|
|
@@ -50,11 +56,12 @@ export async function getConvexClientWithAuth() { | |
|
|
||
| const httpClient = new ConvexHttpClient(convexUrl); | ||
|
|
||
| // We need to properly authenticate the Convex client | ||
| // Stack Auth usually uses the OIDC token for Convex | ||
| // The Convex HTTP client setAuth(token) expects a token. | ||
|
|
||
| // TODO: Retrieve the OIDC token for Convex from Stack Auth if available server-side | ||
| // For now, we return the client. If queries are protected, they might fail if we don't setAuth. | ||
|
|
||
| return httpClient; | ||
|
Comment on lines
+63
to
66
There was a problem hiding this comment.
The Stack migration leaves Useful? React with 👍 / 👎. |
||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,6 @@ | ||
| import { stackMiddlewares } from "@stackframe/stack/next"; | ||
|
|
||
| export default stackMiddlewares; | ||
|
Comment on lines
+1
to
+3
Contributor
There was a problem hiding this comment. 🧩 Analysis chainFix missing CI cannot resolve You can quickly verify dependency wiring with: 🏁 Script executed: #!/bin/bash
# From repo root
if [ -f package.json ]; then
echo "Dependency entry for @stackframe/stack:"
grep -n "\"@stackframe/stack\"" package.json || echo "Not found in package.json"
fi
echo
echo "All imports of @stackframe/stack in the codebase:"
rg -n "@stackframe/stack" -S || echo "No imports found"Length of output: 2681 Length of output: 2271 Add The 🧰 Tools🪛 GitHub Actions: CI[error] 1-1: Cannot find module '@stackframe/stack/next' or its corresponding type declarations. 🤖 Prompt for AI Agents |
||
|
|
||
| export const config = { | ||
| matcher: [ | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ import { useScroll } from "@/hooks/use-scroll"; | |
| import { Button } from "@/components/ui/button"; | ||
| import { UserControl } from "@/components/user-control"; | ||
| import { AuthModal } from "@/components/auth-modal"; | ||
| import { useUser } from "@stackframe/stack"; | ||
| import { | ||
| NavigationMenu, | ||
| NavigationMenuItem, | ||
|
|
@@ -27,7 +27,7 @@ import { CalendarCheckIcon, MailIcon } from "lucide-react"; | |
|
|
||
| export const Navbar = () => { | ||
| const isScrolled = useScroll(); | ||
| const user = useUser(); | ||
| const [authModalOpen, setAuthModalOpen] = useState(false); | ||
| const [authMode, setAuthMode] = useState<"signin" | "signup">("signin"); | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
Tighten Convex auth adapter: handle loading state and
forceRefreshTokenThe
useAuthImplshape matches whatConvexProviderWithAuthexpects, but two details are worth tightening:isLoadingis alwaysfalse, so Convex never sees an auth‑loading phase. If Stack Auth’s user state can be “initializing”, you may want to reflect that here to avoid early unauthenticated queries.forceRefreshTokenis ignored infetchAccessToken. Convex passes this flag when it explicitly needs a fresh JWT; ifapp.getAccessToken()internally caches tokens, you may need to thread the flag through (e.g., via an options object) so forced refreshes actually happen.These aren’t immediate correctness bugs if
getAccessTokenis already always fresh anduseUseris effectively synchronous in your setup, but aligning with Convex’s custom provider pattern will make future auth/debugging much easier.Please double‑check both sides in the docs:
Also applies to: 61-62
🌐 Web query:
💡 Result:
Recommended pattern — summary
Wrap your app with the provider from your identity SDK (e.g. Clerk, WorkOS, Auth0) and inside that tree call a small adapter hook that you pass to Convex's ConvexProviderWithAuth. Don’t pass the identity-provider hook itself as a plain value; call it inside a component so you obey the Rules of Hooks. [1][2]
The adapter must return { isLoading, isAuthenticated, fetchAccessToken } where fetchAccessToken({ forceRefreshToken }) fetches the ID/JWT for Convex and, when forceRefreshToken is true, forces a fresh token (i.e. bypasses any client cache). Map forceRefreshToken to the provider’s equivalent (examples: ignoreCache / skipCache / { forceRefresh: true } etc.). Memoize the returned object and the fetchAccessToken callback. [1][2]
Minimal example (conceptual)
Concrete references
Sources
[1] Convex docs — Custom OIDC / custom auth integration.
[2] Convex repo / ConvexProviderWithClerk implementation (Clerk adapter example).
Verify Stack Auth's token refresh API and loading state exposure
The web search confirms that Convex's recommended pattern explicitly requires:
forceRefreshTokenis true, force a fresh token (bypass client cache) and map it to the provider's equivalent optionisLoadingstate reflecting the provider's auth initializationYour code has two confirmed gaps:
forceRefreshTokenignored: The parameter is accepted but not passed toapp.getAccessToken(). You need to check whether Stack's token method accepts an options parameter (e.g.,{ forceRefresh: true }or similar) and thread the flag through.isLoadinghardcoded tofalse: Check whetheruseStackApp()oruseUser()exposes a loading/initializing state you should reflect here.Verify Stack Auth's API surface (getAccessToken signature, loading state availability) and apply the mapping pattern shown in the Convex Clerk adapter example.
🤖 Prompt for AI Agents