跳到正文
cccskills
免费在 GitHub 公开

convex-auth-expert

Expert Convex Auth setup, production, OAuth, security, and debugging guidance. Use when adding or auditing Convex Auth, configuring GitHub/Google/Apple OAuth, setting auth env vars, protecting Convex functions with getAuthUserId, debugging callback URLs, preparing production auth, rotating keys, or reviewing auth security.

中文简介正在准备中。当前显示原文说明。

集成工具GitHub
查看安装方法

包含的文件(1)

  • SKILL.md7.3 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Convex Auth Expert

Use this skill for Convex Auth work in React/Vite, React Native, and supported Next.js apps.

Source Check

Before giving setup advice or changing auth code, verify current docs when network is available:

  • https://docs.convex.dev/auth/convex-auth
  • https://labs.convex.dev/auth/setup
  • https://labs.convex.dev/auth/production
  • https://labs.convex.dev/auth/security
  • https://labs.convex.dev/auth/advanced
  • https://labs.convex.dev/auth/config
  • https://docs.convex.dev/llms.txt

Latest retrieval used to create this skill: 2026-06-14 01:30 UTC.

Core Rules

  • Use Convex Auth only when the user asks for Convex Auth or the project already uses @convex-dev/auth.
  • Do not mix Convex Auth with Clerk, WorkOS, Robel Auth, Auth0, or Better Auth unless the user explicitly asks for migration or comparison.
  • Treat Convex Auth as beta. Be conservative with production and security claims.
  • Use separate OAuth apps and secrets for dev/local and production.
  • Never expose provider secrets, JWT private keys, JWKS private material, or refresh tokens to the client.
  • Protect user-owned data with getAuthUserId(ctx) and indexed owner checks.
  • Keep logged-out flows useful when the product requires anonymous usage, but never allow anonymous access to private saved data.
  • Use custom in-app auth/login-required UI. Do not use browser alerts.

Setup Checklist

For an existing React/Vite app:

  1. Install packages:
npm install @convex-dev/auth @auth/core
  1. Initialize Convex Auth:
npx @convex-dev/auth
  1. Add auth tables:
import { defineSchema } from "convex/server";
import { authTables } from "@convex-dev/auth/server";

export default defineSchema({
  ...authTables,
  // app tables
});
  1. Configure server auth:
import { convexAuth } from "@convex-dev/auth/server";
import GitHub from "@auth/core/providers/github";

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [GitHub],
});
  1. Add HTTP routes:
import { httpRouter } from "convex/server";
import { auth } from "./auth";

const http = httpRouter();
auth.addHttpRoutes(http);
export default http;
  1. Wrap React:
import { ConvexAuthProvider } from "@convex-dev/auth/react";

<ConvexAuthProvider client={convex}>
  <App />
</ConvexAuthProvider>

OAuth Configuration

For GitHub OAuth, create separate apps:

EnvironmentOAuth appHomepage URLCallback URL
Local + devApp Devhttp://localhost:5173https://<dev>.convex.site/api/auth/callback/github
ProductionAppproduction site URLhttps://<prod-domain>/api/auth/callback/github

GitHub OAuth apps have one primary callback URL, so separate dev/prod apps avoid credential and redirect confusion.

Set env vars per deployment:

npx convex env set AUTH_GITHUB_ID <dev-client-id>
npx convex env set AUTH_GITHUB_SECRET <dev-client-secret>

npx convex env set --prod AUTH_GITHUB_ID <prod-client-id>
npx convex env set --prod AUTH_GITHUB_SECRET <prod-client-secret>

For custom production domains also set:

npx convex env set --prod SITE_URL https://your-domain.example
npx convex env set --prod CONVEX_SITE_URL https://your-domain.example

Use the Convex .site callback temporarily until the custom domain verifies, then switch production OAuth to the custom domain callback.

Production Checklist

  1. Test auth on the dev deployment.
  2. Deploy backend to prod:
npx convex deploy --yes
  1. Configure production auth variables:
npx @convex-dev/auth --prod
  1. Configure OAuth provider env vars with --prod.
  2. Confirm production callback URLs match the active production domain.
  3. Smoke test sign in, sign out, page reload, and protected queries.
  4. Verify dev OAuth credentials are not installed in prod.

Protect Convex Functions

Use getAuthUserId(ctx) from @convex-dev/auth/server.

For protected reads:

const ownerId = await getAuthUserId(ctx);
if (!ownerId) return [];

return await ctx.db
  .query("items")
  .withIndex("by_ownerId_and_updatedAt", (q) => q.eq("ownerId", ownerId))
  .order("desc")
  .take(50);

For protected mutations:

const ownerId = await getAuthUserId(ctx);
if (!ownerId) return null;

await ctx.db.insert("items", {
  ownerId,
  createdAt: Date.now(),
});

Rules:

  • Add ownerId: v.id("users") or optional migration-safe owner fields for private data.
  • Add indexes that start with ownerId.
  • Use indexed queries for ownership checks.
  • Do not read all rows and filter by owner in JavaScript.
  • Avoid ctx.db.get() as the only ownership check when an indexed owner query is available.

Security Guidance

Convex Auth web clients store client-accessible auth material so WebSocket auth can work in browser apps. Treat XSS prevention as critical.

Do:

  • Keep React escaping intact.
  • Avoid dangerouslySetInnerHTML; sanitize any user HTML if unavoidable.
  • Keep dependencies patched.
  • Require recent sign-in for sensitive actions when appropriate.
  • Use HTTP-only/server-cookie patterns only in supported server-rendered integrations.
  • Rotate keys after suspected compromise.

If an XSS incident could expose auth material:

  1. Fix the vulnerability.
  2. Clear authSessions in the Convex dashboard to force sign-in.
  3. Rotate private/public auth keys:
npx @convex-dev/auth --prod

Common Debugging

  • Callback mismatch: check GitHub OAuth callback exactly equals https://<site>/api/auth/callback/github.
  • Wrong deployment: verify dev uses dev .site and prod uses prod/custom domain.
  • Missing env vars: check AUTH_GITHUB_ID, AUTH_GITHUB_SECRET, SITE_URL, JWT_PRIVATE_KEY, and JWKS.
  • Custom domain auth failure: update provider callback, SITE_URL, CONVEX_SITE_URL, redeploy, then clear stale browser state.
  • Users see each other's data: audit tables for missing ownerId, missing owner indexes, or unprotected public queries.
  • Login works then reload fails: inspect storage/session handling and production env/domain mismatch.

Review Checklist

Before calling auth work done:

  • Auth tables are in schema.
  • convex/auth.ts exports Convex Auth helpers.
  • HTTP routes include auth.addHttpRoutes(http).
  • React is wrapped in ConvexAuthProvider.
  • Provider env vars exist for the correct deployment.
  • OAuth callback URLs match environment.
  • Protected data tables have owner fields and owner indexes.
  • Queries/mutations/actions enforce auth where required.
  • Anonymous UX still works only where intentionally allowed.
  • Production docs mention callback and env var updates for custom domains.

Sources

  • Convex Auth overview: https://docs.convex.dev/auth/convex-auth
  • Setup: https://labs.convex.dev/auth/setup
  • Production: https://labs.convex.dev/auth/production
  • Security: https://labs.convex.dev/auth/security
  • Advanced: https://labs.convex.dev/auth/advanced
  • Configuration: https://labs.convex.dev/auth/config
  • Convex docs index for agents: https://docs.convex.dev/llms.txt

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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.

中文简介正在准备中。当前显示原文说明。

waynesutton/teleprompter52026年6月28日 更新

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.

中文简介正在准备中。当前显示原文说明。

waynesutton/teleprompter52026年6月28日 更新

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.

中文简介正在准备中。当前显示原文说明。

waynesutton/teleprompter52026年6月28日 更新

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.

中文简介正在准备中。当前显示原文说明。

waynesutton/teleprompter52026年6月28日 更新

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.

中文简介正在准备中。当前显示原文说明。

waynesutton/teleprompter52026年6月28日 更新

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.

中文简介正在准备中。当前显示原文说明。

waynesutton/teleprompter52026年6月28日 更新

查看 waynesutton 的全部技能

报告此技能的问题