Install Stack Auth #24
Conversation
WalkthroughAdds the @stackframe/js dependency and introduces a new Stack client initializer at src/stack/client.ts exporting a preconfigured StackClientApp singleton using cookie-based token storage and a placeholder publishable key. Minor reordering/formatting occurs in package.json. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App as Application Code
participant Client as stackClientApp (StackClientApp)
participant Auth as Stack Auth API
Note over Client: Initialized with tokenStore="cookie"<br/>publishableClientKey=<placeholder>
App->>Client: import { stackClientApp }
App->>Client: call auth methods (e.g., signIn, getSession)
Client->>Auth: HTTP request with publishable key
Auth-->>Client: Response (session/token)
Client-->>App: Result (success/error)
Note over App,Client: Cookies used for token storage
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
package.json (1)
18-23: Jest runs fine, but adding a browser SDK may slow CI installs.If @stackframe/js stays, consider adding an npm install hint or using npm ci with a lockfile to stabilize installs. Otherwise moving it to devDependencies (above) addresses it.
src/stack/client.ts (1)
4-7: Cookie token store: confirm secure attributes and CSRF posture.Using cookies for tokens requires Secure, HttpOnly, SameSite, and CSRF strategy. Verify how @stackframe/js sets/reads cookies and document any server requirements.
Would you like me to add a short README section outlining recommended cookie flags and CSRF considerations for Stack Auth?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.json(1 hunks)src/stack/client.ts(1 hunks)
🔇 Additional comments (1)
package.json (1)
1-46: src/stack/client.ts is not bundled or exported to consumers. Verified no imports in any non-test/dist code; tsup targets only src/main.ts and package.json publishes only dist.
| "dependencies": { | ||
| "@stackframe/js": "^2.8.36" | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Do not ship @stackframe/js as a production dependency of pgmock. Move it to devDependencies (or a separate example app).
This repo publishes a library whose npm tarball only includes dist/. Keeping @stackframe/js under dependencies forces all consumers to install a browser auth SDK they won’t use. Place it under devDependencies or isolate it in an examples/ app.
Apply:
@@
"devDependencies": {
@@
- "typescript": "^5.4.3"
+ "typescript": "^5.4.3",
+ "@stackframe/js": "^2.8.36"
},
- "dependencies": {
- "@stackframe/js": "^2.8.36"
- }
+ Also applies to: 34-37
🤖 Prompt for AI Agents
In package.json around lines 43 (and also apply same change to lines 34-37),
@stackframe/js is incorrectly listed under "dependencies"; remove it from
"dependencies" and add it to "devDependencies" (or move it into an examples/
package.json if it’s only used by an example app). Update package.json
accordingly and run the appropriate package manager command (e.g., npm uninstall
--save @stackframe/js && npm install --save-dev @stackframe/js or move the entry
manually), then verify the published tarball only contains dist/ and that
@stackframe/js is not required at runtime by consumers.
| export const stackClientApp = new StackClientApp({ | ||
| tokenStore: "cookie", | ||
|
|
||
| // get your Stack Auth API keys from https://app.stack-auth.com and store them in a safe place (eg. environment variables) | ||
| publishableClientKey: INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid top-level instantiation and use env-based key + SSR-safe token store.
Top-level new StackClientApp with cookie store can break SSR/Node (no window/cookies) and couples build-time config. Use a lazy getter, read the key from env, and fall back to memory store server-side.
Apply:
-import { StackClientApp } from "@stackframe/js";
-
-export const stackClientApp = new StackClientApp({
- tokenStore: "cookie",
-
- // get your Stack Auth API keys from https://app.stack-auth.com and store them in a safe place (eg. environment variables)
- publishableClientKey: "INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE",
-});
+import { StackClientApp } from "@stackframe/js";
+
+// Read from env (configure your bundler/runner to inject one of these).
+const publishableClientKey =
+ (typeof process !== "undefined" && (process.env.STACK_PUBLISHABLE_CLIENT_KEY
+ || process.env.NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY
+ || process.env.VITE_STACK_PUBLISHABLE_CLIENT_KEY)) || undefined;
+
+let _stackClientApp: StackClientApp | undefined;
+export function getStackClientApp(): StackClientApp {
+ if (_stackClientApp) return _stackClientApp;
+ if (!publishableClientKey) {
+ throw new Error(
+ "Missing Stack Auth publishable client key. Set STACK_PUBLISHABLE_CLIENT_KEY (or framework-specific equivalent)."
+ );
+ }
+ _stackClientApp = new StackClientApp({
+ tokenStore: typeof window === "undefined" ? "memory" : "cookie",
+ publishableClientKey,
+ });
+ return _stackClientApp;
+}
+
+// Optional convenience export for browser-only contexts.
+export const stackClientApp = typeof window !== "undefined" ? getStackClientApp() : undefined as unknown as StackClientApp;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const stackClientApp = new StackClientApp({ | |
| tokenStore: "cookie", | |
| // get your Stack Auth API keys from https://app.stack-auth.com and store them in a safe place (eg. environment variables) | |
| publishableClientKey: INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE, | |
| }); | |
| import { StackClientApp } from "@stackframe/js"; | |
| // Read from env (configure your bundler/runner to inject one of these). | |
| const publishableClientKey = | |
| (typeof process !== "undefined" && | |
| (process.env.STACK_PUBLISHABLE_CLIENT_KEY || | |
| process.env.NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY || | |
| process.env.VITE_STACK_PUBLISHABLE_CLIENT_KEY)) || | |
| undefined; | |
| let _stackClientApp: StackClientApp | undefined; | |
| export function getStackClientApp(): StackClientApp { | |
| if (_stackClientApp) return _stackClientApp; | |
| if (!publishableClientKey) { | |
| throw new Error( | |
| "Missing Stack Auth publishable client key. Set STACK_PUBLISHABLE_CLIENT_KEY (or framework-specific equivalent)." | |
| ); | |
| } | |
| _stackClientApp = new StackClientApp({ | |
| tokenStore: typeof window === "undefined" ? "memory" : "cookie", | |
| publishableClientKey, | |
| }); | |
| return _stackClientApp; | |
| } | |
| // Optional convenience export for browser-only contexts. | |
| export const stackClientApp = | |
| typeof window !== "undefined" | |
| ? getStackClientApp() | |
| : (undefined as unknown as StackClientApp); |
🤖 Prompt for AI Agents
In src/stack/client.ts around lines 3 to 8, avoid the top-level new
StackClientApp with a hard-coded publishable key and cookie token store; instead
implement a lazy getter that reads the publishable key from environment
(process.env or import.meta.env) and constructs the StackClientApp at call time,
selecting tokenStore = "cookie" only when running in the browser (typeof window
!== "undefined") and using an in-memory token store on the server to be
SSR/Node-safe; ensure no top-level side effects so builds and server renderers
don't access window/cookies.
| tokenStore: "cookie", | ||
|
|
||
| // get your Stack Auth API keys from https://app.stack-auth.com and store them in a safe place (eg. environment variables) | ||
| publishableClientKey: INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE, |
There was a problem hiding this comment.
Compile error: placeholder identifier is not a string.
INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE must be quoted or read from env. As-is, TypeScript will fail to compile.
Apply:
- publishableClientKey: INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE,
+ publishableClientKey: "INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE",Recommended (env-based, safer) is in the next comment.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| publishableClientKey: INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE, | |
| publishableClientKey: "INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE", |
🤖 Prompt for AI Agents
In src/stack/client.ts around line 7, the value publishableClientKey:
INSERT_YOUR_PUBLISHABLE_CLIENT_KEY_HERE is an unquoted identifier causing a
TypeScript compile error; replace the placeholder with a string or, preferably,
read from an environment variable. Update the property to use
process.env.PUBLISHABLE_CLIENT_KEY (with a fallback or throw if undefined) and
ensure its type is string (e.g., coerce or validate and fail-fast) so the file
compiles and the key is provided securely.
This pull request was created automatically to add Stack Auth to your project.
Summary by CodeRabbit
New Features
Chores