React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows. Triggers on: Vite Clerk setup, React Router auth, useAuth hook, protected route, custom sign-in form React.
Detected risks:
The clerk-react-patterns skill provides implementation guidance for authentication patterns in React single-page applications using `@clerk/react` with Vite or Create React App environments. It helps developers configure Clerk authentication in client-side React applications, avoiding confusion around SPA-specific auth behavior where authentication state is managed entirely through hooks rather than server-side APIs. The skill addresses common setup and runtime issues such as provider configuration, environment variable usage, auth state handling, and route protection in React applications.
Its core capabilities include configuring `ClerkProvider` in a React app root, working with authentication hooks such as `useAuth`, `useUser`, and `useClerk`, implementing protected routes with React Router v6/v7, and handling custom authentication flows. It documents important patterns such as guarding UI logic with `isLoaded` before using `isSignedIn`, retrieving session tokens with `getToken()` for authenticated API requests, and using Clerk methods exposed through `useClerk()`. The skill also includes troubleshooting guidance for common issues involving missing providers, undefined environment variables, null tokens, and publishable key configuration.
This skill is intended for React developers building client-side authenticated applications with Clerk. It is especially useful for teams using Vite or CRA who need practical patterns for dashboard access control, authenticated API calls, custom sign-in experiences, or React Router integration. It is relevant for developers seeking reusable SPA auth patterns without relying on Next.js or server-side authentication models.
The skill shows how to install `@clerk/react`, configure the `VITE_CLERK_PUBLISHABLE_KEY` environment variable, and wrap the application with `ClerkProvider` in `main.tsx`.
Yes. It includes protected route patterns for React Router v6/v7 using `useAuth`, `Navigate`, and `Outlet`.
Yes. The documented pattern uses `getToken()` from `useAuth()` to retrieve a session token for API authorization headers.
No. The content is specifically for `@clerk/react` in Vite/CRA single-page applications. Separate patterns are referenced for Next.js and TanStack Start.
The application must use `ClerkProvider` with a valid publishable key, and authentication logic should always check `isLoaded` before relying on `isSignedIn`. The documented model is client-only and does not include server-side `auth()` usage.
Quick Setup:
.claude/skills/Repository
clerk/skills