本文へ移動
cccskills
無料GitHub で公開

convex-auth

Add authentication (passkeys/OAuth) to the current Convex app, including the auth.config.ts wiring.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

<!-- GENERATED from convex-agents content/capabilities/auth.json — do not edit by hand. -->

Add sign-in to the app

Install and wire @convex-dev/auth for the current app: a provider (passkeys by default, or OAuth/password), the server config, the client hooks, and a sign-in UI — correctly, including the auth.config.ts that's the #1 real-world auth footgun.

Workflow

  1. Install @convex-dev/auth (pinned build) and add it to convex.config.ts. With pnpm, also pnpm add jose (it won't hoist otherwise); you need it for step 3.
  2. Add the provider in convex/auth.ts (Passkey by default; Password or OAuth like Google on request).
  3. Generate the auth keys HEADLESSLY. Do NOT run the interactive npx @convex-dev/auth wizard: it needs a login/TTY and hangs in non-interactive, anonymous, or CI runs (the #1 auth time-sink). Generate JWT_PRIVATE_KEY + JWKS deterministically with jose: node -e 'import("jose").then(async({generateKeyPair,exportPKCS8,exportJWK})=>{const k=await generateKeyPair("RS256",{extractable:true});const priv=await exportPKCS8(k.privateKey);const pub=await exportJWK(k.publicKey);process.stdout.write(JSON.stringify({JWT_PRIVATE_KEY:priv.trimEnd().replace(/\n/g," "),JWKS:JSON.stringify({keys:[{use:"sig",...pub}]})}))})' > .auth-keys.json Then set JWT_PRIVATE_KEY and JWKS (from .auth-keys.json) plus SITE_URL on the deployment. Prefer the Convex MCP envSet tool, one call per var, to avoid shell-quoting the multi-line key. CLI fallback: use the NAME=VALUE form (npx convex env set "JWT_PRIVATE_KEY=$JWT"), NEVER env set JWT_PRIVATE_KEY "$JWT" (the value starts with -----BEGIN and the CLI parses the leading - as an unknown flag). SITE_URL is the dev URL (e.g. http://localhost:3000). Delete .auth-keys.json after.
  4. Write convex/auth.config.ts (the silently-always-signed-out bug lives here if it's wrong).
  5. Wire the client: ConvexAuthProvider, the sign-in component, and route guards. If you import shadcn/ui primitives (button, input, textarea, label, and so on), add them first with npx shadcn@latest add <name>; a missing @/components/ui/* is a hard build error.
  6. Verify a sign-in round-trips before declaring done.

Rules

  • Generate JWT_PRIVATE_KEY/JWKS with jose (extractable RS256; PKCS8 newlines to spaces; JWKS = {keys:[{use:"sig", ...publicJwk}]}). Do NOT run the interactive npx @convex-dev/auth wizard: it hangs headless/anonymous. Set the vars via the MCP envSet tool or the NAME=VALUE CLI form.
  • Always write auth.config.ts: a missing/incorrect one makes the app silently always-signed-out with no error.
  • Passkeys by default; only switch to password/OAuth on explicit request.
  • Install any shadcn/ui primitive you import up front (npx shadcn@latest add ...); a missing @/components/ui/* is a hard build failure.
  • Verify a real sign-in works before finishing.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

adapt

無料

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.

日本語の概要は準備中です。原文の説明を表示しています。

get-convex/components-submissions-directory92026年10月13日 更新

Agent Ready project design context for navigation, docs links, and interface tone. Use when building or reviewing UI in this repo so patterns match the documented product feel.

日本語の概要は準備中です。原文の説明を表示しています。

get-convex/components-submissions-directory92026年10月13日 更新

animate

無料

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

日本語の概要は準備中です。原文の説明を表示しています。

get-convex/components-submissions-directory92026年10月13日 更新

arrange

無料

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

日本語の概要は準備中です。原文の説明を表示しています。

get-convex/components-submissions-directory92026年10月13日 更新

audit

無料

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.

日本語の概要は準備中です。原文の説明を表示しています。

get-convex/components-submissions-directory92026年10月13日 更新

bolder

無料

Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.

日本語の概要は準備中です。原文の説明を表示しています。

get-convex/components-submissions-directory92026年10月13日 更新

get-convex のスキルをすべて見る

このスキルの問題を報告する