skills.rest
Rajaryan1726
Rajaryan1726COMMUNITY
Explore all skills by this author →
GitHub

clerk-react-patterns

Implements Clerk authentication patterns for React SPAs built with Vite and React Router.

Updated Aug 22, 2026
Search Tags:#authentication#react#vite#protected routes#clerk#sign-in#react router
One-click install
npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-react-patterns-rajaryan1726
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-react-patterns
Source: https://github.com/Rajaryan1726/ai-code-review-system/tree/main/client/.agents/skills/clerk-react-patterns
Command: npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-react-patterns-rajaryan1726

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/react, and includes references (resource) components.

What problem does it solve? Setting up Clerk authentication in a Vite or CRA React single-page app involves several error-prone details: placing ClerkProvider correctly, guarding on isLoaded before trusting auth state, wiring protected routes with React Router, and fetching session tokens for API calls. This Skill provides tested patterns and references that prevent common mistakes like undefined isSignedIn values or missing publishable keys. ## Core Features & Use Cases - Provider and Environment Setup: Configures ClerkProvider in main.tsx with the VITE_CLERK_PUBLISHABLE_KEY environment variable accessed via import.meta.env. - Auth Hooks and Protected Routes: Covers useAuth, useUser, and useClerk hooks plus a ProtectedRoute component for React Router v6/v7 that redirects unauthenticated users. - Custom Flows and API Tokens: Implements custom sign-in/sign-up forms with useSignIn/useSignUp and retrieves session JWTs via getToken() for authenticated backend requests. - Use Case: You are building a React SPA dashboard and need /dashboard and /settings restricted to signed-in users, with a custom email/password sign-in form and authenticated calls to your Express API. ## Quick Start Ask the assistant to add Clerk authentication to your Vite React app with a protected dashboard route and a custom sign-in page.

Frequently Asked Questions about clerk-react-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Clerk authentication in a Vite React app?▼

Install @clerk/react, add VITE_CLERK_PUBLISHABLE_KEY to your .env file, and wrap your App in ClerkProvider inside main.tsx using import.meta.env to read the key. Then use Show, SignInButton, and UserButton components for conditional auth UI.

How do I protect routes with React Router and Clerk?▼

Create a ProtectedRoute component that calls useAuth(), returns a loading state while isLoaded is false, and renders Navigate to /sign-in when isSignedIn is false. Wrap protected routes with this component using the Outlet pattern in React Router v6/v7.

How do I build a custom sign-in form with Clerk React hooks?▼

Use the useSignIn hook, call signIn.create with the identifier and password, then check that result.status equals 'complete' before calling setActive with the createdSessionId. Catch errors and display the first error message from the Clerk error response.

Why is isSignedIn undefined in my Clerk React app?▼

isSignedIn is undefined while Clerk is still initializing, meaning isLoaded is false. Always check isLoaded first and render a loading state before trusting any auth values from useAuth.

How do I get the Clerk session token for API calls in React?▼

Call getToken() from the useAuth hook, await the returned promise, and null-check the result since it returns null when unauthenticated. Attach it as a Bearer token in the Authorization header of your fetch requests.

Does @clerk/react work with Next.js or only Vite SPAs?▼

@clerk/react is client-only and designed for Vite/CRA single-page apps; there is no server-side auth() function. For Next.js use @clerk/nextjs instead, and for TanStack Start use the dedicated TanStack integration.

Related Skills

Explore More Software Engineering Skills→
RajAryanIITBHURajAryanIITBHU

clerk-react-patterns

Provide Clerk authentication patterns for React single-page applications.

Community
Intermediate
supercent-iosupercent-io

authentication-setup

Design and implement JWT-based authentication systems for Express applications.

Official
Advanced
EricJamesCrowEricJamesCrow

clerk-custom-ui

Customize Clerk component appearance with theming and layout options.

Community
Intermediate
openaiopenai
5.3k

auth

Implements Clerk, Descope, and Auth0 authentication for Next.js applications on Vercel.

Official
Intermediate