clerk-frontend-sdks
This skill guides frontend integration of Clerk authentication across React, Vue, Nuxt, Astro, Expo, and plain JavaScript. Learn SDK selection for your framework, provider setup with publishable keys, prebuilt component patterns, and custom flow state management. Covers token fetching for cross-origin APIs, CORS and cookie handling, routing guards, organization switching, and the critical distinction between client-side presentation state and server-side authorization.
Clerk Frontend SDKs helps you integrate Clerk authentication into React, Vue, Astro, and other frontend frameworks with prebuilt components and custom flows.
AI-generated summary based on this skill's SKILL.md
Install
JosiahSiegel/claude-plugin-marketplace/clerk-frontend-sdks · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/clerk-auth-master/skills/clerk-frontend-sdks ~/.claude/skills/clerk-frontend-sdksFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up Clerk React authentication in my application?
clerk-frontend-sdks guides you through React setup by wrapping your app with ClerkProvider, passing your publishable key via environment variables, and selecting prebuilt components (SignIn, SignUp, UserButton) or building custom flows with useAuth and useUser hooks. The skill covers provider configuration, redirect URL setup after authentication, and framework-specific patterns for Next.js, Remix, and plain React SPAs.
What's the difference between clerk-frontend-sdks for React versus other frameworks?
clerk-frontend-sdks provides framework-specific SDKs: @clerk/react for React/Next.js, @clerk/vue for Vue/Nuxt, @clerk/astro for Astro, and @clerk/expo for React Native. Each SDK wraps the same core authentication logic in framework idioms—hooks for React, composables for Vue, middleware for Astro. The skill teaches SDK selection, provider setup, and framework-native patterns while keeping authorization logic consistent across all platforms.
How do I use the useAuth hook for cross-origin API calls with bearer tokens?
clerk-frontend-sdks teaches using useAuth() to retrieve getToken(), which returns a signed JWT for Bearer authentication. Call getToken() before fetch requests, add it to Authorization headers, and configure your backend to validate the token. The skill covers CORS setup, cookie handling for same-origin requests, and debugging common issues like null reference errors during hydration or loading states.
What are common clerk hydration bugs in SSR and how do I fix them?
clerk-frontend-sdks addresses hydration mismatches in Next.js and other SSR frameworks by explaining that Clerk's client-side state must sync with server rendering. Solutions include wrapping components in <ClerkLoaded>, using useClerk() to check isLoaded status, and avoiding null reference errors by handling loading states explicitly. The skill distinguishes between presentation state (UI) and server-side authorization (tokens).
How do I implement a custom sign-in flow with Clerk state management?
clerk-frontend-sdks covers custom flows using useSignIn and useSignUp hooks for fine-grained control over authentication steps, error handling, and redirects. You manage form state, call methods like signIn.create() and signIn.attemptFirstFactor(), and handle multi-factor authentication. The skill teaches state machine patterns, session token retrieval via getToken(), and organization context switching with useOrganization().
What environment variables and redirect URLs must I configure for Clerk?
clerk-frontend-sdks requires NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (frontend-safe) and CLERK_SECRET_KEY (backend-only) in .env files. Set redirect URLs in your Clerk dashboard for post-sign-in and post-sign-up flows. The skill explains the distinction between development and production instances, CSP script allowlisting for Clerk domains, and troubleshooting mismatched publishable keys or CORS policy violations.
SKILL.md
rendered from the published skill — quoted content, verbatim
Clerk Frontend SDKs
Overview
Use this skill for client-side Clerk integration across React and other frontend frameworks. The main job is choosing the correct framework SDK, wiring provider context, selecting prebuilt UI vs custom flows, handling environment-specific redirects, and avoiding the mistake of treating client auth state as server authorization.
SDK Selection
Prefer the dedicated framework SDK when one exists:
| App type | Preferred package/pattern |
|---|---|
| Next.js | @clerk/nextjs |
| React app without a stronger integration | @clerk/react |
| React Router framework |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
plugins/clerk-auth-master/skills/clerk-frontend-sdks/SKILL.md