clerk-auth-v2

Clerk Authentication workflow skill. Use this skill when the user needs Expert patterns for Clerk auth implementation, middleware, and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.

Aller à l'installation

Dépôt: diegosouzapw/awesome-omni-skills
Dernière activité de la source: 2 juin 2026 à 05:10
Langue détectée de SKILL.md: anglais
Étoiles: 113
Forks: 27

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/diegosouzapw/awesome-omni-skills --skill clerk-auth-v2

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Explorateur de fichiers

3 fichiers

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

Clerk Authentication

Overview

This public intake copy packages plugins/antigravity-awesome-skills/skills/clerk-auth from https://github.com/sickn33/antigravity-awesome-skills into the native Omni Skills editorial shape without hiding its origin.

Use it when the operator needs the upstream workflow, support files, and repository context to stay intact while the public validator and private enhancer continue their normal downstream flow.

This intake keeps the copied upstream files intact and uses the external_source block in metadata.json plus ORIGIN.md as the provenance anchor for review.

Clerk Authentication Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync

Imported source sections that did not map cleanly to the public headings are still preserved below or in the support files. Notable imported sections: Patterns, Sharp Edges, Validation Checks, Collaboration, Limitations.

When to Use This Skill

Use this section as the trigger filter. It should make the activation boundary explicit before the operator loads files, runs commands, or opens a pull request.

User mentions or implies: adding authentication
User mentions or implies: clerk auth
User mentions or implies: user authentication
User mentions or implies: sign in
User mentions or implies: sign up
User mentions or implies: user management

Operating Table

Situation	Start here	Why it matters
First-time use	`metadata.json`	Confirms repository, branch, commit, and imported path through the `external_source` block before touching the copied workflow
Provenance review	`ORIGIN.md`	Gives reviewers a plain-language audit trail for the imported source
Workflow execution	`SKILL.md`	Starts with the smallest copied file that materially changes execution
Supporting context	`SKILL.md`	Adds the next most relevant copied source file without loading the entire package
Handoff decision	`## Related Skills`	Helps the operator switch to a stronger native skill when the task drifts

Workflow

This workflow is intentionally editorial and operational at the same time. It keeps the imported source useful to the operator while still satisfying the public intake standards that feed the downstream enhancer flow.

Confirm the user goal, the scope of the imported workflow, and whether this skill is still the right router for the task.
Read the overview and provenance files before loading any copied upstream support files.
Load only the references, examples, prompts, or scripts that materially change the outcome for the current request.
Execute the upstream workflow while keeping provenance and source boundaries explicit in the working notes.
Validate the result against the upstream expectations and the evidence you can point to in the copied files.
Escalate or hand off to a related skill when the work moves out of this imported workflow's center of gravity.
Before merge or closure, record what was used, what changed, and what the reviewer still needs to verify.

Imported Workflow Notes

Imported: Patterns

Next.js App Router Setup

Complete Clerk setup for Next.js 14/15 App Router.

Includes ClerkProvider, environment variables, and basic sign-in/sign-up components.

Key components:

ClerkProvider: Wraps app for auth context
, : Pre-built auth forms
: User menu with session management

Code_example

Environment variables (.env.local)

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... CLERK_SECRET_KEY=sk_test_... NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding

// app/layout.tsx import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); }

// app/sign-in/[[...sign-in]]/page.tsx import { SignIn } from '@clerk/nextjs';

export default function SignInPage() { return (

); }

// app/sign-up/[[...sign-up]]/page.tsx import { SignUp } from '@clerk/nextjs';

export default function SignUpPage() { return (

); }

// components/Header.tsx import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';

export function Header() { return (

My App

); }

Anti_patterns

Pattern: ClerkProvider inside page component | Why: Provider must wrap entire app in root layout | Fix: Move ClerkProvider to app/layout.tsx
Pattern: Using auth() without middleware | Why: auth() requires clerkMiddleware to be configured | Fix: Set up middleware.ts with clerkMiddleware

References

https://clerk.com/docs/nextjs/getting-started/quickstart

Middleware Route Protection

Protect routes using clerkMiddleware and createRouteMatcher.

Best practices:

Single middleware.ts file at project root
Use createRouteMatcher for route groups
auth.protect() for explicit protection
Centralize all auth logic in middleware

Code_example

// middleware.ts import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

// Define protected route patterns const isProtectedRoute = createRouteMatcher([ '/dashboard(.)', '/settings(.)', '/api/private(.*)', ]);

// Define public routes (optional, for clarity) const isPublicRoute = createRouteMatcher([ '/', '/sign-in(.)', '/sign-up(.)', '/api/webhooks(.*)', ]);

export default clerkMiddleware(async (auth, req) => { // Protect matched routes if (isProtectedRoute(req)) { await auth.protect(); } });

export const config = { matcher: [ // Match all routes except static files '/((?!_next|[^?]\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).)', // Always run for API routes '/(api|trpc)(.*)', ], };

// Advanced: Role-based protection export default clerkMiddleware(async (auth, req) => { if (isProtectedRoute(req)) { await auth.protect(); }

// Admin routes require admin role if (req.nextUrl.pathname.startsWith('/admin')) { await auth.protect({ role: 'org:admin', }); }

// Premium routes require premium permission if (req.nextUrl.pathname.startsWith('/premium')) { await auth.protect({ permission: 'org:premium:access', }); } });

Anti_patterns

Pattern: Multiple middleware.ts files | Why: Causes conflicts and redirect loops | Fix: Use single middleware.ts with route matchers
Pattern: Manual redirects in components | Why: Double redirects, missed routes | Fix: Handle all redirects in middleware
Pattern: Missing matcher config | Why: Middleware won't run on all routes | Fix: Add comprehensive matcher pattern

References

https://clerk.com/docs/reference/nextjs/clerk-middleware

Server Component Authentication

Access auth state in Server Components using auth() and currentUser().

Key functions:

auth(): Returns userId, sessionId, orgId, claims
currentUser(): Returns full User object
Both require clerkMiddleware to be configured

Code_example

// app/dashboard/page.tsx (Server Component) import { auth, currentUser } from '@clerk/nextjs/server'; import { redirect } from 'next/navigation';

export default async function DashboardPage() { const { userId } = await auth();

if (!userId) { redirect('/sign-in'); }

// Full user data (counts toward rate limits) const user = await currentUser();

return (

Welcome, {user?.firstName}!

Email: {user?.emailAddresses[0]?.emailAddress}

); }

// Using auth() for quick checks export default async function ProtectedLayout({ children, }: { children: React.ReactNode; }) { const { userId, orgId, orgRole } = await auth();

if (!userId) { redirect('/sign-in'); }

// Check organization access if (!orgId) { redirect('/select-org'); }

return (

Organization Role: {orgRole}

{children}

); }

// Server Action with auth check // app/actions/posts.ts 'use server'; import { auth } from '@clerk/nextjs/server';

export async function createPost(formData: FormData) { const { userId } = await auth();

if (!userId) { throw new Error('Unauthorized'); }

const title = formData.get('title') as string;

// Create post with userId const post = await prisma.post.create({ data: { title, authorId: userId, }, });

return post; }

Anti_patterns

Pattern: Not awaiting auth() | Why: auth() is async in App Router | Fix: Use await auth() or const { userId } = await auth()
Pattern: Using currentUser() for simple checks | Why: Counts toward rate limits, slower than auth() | Fix: Use auth() for userId checks, currentUser() for user data

References

https://clerk.com/docs/references/nextjs/auth

Client Component Hooks

Access auth state in Client Components using hooks.

Key hooks:

useUser(): User object and loading state
useAuth(): Auth state, signOut, etc.
useSession(): Session object
useOrganization(): Current organization

Code_example

// components/UserProfile.tsx 'use client'; import { useUser, useAuth } from '@clerk/nextjs';

export function UserProfile() { const { user, isLoaded, isSignedIn } = useUser(); const { signOut } = useAuth();

if (!isLoaded) { return

; }

if (!isSignedIn) { return

Not signed in

; }

return (

{user.fullName}

{user.emailAddresses[0]?.emailAddress}

<button onClick={() => signOut()}>Sign Out

); }

// Organization context 'use client'; import { useOrganization, useOrganizationList } from '@clerk/nextjs';

export function OrgSwitcher() { const { organization, membership } = useOrganization(); const { setActive, userMemberships } = useOrganizationList({ userMemberships: { infinite: true }, });

if (!organization) { return

No organization selected

; }

return (

Current: {organization.name}

Role: {membership?.role}

  <select
    onChange={(e) => setActive?.({ organization: e.target.value })}
    value={organization.id}
  >
    {userMemberships.data?.map((mem) => (
      <option key={mem.organization.id} value={mem.organization.id}>
        {mem.organization.name}
      </option>
    ))}
  </select>
</div>

); }

// Protected client component 'use client'; import { useAuth } from '@clerk/nextjs'; import { useRouter } from 'next/navigation'; import { useEffect } from 'react';

export function ProtectedContent() { const { isLoaded, userId } = useAuth(); const router = useRouter();

useEffect(() => { if (isLoaded && !userId) { router.push('/sign-in'); } }, [isLoaded, userId, router]);

if (!isLoaded || !userId) { return

; }

return

Protected content here

; }

Anti_patterns

Pattern: Not checking isLoaded | Why: Auth state undefined during hydration | Fix: Always check isLoaded before accessing user/auth state
Pattern: Using hooks in Server Components | Why: Hooks only work in Client Components | Fix: Use auth() and currentUser() in Server Components

References

https://clerk.com/docs/references/react/use-user

Organizations and Multi-Tenancy

Implement B2B multi-tenancy with Clerk Organizations.

Features:

Multiple orgs per user
Roles and permissions
Organization-scoped data
Enterprise SSO per organization

Code_example

// Organization creation UI // app/create-org/page.tsx import { CreateOrganization } from '@clerk/nextjs';

export default function CreateOrgPage() { return (

); }

// Organization profile and management // app/org-settings/page.tsx import { OrganizationProfile } from '@clerk/nextjs';

export default function OrgSettingsPage() { return ; }

// Organization switcher in header // components/Header.tsx import { OrganizationSwitcher, UserButton } from '@clerk/nextjs';

export function Header() { return (

); }

// Org-scoped data access // app/dashboard/page.tsx import { auth } from '@clerk/nextjs/server'; import { prisma } from '@/lib/prisma';

export default async function DashboardPage() { const { orgId } = await auth();

if (!orgId) { redirect('/select-org'); }

// Fetch org-scoped data const projects = await prisma.project.findMany({ where: { organizationId: orgId }, });

); } }> ); ; } ; }

await prisma.user.create({
  data: {
    clerkId: id,
    email: email_addresses[0]?.email_address,
    firstName: first_name,
    lastName: last_name,
    imageUrl: image_url,
  },
});

await prisma.user.update({
  where: { clerkId: id },
  data: {
    email: email_addresses[0]?.email_address,
    firstName: first_name,
    lastName: last_name,
    imageUrl: image_url,
  },
});

await prisma.user.delete({
  where: { clerkId: id! },
});

Use @clerk-auth-v2 to handle <task>. Start from the copied upstream workflow, load only the files that change the outcome, and keep provenance visible in the answer.

Review @clerk-auth-v2 against metadata.json and ORIGIN.md, then explain which copied upstream files you would load first and why.

Use @clerk-auth-v2 for <task>. Load only the copied references, examples, or scripts that change the outcome, and name the files explicitly before proceeding.

Review @clerk-auth-v2 using the copied upstream files plus provenance, then summarize any gaps before merge.

Resource family	What it gives the reviewer	Example path
`references`	copied reference notes, guides, or background material from upstream	`references/n/a`
`examples`	worked examples or reusable prompts copied from upstream	`examples/n/a`
`scripts`	upstream helper scripts that change execution or validation	`scripts/n/a`
`agents`	routing or delegation notes that are genuinely part of the imported package	`agents/n/a`
`assets`	supporting assets or schemas copied from the source package	`assets/n/a`

name	clerk-auth-v2
description	Clerk Authentication workflow skill. Use this skill when the user needs Expert patterns for Clerk auth implementation, middleware, and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
version	0.0.1
category	backend
tags	["clerk-auth-v2","clerk-auth","expert","patterns","for","clerk","auth","implementation"]
complexity	advanced
risk	caution
tools	["codex-cli","claude-code","cursor","gemini-cli","opencode"]

name	clerk-auth-v2
description	Clerk Authentication workflow skill. Use this skill when the user needs Expert patterns for Clerk auth implementation, middleware, and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
version	0.0.1
category	backend
tags	["clerk-auth-v2","clerk-auth","expert","patterns","for","clerk","auth","implementation"]
complexity	advanced
risk	caution
tools	["codex-cli","claude-code","cursor","gemini-cli","opencode"]

clerk-auth-v2

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Plus depuis ce dépôt

Clerk Authentication

Overview

Clerk Authentication Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync

When to Use This Skill

Operating Table

Workflow

Imported Workflow Notes

Imported: Patterns

Next.js App Router Setup

Code_example

Environment variables (.env.local)

My App

Anti_patterns

References

Middleware Route Protection

Code_example

Anti_patterns

References

Server Component Authentication

Code_example

Welcome, {user?.firstName}!

Anti_patterns

References

Client Component Hooks

Code_example

{user.fullName}

Anti_patterns

References

Organizations and Multi-Tenancy

Code_example

Projects

Anti_patterns

References

Webhook User Sync

Code_example

Anti_patterns

References

API Route Protection

Code_example

Anti_patterns

References

Examples

Example 1: Ask for the upstream workflow directly

Example 2: Ask for a provenance-grounded review

Example 3: Narrow the copied support files before execution

Example 4: Build a reviewer packet

Best Practices

Troubleshooting

Problem: The operator skipped the imported context and answered too generically

Problem: The imported workflow feels incomplete during review

Problem: The task drifted into a different specialization

Related Skills

Additional Resources

Imported Reference Notes

Imported: Sharp Edges

CVE-2025-29927 Middleware Bypass Vulnerability

Multiple Middleware Files Cause Conflicts

4KB Session Token Cookie Limit

auth() Requires clerkMiddleware Configuration

Webhook Race Conditions

auth() is Async in App Router

Middleware Blocks Webhook Endpoints

Accessing Auth State Before isLoaded

Manual Redirects Cause Double Redirects

Organization Data Not Scoped by orgId

Imported: Validation Checks

Clerk Secret Key in Client Code

Protected Route Without Middleware

Hardcoded Clerk API Keys

Missing Await on auth()

Multiple Middleware Files

Webhook Route Not Excluded from Protection

Accessing Auth Without isLoaded Check

Clerk Hooks in Server Component