skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

clerk-react-patterns

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

Updated Apr 19, 2026
Search Tags:#authentication#react#vite#protected routes#clerk#react-router#sign-in
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill clerk-react-patterns-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-react-patterns
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/clerk-react-patterns
Command: npx skills add https://github.com/divinaarmuela/Content --skill clerk-react-patterns-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Setting up Clerk authentication in a React single-page application involves many moving parts: provider setup, environment variables, hook guards, protected routes, and custom sign-in flows. This Skill provides tested patterns for @clerk/react so you avoid common mistakes like missing isLoaded guards or wrong Vite env prefixes. ## Core Features & Use Cases - Provider & Hook Setup: Configure ClerkProvider in main.tsx with VITE_CLERK_PUBLISHABLE_KEY and use useAuth, useUser, and useClerk hooks correctly with isLoaded guards. - Protected Routes: Build ProtectedRoute wrapper components for React Router v6/v7 that redirect unauthenticated users to a sign-in page. - Custom Auth Flows: Implement custom sign-in and sign-up forms with useSignIn and useSignUp, including email verification and session activation. - Use Case: You scaffold a new Vite + React app and need login, a protected /dashboard route, and a profile page showing the user's name and avatar. This Skill gives you the exact component code and router configuration. ## Quick Start Ask the AI to set up Clerk authentication in your Vite React app with a protected dashboard route using React Router.

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 signed-in and signed-out UI states.

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 like /dashboard inside 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, and check that result.status equals complete before calling setActive with the created session ID. 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, which means isLoaded is false. Always check isLoaded first and render a loading state before trusting any auth values from useAuth or useUser.

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

Call getToken from the useAuth hook and await the result, since it returns a Promise. Null-check the token, then attach it as a Bearer token in the Authorization header of your fetch request.

Does @clerk/react work with Next.js or server-side rendering?▼

No, @clerk/react is client-only and has no server-side auth function. For Next.js use the clerk-nextjs-patterns approach with @clerk/nextjs, and for TanStack Start use the dedicated TanStack patterns instead.

Related Skills

Explore More Software Engineering Skills→
Rajaryan1726Rajaryan1726

clerk-android

Implements Clerk authentication in native Android apps using Kotlin and Jetpack Compose.

Community
Advanced
cheesejaguarcheesejaguar
7

clerk-nextjs-patterns

Secure Next.js App Router applications with Clerk authentication and authorization patterns.

Community
Advanced
RoyMcCrainRoyMcCrain
1

clerk-orgs

Manage organizations and teams in Clerk-authenticated Next.js apps.

Community
Advanced
openaiopenai
5.3k

auth

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

Official
Intermediate