본문으로 건너뛰기
cccskills
무료GitHub에 공개

convex-setup-auth

Sets up Convex auth, identity mapping, and access control. Use for login, auth providers, users tables, protected functions, or roles in a Convex app.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(7)

  • SKILL.md6.9 KB
  • agents/openai.yaml485 B
  • assets/icon.svg394 B
  • references/auth0.md7.4 KB
  • references/clerk.md6.2 KB
  • references/convex-auth.md8.2 KB
  • references/workos-authkit.md6.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Convex Authentication Setup

Implement secure authentication in Convex with user management and access control.

When to Use

  • Setting up authentication for the first time
  • Implementing user management (users table, identity mapping)
  • Creating authentication helper functions
  • Setting up auth providers (Convex Auth, Clerk, WorkOS AuthKit, Auth0, custom JWT)

When Not to Use

  • Auth for a non-Convex backend
  • Pure OAuth/OIDC documentation without a Convex implementation
  • Debugging unrelated bugs that happen to surface near auth code
  • The auth provider is already fully configured and the user only needs a one-line fix

First Step: Choose the Auth Provider

Convex supports multiple authentication approaches. Do not assume a provider.

Before writing setup code:

  1. Ask the user which auth solution they want, unless the repository already makes it obvious
  2. If the repo already uses a provider, continue with that provider unless the user wants to switch
  3. If the user has not chosen a provider and the repo does not make it obvious, ask before proceeding

Common options:

  • Convex Auth - good default when the user wants auth handled directly in Convex
  • Clerk - use when the app already uses Clerk or the user wants Clerk's hosted auth features
  • WorkOS AuthKit - use when the app already uses WorkOS or the user wants AuthKit specifically
  • Auth0 - use when the app already uses Auth0
  • Custom JWT provider - use when integrating an existing auth system not covered above

Look for signals in the repo before asking:

  • Dependencies such as @clerk/*, @workos-inc/*, @auth0/*, or Convex Auth packages
  • Existing files such as convex/auth.config.ts, auth middleware, provider wrappers, or login components
  • Environment variables that clearly point at a provider

After Choosing a Provider

Read the provider's official guide and the matching local reference file:

The local reference files contain the concrete workflow, expected files and env vars, gotchas, and validation checks.

Use those sources for:

  • package installation
  • client provider wiring
  • environment variables
  • convex/auth.config.ts setup
  • login and logout UI patterns
  • framework-specific setup for React, Vite, or Next.js

For shared auth behavior, use the official Convex docs as the source of truth:

Prefer official docs over recalled steps, because provider CLIs and Convex Auth internals change between versions. Inventing setup from memory risks outdated patterns. For third-party providers, only add app-level user storage if the app actually needs user documents in Convex. Not every app needs a users table. For Convex Auth, follow the Convex Auth docs and built-in auth tables rather than adding a parallel users table plus storeUser flow, because Convex Auth already manages user records internally. After running provider initialization commands, verify generated files and complete the post-init wiring steps the provider reference calls out. Initialization commands rarely finish the entire integration.

Core Pattern: Protecting Backend Functions

The most common auth task is checking identity in Convex functions.

// Bad: trusting a client-provided userId
export const getMyProfile = query({
  args: { userId: v.id("users") },
  handler: async (ctx, args) => {
    return await ctx.db.get(args.userId);
  },
});
// Good: verifying identity server-side
export const getMyProfile = query({
  args: {},
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) throw new Error("Not authenticated");

    return await ctx.db
      .query("users")
      .withIndex("by_tokenIdentifier", (q) =>
        q.eq("tokenIdentifier", identity.tokenIdentifier),
      )
      .unique();
  },
});

Workflow

  1. Determine the provider, either by asking the user or inferring from the repo
  2. Ask whether the user wants local-only setup or production-ready setup now
  3. Read the matching provider reference file
  4. Follow the official provider docs for current setup details
  5. Follow the official Convex docs for shared backend auth behavior, user storage, and authorization patterns
  6. Only add app-level user storage if the docs and app requirements call for it
  7. Add authorization checks for ownership, roles, or team access only where the app needs them
  8. Verify login state, protected queries, environment variables, and production configuration if requested

If the flow blocks on interactive provider or deployment setup, ask the user explicitly for the exact human step needed, then continue after they complete it. For UI-facing auth flows, offer to validate the real sign-up or sign-in flow after setup is done. If the environment has browser automation tools, you can use them. If it does not, give the user a short manual validation checklist instead.

Reference Files

Provider References

  • references/convex-auth.md
  • references/clerk.md
  • references/workos-authkit.md
  • references/auth0.md

Checklist

  • Chosen the correct auth provider before writing setup code
  • Read the relevant provider reference file
  • Asked whether the user wants local-only setup or production-ready setup
  • Used the official provider docs for provider-specific wiring
  • Used the official Convex docs for shared auth behavior and authorization patterns
  • Only added app-level user storage if the app actually needs it
  • Did not invent a cross-provider users table or storeUser flow for Convex Auth
  • Added authentication checks in protected backend functions
  • Added authorization checks where the app actually needs them
  • Clear error messages ("Not authenticated", "Unauthorized")
  • Client auth provider configured for the chosen provider
  • If requested, production auth setup is covered too

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 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/agent-ready-component92026년 8월 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/agent-ready-component92026년 8월 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/agent-ready-component92026년 8월 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/agent-ready-component92026년 8월 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/agent-ready-component92026년 8월 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/agent-ready-component92026년 8월 28일 업데이트

waynesutton의 스킬 모두 보기

이 스킬의 문제 신고