fix/kim john ung prompt (#1446)

- **Update generated prompts**
- **Fix React error**
- **Don't show alpha apps during onboarding**
- **[Docs] First-class TanStack Start in AI setup prompts + clearer
env-var guidance (#1438)**
- **update docs**

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/hexclave/stack-auth/blob/dev/CONTRIBUTING.md

-->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Simplified setup and environment-variable guidance across docs,
onboarding prompts, and setup snippets, replacing long explanatory
blocks with concise inline notes.
* Condensed frontend/backend examples into shorter combined examples and
streamlined cloud-project instructions.
* Shortened custom auth page prompts by removing verbose redirect/URL
override explanations and relying on shared reminder text.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/hexclave/stack-auth/pull/1446?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Mantra 2026-05-19 19:09:31 -07:00 committed by GitHub
parent 2aa4affa54
commit 954ebffc31
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 124 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -548,16 +548,12 @@ export function getSdkSetupPrompt(mainType: "ai-prompt" | "nextjs" | "react" | "
Go to your project's dashboard on [app.stack-auth.com](https://app.stack-auth.com) and get the project ID. You can find it in the URL after the \`/projects/\` part. Copy-paste it into your \`.env.local\` file (or wherever your environment variables are stored):
\`\`\`.env .env.local
# Prefix the variable name with your framework's convention for client-exposed
# variables. For Next.js use NEXT_PUBLIC_STACK_PROJECT_ID, for Vite use
# VITE_STACK_PROJECT_ID, etc. If your framework has no such convention, use
# STACK_PROJECT_ID as-is.
${isAiPrompt ? `${deindent`
Some projects have the \`requirePublishableClientKey\` config option enabled. In that case, a publishable client key will also be necessary. However, this is extremely uncommon; for most projects this is not true, so don't ask the user for one unless you have confirmation that the publishable client key is required. If it's not required, the project ID is the only environment variable required to use Stack Auth on a client.
`}\n\n` : ""}\`\`\`.env .env.local
STACK_PROJECT_ID=<your-project-id>
\`\`\`
This is the **only** environment variable the client SDK reads in the cloud-project setup. Do not invent or add any other Stack Auth env vars on the client (in particular, there is **no** separate publishable / client key the project ID alone is sufficient on the client).
Alternatively, you can also just set the project ID in the \`stack/client.ts\` file:
\`\`\`ts src/stack/client.ts
@ -574,20 +570,13 @@ export function getSdkSetupPrompt(mainType: "ai-prompt" | "nextjs" | "react" | "
Then, copy-paste them into your \`.env.local\` file (or wherever your environment variables are stored):
\`\`\`.env .env.local
# Server SDKs (StackServerApp, Node, etc.) read the UNPREFIXED names:
${isAiPrompt ? `${deindent`
If the \`requirePublishableClientKey\` config option is enabled as described above, a publishable client key will also be necessary. Otherwise, these two are the only environment variables required to use Stack Auth on a server.
`}\n\n` : ""}\`\`\`.env .env.local
STACK_PROJECT_ID=<your-project-id>
STACK_SECRET_SERVER_KEY=<your-secret-server-key>
# Client-side frameworks must use their own publishable prefix for the
# project ID so the bundler exposes it to the browser for example:
# Next.js: NEXT_PUBLIC_STACK_PROJECT_ID=<your-project-id>
# Vite: VITE_STACK_PROJECT_ID=<your-project-id>
# STACK_SECRET_SERVER_KEY must NEVER be prefixed or exposed to the client.
\`\`\`
These two values (project ID + secret server key) are the **complete** set the SDK reads in the cloud-project setup. Do not add any additional Stack Auth env vars (in particular, there is **no** separate publishable / client key the project ID alone is sufficient on the client). The dashboard "Project Keys" page exposes exactly these two values; if a third slot is present in any \`.env.local\` you write, it is wrong.
They'll automatically be picked up by the \`StackServerApp\` constructor.
</Accordion>
</AccordionGroup>

View File

@ -104,20 +104,6 @@ function createCustomPagePrompt(options: {
},
\`\`\`
**Important overriding one URL target does NOT override the others.** Every handler URL is independent and falls back to \`urls.default\`. If \`default\` is \`{ type: "hosted" }\`, customizing only this page will cause the browser to **visibly redirect through \`<projectId>.built-with-stack-auth.com\`** during OAuth, magic-link, sign-out, email-verification, password-reset, and similar flows — even though your sign-in / sign-up pages render locally. That hosted subdomain must also be on the project's Trusted Domains list, or the API rejects the redirect with \`REDIRECT_URL_NOT_WHITELISTED\`.
To keep auth flows entirely on your own origin, override every related URL target. The complete set of handler URLs and the SDK call each custom page must invoke:
| URL target | What the custom page must do |
|---|---|
| \`signIn\`, \`signUp\` | Render the forms described in this prompt (or its sign-in / sign-up counterpart). |
| \`oauthCallback\` | On mount, call \`await stackApp.callOAuthCallback()\`. The SDK exchanges the \`code\`/\`state\` query params for tokens and then redirects to \`afterSignIn\`. |
| \`signOut\` | Read the current user, then sign them out via \`use(cacheSignOut(user))\` (which calls \`user.signOut()\` inside a cached function so the page stays idempotent on refresh). Show a confirmation state with a "Go home" button that calls \`stackApp.redirectToHome()\`. |
| \`magicLinkCallback\` | Complete the magic-link exchange when the link is opened directly (separate from the OTP flow inside the sign-in page). Call \`await stackApp.signInWithMagicLink(code)\` with the \`code\` query param. |
| \`forgotPassword\`, \`passwordReset\`, \`emailVerification\`, \`accountSettings\`, \`teamInvitation\`, \`mfa\`, \`error\`, \`onboarding\`, \`cliAuthConfirm\` | Each is its own URL target; customize as needed. |
Any URL target you do NOT customize will keep bouncing through the hosted domain that may be intentional, but it should be a deliberate choice, not an accident. Always whitelist every origin you redirect to (your app's origin in production, \`http://localhost:<port>\` in dev, and the \`<projectId>.built-with-stack-auth.com\` host if you keep any handlers on hosted). In development you can also flip the "Allow localhost callbacks" toggle on the Trusted Domains page.
${stackAuthReminders}
`;
const versions = {
@ -169,7 +155,7 @@ function createAuthPagePrompt(type: AuthPagePromptType): CustomPagePrompt {
? "- If sign-ups are enabled (\\`project = await stackApp.getProject(); project.config.signUpEnabled\\`), show a link to the sign-up page."
: "- If sign-ups are disabled (\\`project = await stackApp.getProject(); !project.config.signUpEnabled\\`), show a message that sign-up is disabled."}
- Show a ${authVerb} screen. The auth methods that should render:
- For each OAuth provider (\`project.config.oauthProviders: { readonly id: string }[]\`), render an OAuth button. Clicking the button calls \`await stackApp.signInWithOAuth("<providerId>")\`. Note: this triggers a redirect through \`urls.oauthCallback\`. If that target is hosted (the default unless you override it), the browser will visibly visit \`<projectId>.built-with-stack-auth.com\` before returning. To keep the flow on your origin, also customize \`urls.oauthCallback\` with a page that calls \`stackApp.callOAuthCallback()\` on mount — see the URL-config note at the end of this prompt.
- For each OAuth provider (\`project.config.oauthProviders: { readonly id: string }[]\`), render an OAuth button. Clicking the button calls \`await stackApp.signInWithOAuth("<providerId>")\`.
${isSignIn ? "- If \\`project.config.passkeyEnabled\\`, render a passkey button. Clicking the button calls \\`await stackApp.signInWithPasskey()\\`." : ""}
- If \`project.config.credentialEnabled\`, render a credential ${authVerb} form:
- Email + password${isSignIn ? "" : " + repeat password"}