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
Decision gist · record as of 2026-06-18
Clerk Frontend SDKs helps you integrate Clerk authentication into React, Vue, Astro, and other frontend frameworks with prebuilt components and custom flows. 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.
Use it when
- clerk-frontend-sdks provides framework-specific SDKs: @clerk/react for React/Next.js, @clerk/vue for Vue/Nuxt, @clerk/astro for Astro.
- clerk-frontend-sdks teaches using useAuth() to retrieve getToken(), which returns a signed JWT for Bearer authentication.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
JosiahSiegel/claude-plugin-marketplace/clerk-frontend-sdks · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
plugins/clerk-auth-master/skills/clerk-frontend-sdks/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Integrate Clerk authentication into a React or frontend framework application”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Add Clerk authentication to Expo apps using @clerk/clerk-expo with secure token storage via Expo SecureStore. Build custom sign-in and sign-up screens, protect routes with Expo Router or React Navigation, and integrate OAuth, SSO, and Apple Sign-in for iOS.
Master authentication in React single-page apps with Clerk's @clerk/react library. This skill covers ClerkProvider initialization, essential hooks like useAuth and useUser, protecting routes with React Router, and building custom sign-in experiences. Get patterns for token retrieval, loading states, and common setup mistakes.
Clerk Expo integrates authentication into Expo and React Native projects via prebuilt native components or custom flows. Support includes email/password, SMS/phone OTP, MFA, OAuth/SSO, native Google/Apple sign-in, protected routes, biometrics, and push notifications.
Clerk Vue Patterns teaches you how to build authenticated Vue 3 apps using Clerk's composables—useAuth, useUser, useClerk, and useOrganization—plus Vue Router guards and Pinia store setup. Covers common pitfalls and org switching workflows.
This skill guides you through authenticating and authorizing incoming requests on backend services using Clerk's SDKs and middleware. It covers request flow, token verification, cross-origin patterns, proxy header preservation, and Backend API client usage across Node, Go, Python, Ruby, Java, C#, and PHP frameworks.
Clerk Android guides you through integrating Clerk authentication into native Android projects using the clerk-android SDK. Choose between prebuilt AuthView and UserButton components for rapid setup, or build custom API-driven flows for complete control over your auth experience.
More skills Clerk (unlicensed)