Community程式設計與開發github.com

KrostyMall/Landing-SENSORITY

為這個 TanStack Start 應用程式新增使用者帳戶與登入功能。當應用程式需要驗證、登入、使用者帳戶、受保護路由或每位使用者的專屬資料時使用。觸發詞包含「auth」、「login」、「log in」、「sign in」、「sign up」、「account」、「users」、「authentication」、「protected」、「who is logged in」、「current user」、「per-user」。

Landing-SENSORITY 是什麼?

此技能為使用 Better Auth 的 TanStack Start 應用程式提供完整、真實的驗證系統。它直接整合於應用程式中,經由 `genericOAuth` 外掛與 Grok 驗證代理 (`auth.grok.me`) 聯合,並提供三種登入方式:Google、X 以及電子郵件/密碼。此驗證功能預設為關閉,可透過在 `.grok/app-env.json` 中設定旗標、複製資料庫遷移以及新增路由來啟用。一旦啟用,它會強制執行真實的使用者帳戶,包括在預覽環境中,並透過 `authMiddleware` 提供受保護路由和每位使用者的專屬資料範圍。此技能適用於所有主要的 AI 代理平台(Claude Code、Cursor、Codex),能自動處理聯合登入、彈出式視窗驗證工作流程以及安全性(`__Host-` cookie、Fetch-Metadata 隔離),無需外部套件或手動環境變數設定。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/KrostyMall/Landing-SENSORITY/tree/HEAD/.grok/skills/auth

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

驗證

此應用程式執行自己的 Better Auth,位於 /api/auth/*,並透過 genericOAuth 外掛與共享的 Grok 驗證代理 (auth.grok.me) 聯合。此範本已接上 Google 和 X。

支援的登入方式 — 僅使用這三種,其他皆不支援:Google、X 以及電子郵件/密碼。 無其他社交/OAuth 提供者(GitHub、Apple、Discord 等)、無魔法連結、金鑰、一次性密碼、簡訊或匿名登入。請勿在 GROK_PROVIDERS 中新增條目。方法細節及電子郵件/密碼開關(僅編輯 src/lib/auth/email-password.ts):references/sign-in-methods.md。 例外 — 閘道檢視者已登入;切勿為他們呈現登入/重新驗證按鈕。連接器 / 應用程式資料應用程式:僅有閘道「使用 Grok 繼續」,無 Google/X 按鈕:references/grok-identity.md。

登入預設為關閉 — 範本附帶 .grok/app-env.json,內容為 {"VITE_AUTH_ENABLED": "false"},因此僅在需求要求時才新增帳戶(AGENTS.md §0.5)。將其開啟的步驟如下「開啟登入功能」。

一旦開啟,登入是真實的 — 包括在沙盒即時預覽中。 請勿建立示範/模擬/硬編碼使用者。預覽:彈出式視窗 + 內建預覽用戶端;部署後:每個應用程式用戶端 + DATABASE_URL + 零點擊閘道登入(references/prewired-and-env.md)。

當關閉時(VITE_AUTH_ENABLED=false),會回傳一個開發者使用者,以便非驗證應用程式能在沒有已登入訪客的情況下呈現 — 僅限開發與預覽。部署後,此旗標由平台設定(永遠為 "true"),因此 requireUserId 會拒絕所有訪客 — 驗證關閉的應用程式不會使用它或 authMiddleware。

所有內容都已預先安裝並預先接線在 src/lib/auth/ 中 — 請勿執行 npm install;better-auth 是唯一的驗證套件(絕非 @neondatabase/*、@stackframe/* 或 @clerk/*)。請勿編輯或重寫 src/lib/auth/ 下的任何檔案 — 尤其是 server.ts — 除非是 email-password.ts 中的單一旗標。每個檔案對應表:references/prewired-and-env.md。

/auth/popup 已由範本的 Vite 外掛處理(vite.config.ts → popup.server.ts):它永遠不會繪製 React 應用程式。請勿建立 src/routes/auth/popup.tsx(或該路徑下的任何 React 頁面 / 用戶端 OAuth)— 這會在彈出式視窗中顯示完整的應用程式,這是常見的失敗模式。

永遠不要在沙盒中編寫 .env / .env.local / .env.example:即時預覽需要零環境設定,部署後的應用程式會由平台注入其變數。存在的控制項在 references/prewired-and-env.md 中 — 永遠不要對用戶端暴露非 VITE_ 的變數。

migrations/auth/0001_auth.sql 是 Better Auth 的架構 — 請勿編輯。它位於全域比對的 migrations/ 目錄之外(兩者都不會套用),因此不會套用到沒有登入功能的應用程式;「開啟登入功能」會將其複製上去。

開啟登入功能

執行以下所有步驟 — 僅憑路由本身會呈現停用的分支:

  1. 旗標: 從 .grok/app-env.json 中刪除 VITE_AUTH_ENABLED 金鑰,然後重新啟動開發伺服器。Vite 在啟動時讀取環境變數,因此熱模組替換無法獲取變更。npm run dev、npm run build 和 npm run preview 都會透過 scripts/with-app-env.mjs 讀取該檔案,因此預覽和建置輸出會一起切換 — 永遠不要直接啟動 Vite。
  2. 架構: cp migrations/auth/0001_auth.sql migrations/0001_auth.sql,然後重新啟動以套用。它透過 _migrations 中的基本名稱進行追蹤,因此已包含此檔案的資料庫不會重新執行。
  3. 路由: 新增 src/routes/api/auth/$.ts + src/routes/login.tsx — 兩者皆從 references/wiring.md 複製(此萬用 API 路由是使 /api/auth/* 和代理回呼正常運作的關鍵)。
  4. 登出: 一個沒有退出方式的登入功能是不完整的 — 從 @/lib/auth/gates 呈現 <UserButton />(會連接 signOut();對閘道工作階段隱藏登出按鈕)。
  5. 現有資料: 將應用程式的伺服器函式包裝在 authMiddleware 中(一個驗證關閉的應用程式不應該使用它 — 請參閱 neon 技能)。在登入功能存在之前的資料列是開發資料:除非使用者另有指示,否則請捨棄並重新建立 — 不要將它們交給第一個登入的人。

開啟後在其上建構

  • 登入 / 登出: 使用 @/lib/auth/client 中的 signIn(providerId) 和 signOut();GROK_PROVIDERS 會呈現按鈕。彈出式視窗、Bearer 權杖移交和請求附加是內部實作 — 無需更動。偏好使用 <UserButton />(它會處理待處理和失敗狀態);當部署後,如果伺服器從未確認,signOut() 會拒絕 — 請加以捕捉。永遠不要使用 authClient.signOut():它會將預覽的 Bearer 權杖附加到所有後續請求,因此訪客會保持登入狀態。
  • 讀取使用者: useCurrentUser() 僅供顯示(null 表示載入中或已登出,因此永遠不要僅依靠它進行重新導向);請改為檢查 useCurrentUserState() 的 isPending。閘道(SignedIn、SignedOut、SignInGate、RedirectToSignIn、UserButton)位於 @/lib/auth/gates。CTA 嚴格規則、骨架動畫和 Cookie SSR 無閃爍:references/session-ui.md。
  • 每位使用者的專屬資料(強制性): 每個觸及每位使用者專屬資料的伺服器函式都必須使用預先接線的 authMiddleware,並將每個讀取和寫入作業範圍限定在 context.userId — Postgres 驅動程式具有完整的資料庫存取權限,因此沒有其他東西可以限制查詢。保持 user_id 欄位為 TEXT 類型;永遠不要信任用戶端提供的使用者 ID;當使用者已登出時,中介層會擲回 UnauthorizedError(401)。程式碼和停用模式語意:references/per-user-data.md。
  • 安全性模型: 無頭代理、__Host- cookie + trustedOrigins 以及 Fetch-Metadata 同儕隔離已預先接線 — 永遠不要為了讓錯誤消失而削弱它們(references/sign-in-methods.md 涵蓋了此模型和「無效來源」修正方法)。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

KrostyMall/Landing-SENSORITY

Build browser games and interactive/canvas/3D experiences in this TanStack Start + React app. Use for any game, simulation, or WebGL/Canvas experience — 2D or 3D, single-player. Covers the game loop & timing, 3D orientation/camera conventions, collision, performance, assets, audio, save, game feel, and per-genre playbooks. For WASD / vehicle / flight **input signs and inverted A/D**, open the **`controls`** skill — do not rely on this file or racing-kart alone. Triggers on "game", "minecraft", "fps", "platformer", "racing", "tetris", "snake", "shooter", "3d", "three.js", "canvas", "voxel", "physics".

KrostyMall/Landing-SENSORITY

Player-facing input signs for browser games: WASD, vehicles, flight, FPS mouse-look, and the #1 failure mode (inverted A/D). Mandatory control self-tests and a tiny test interface so you can verify A turns left before shipping. Load for ANY game with movement, steering, flying, driving, tanks, boats, mechs, drones, planes, karts, third-person follow cams — not only racing. Triggers on "controls", "WASD", "inverted", "steer", "flight", "airplane", "kart", "vehicle", "yaw", "roll", "pitch", "mouse look", "A/D".

KrostyMall/Landing-SENSORITY

Design and build polished, non-generic UI for this TanStack Start + React + Tailwind v4 + shadcn/Radix app. Use whenever you create or restyle any interface surface — pages, landing pages, dashboards, forms, modals, nav, and game overlays (start screens, HUD, menus). Covers design tokens, layout, typography, color, spacing, motion, and the anti-"AI-slop" rules that keep output from looking generic. Triggers on "design", "UI", "make it look good", "polish", "landing page", "theme", "style", "redesign", "ugly", "clean up".

KrostyMall/Landing-SENSORITY

Deep guide for game ANIMATION assets: motion cycles, action keyframes, effect sequences, and animation sprite sheets — built around a video-first pipeline. In this app-builder sandbox, execute via the video2dsprite / generate2dsprite skills (magenta + scripts), not ad-hoc ffmpeg. Use whenever generating anything that moves: walk/run cycles, attacks, idles, FX, flags, fire, animation sheets. Complements game-asset-core.

相關技能