clerk-react-patterns

clerk react patterns

clerk ↓ 10k
Claude Code
View source ↗

What it does

  • isLoaded must be true before trusting isSignedIn — always guard on isLoaded
  • useClerk() gives access to signOut, openSignIn, openUserProfile and other methods
  • getToken() from useAuth() fetches the session JWT for API calls
  • clerk-setup - Initial Clerk install
  • clerk-custom-ui - Custom flows & appearance
  • clerk-orgs - B2B organizations

Requirements & configuration

  • What Do You Need?
  • Token for API Calls
  • const token = await getToken()
  • if (!token) return
  • headers: { Authorization: Bearer ${token} },

Configuration: VITE_CLERK_PUBLISHABLE_KEY

Derived from the skill's own SKILL.md documentation · extracted 2026-07-23

clerk react patterns

Source

Repository: https://github.com/clerk/skills

clerk-react-patterns FAQ

What does the clerk-react-patterns skill do?

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. isLoaded must be true before trusting isSignedIn — always guard on isLoaded useClerk() gives access to signOut, openSignIn, openUserProfile and other methods

What does clerk-react-patterns require?

What Do You Need? Token for API Calls const token = await getToken() if (!token) return headers: { Authorization: Bearer ${token} }, Configuration keys: VITE_CLERK_PUBLISHABLE_KEY.

How do I install clerk-react-patterns?

Run: npx -y skills add https://github.com/clerk/skills --skill clerk-react-patterns --agent claude-code — the source lives at github.com/clerk/skills.

Maintain clerk-react-patterns?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

clerk-react-patterns on getagentictools
[![clerk-react-patterns on getagentictools](https://getagentictools.com/badge/skills/clerk-skills-clerk-react-patterns.svg)](https://getagentictools.com/skills/clerk-skills-clerk-react-patterns?ref=badge)
npx agentictools info skills/clerk-skills-clerk-react-patterns

The second line is the CLI lookup for this page — handy in READMEs and docs.