skills.rest
clerk
clerkOFFICIAL
Explore all skills by this author →
Website𝕏@ClerkGitHub

clerk-react-patterns

Implement Clerk authentication and protected routes in React SPAs.

66|4|Updated Jan 6, 2026
Search Tags:#authentication#react#vite#clerk#react-router#protected-routes#gettoken
One-click install
npx skills add https://github.com/clerk/skills --skill clerk-react-patterns-clerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-react-patterns
Source: https://github.com/clerk/skills/tree/main/skills/frameworks/clerk-react-patterns
Command: npx skills add https://github.com/clerk/skills --skill clerk-react-patterns-clerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides clear patterns and recipes to implement authentication in React single-page applications using the Clerk React SDK, eliminating common mistakes like unguarded auth checks, incorrect provider placement, and insecure token handling.

Core Features & Use Cases

  • Protected route patterns and route-level guards using isLoaded and isSignedIn to prevent unauthorized access.
  • Hook usage guidance for obtaining session tokens, reading user profiles, and performing programmatic actions such as sign out and opening user or organization profiles.
  • Templates and examples tailored for Vite and Create React App, React Router integration, and custom sign-in and sign-up flows.
  • Use Case: Secure a dashboard and settings area behind authentication, retrieve a session JWT for backend API calls, and implement a custom email/password sign-in that activates the session.

Quick Start

Add ClerkProvider to your Vite React app, protect /dashboard and /settings with a ProtectedRoute that checks isLoaded and isSignedIn, and implement a custom sign-in form using useSignIn that creates and activates a session on success.

Frequently Asked Questions about clerk-react-patterns

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

FAQPage Schema
How do I implement protected routes in a React SPA using Clerk?▼

Protected routes in a React SPA use Clerk's isLoaded and isSignedIn state guards within a custom ProtectedRoute component to prevent unauthorized access to secure areas like dashboards and settings.

How do I get a session token for API calls in my Vite React application?▼

To get a session token for API calls in your Vite React app, use the getToken function from Clerk's useAuth hook to retrieve a session JWT for authenticating backend requests.

Can I build a custom sign-in flow with Clerk in Create React App?▼

Yes, you can build a custom sign-in flow in Create React App by using the useSignIn hook to create and activate an email/password session programmatically upon successful submission.

Where should ClerkProvider be placed in a client-only React Router project?▼

ClerkProvider should wrap your application at the root level in a client-only setup, ensuring React Router and authentication hooks have access to the session context before rendering protected views.

What is the best way to read user profile data in a React single-page application?▼

The best way to read user profile data in a React SPA is using the useUser hook, which provides direct access to the active user's profile information after the isLoaded state confirms the session is ready.

Why does my authentication check fail before the page fully loads?▼

Authentication checks fail before page load when the isLoaded guard is missing, causing the application to evaluate isSignedIn prematurely; wrapping routes with isLoaded ensures Clerk finishes initializing before verifying access.

Related Skills

Explore More Software Engineering Skills→
ggombeeggombee
13

react-spa

Create React Single Page Applications with Vite or Create React App.

Community
Intermediate
mpauloskympaulosky

Auth0 Token Forwarding to Backend APIs

Attaches Auth0 access tokens to outgoing ASP.NET Core HttpClient requests.

Community
Intermediate
Athone88Athone88

clerk-react-patterns

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

Community
Intermediate
FortiumPartnersFortiumPartners

using-clerk

Integrates Clerk authentication and RBAC into .NET and React apps.

Official
Intermediate