skills.rest
Athone88
Athone88COMMUNITY
Explore all skills by this author →
GitHub

clerk-react-patterns

Implement Clerk authentication in React SPAs with React Router protected routes.

Updated May 30, 2026
Search Tags:#authentication#react#protected routes#clerk#react router#session token#custom sign-in
One-click install
npx skills add https://github.com/Athone88/Anima --skill clerk-react-patterns-athone88
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-react-patterns
Source: https://github.com/Athone88/Anima/tree/main/.agents/skills/clerk-react-patterns
Command: npx skills add https://github.com/Athone88/Anima --skill clerk-react-patterns-athone88

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of implementing reliable authentication flows in a React SPA using Clerk without brittle state handling or unsafe route protection.

Core Features & Use Cases

  • ClerkProvider bootstrapping for Vite/CRA: Configure a React SPA to initialize Clerk at the app root with the correct VITE_CLERK_PUBLISHABLE_KEY environment variable.
  • Hook-safe auth state management: Use useAuth, useUser, and useClerk correctly, including the required isLoaded guard before trusting isSignedIn.
  • Protected routing with React Router: Protect /dashboard and other routes by redirecting unauthenticated users to /sign-in, including React Router v6/v7 patterns.
  • Custom sign-in/sign-up flows: Implement email/password sign-in and sign-up using Clerk hooks (useSignIn, useSignUp) and activate sessions when complete.
  • API token usage: Fetch a session JWT via getToken() and attach it as Authorization: Bearer <token> for backend calls.

Quick Start

Use the clerk-react-patterns skill to add ClerkProvider to your React app root, then implement a ProtectedRoute for React Router v6/v7 and a custom sign-in form using useSignIn.

Frequently Asked Questions about clerk-react-patterns

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

FAQPage Schema
How do I protect React Router routes with Clerk authentication in a SPA?▼

Protect React Router routes by implementing a redirect-based ProtectedRoute component that checks Clerk's isSignedIn state and redirects unauthenticated users to the sign-in page.

Why does my Clerk useAuth hook return undefined in React?▼

The Clerk useAuth hook returns undefined until the isLoaded state is true. Always guard your components by checking isLoaded before trusting isSignedIn to avoid rendering undefined auth state.

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

Fetch a Clerk session JWT by calling getToken() from the useAuth hook, then attach it to your fetch requests as an Authorization: Bearer token header to authenticate backend API calls.

Can I build a custom Clerk sign-in form instead of using prebuilt components?▼

You can build custom Clerk sign-in forms using the useSignIn and useSignUp hooks, allowing you to handle email/password authentication flows and activate sessions when the process completes.

What is the correct way to set up ClerkProvider in a Vite React application?▼

Configure ClerkProvider in a Vite React app by wrapping your root component and passing the VITE_CLERK_PUBLISHABLE_KEY environment variable to initialize the authentication provider.

How do I handle wildcard routes for Clerk multi-step flows in React Router?▼

Configure React Router wildcard routes to catch nested paths, ensuring Clerk multi-step authentication flows like email verification complete without breaking SPA navigation.

Related Skills

Explore More Software Engineering Skills→
Aditya07024Aditya07024

clerk-react-patterns

Implement Clerk authentication patterns in React SPAs with protected routes.

Community
Intermediate
Jawad-ChaudharyJawad-Chaudhary

api-fetch-with-auth

Create an authenticated fetch utility for Next.js using better-auth tokens.

Community
Intermediate
pluginagentmarketplacepluginagentmarketplace
1

react-router

Configure React Router v6 client-side routing with nested and protected routes.

Community
Intermediate
Aditya07024Aditya07024

clerk-expo-patterns

Configure Clerk authentication with SecureStore caching and protected Expo Router routes.

Community
Advanced