---
id: daily-clerk-react-patterns
name: "clerk-react-patterns"
url: https://skills.yangsir.net/skill/daily-clerk-react-patterns
author: clerk
domain: ai-app-building-integration
tags: ["authentication", "react", "backend-development", "security", "integration"]
install_count: 2600
rating: 4.40 (34 reviews)
github: https://github.com/clerk/skills
---

# clerk-react-patterns

> Clerk React 认证模式库，提供 Vite/CRA SPA 的完整认证集成方案和最佳实践

**Stats**: 2,600 installs · 4.4/5 (34 reviews)

## Before / After 对比

### 认证集成时间

**Before**:

手动实现用户注册、登录、会话管理和路由保护，需要处理安全漏洞和边缘情况，开发周期 3-5 天

**After**:

使用 Clerk 预构建的 hooks 和组件，声明式配置认证流程，2 小时完成生产级集成

| Metric | Before | After | Change |
|---|---|---|---|
| 集成时间 | 32小时 | 2小时 | -93.75% |

## Readme

# clerk-react-patterns

# React SPA Patterns

This skill covers `@clerk/react` for Vite/CRA SPAs. For Next.js use `clerk-nextjs-patterns`. For TanStack Start use `clerk-tanstack-patterns`.

## What Do You Need?

Task
Reference

useAuth / useUser / useClerk hooks
references/hooks.md

Protected routes with React Router
references/protected-routes.md

Custom sign-in / sign-up forms
references/custom-flows.md

React Router v6/v7 integration
references/router-integration.md

## References

Reference
Description

`references/hooks.md`
useAuth, isLoaded guard

`references/protected-routes.md`
ProtectedRoute pattern

`references/custom-flows.md`
useSignIn, useSignUp flows

`references/router-integration.md`
React Router v6/v7 setup

## Setup

```
npm install @clerk/react

```

`.env`:

```
VITE_CLERK_PUBLISHABLE_KEY=pk_...

```

`src/main.tsx`:

```
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ClerkProvider } from '@clerk/react'
import App from './App.tsx'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <App />
    </ClerkProvider>
  </StrictMode>,
)

```

## Mental Model

`@clerk/react` is client-only — there is no server-side `auth()`. All auth state comes from hooks.

- `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

## Minimal Pattern

```
import { useAuth } from '@clerk/react'

export function Dashboard() {
  const { isLoaded, isSignedIn, userId } = useAuth()

  if (!isLoaded) return <div>Loading...</div>
  if (!isSignedIn) return <div>Please sign in</div>

  return <div>Hello {userId}</div>
}

```

## Protected Route (React Router v6/v7)

```
import { Navigate, Outlet } from 'react-router-dom'
import { useAuth } from '@clerk/react'

export function ProtectedRoute() {
  const { isLoaded, isSignedIn } = useAuth()

  if (!isLoaded) return <div>Loading...</div>
  if (!isSignedIn) return <Navigate to="/sign-in" replace />

  return <Outlet />
}

```

```
<Routes>
  <Route element={<ProtectedRoute />}>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/settings" element={<Settings />} />
  </Route>
  <Route path="/sign-in" element={<SignIn />} />
</Routes>

```

## Token for API Calls

```
import { useAuth } from '@clerk/react'

export function DataFetcher() {
  const { getToken } = useAuth()

  async function fetchData() {
    const token = await getToken()
    if (!token) return

    const res = await fetch('/api/data', {
      headers: { Authorization: `Bearer ${token}` },
    })
    return res.json()
  }

  return <button onClick={fetchData}>Load</button>
}

```

## Common Pitfalls

Symptom
Cause
Fix

`isSignedIn` is `undefined`
`isLoaded` is still `false`
Always check `isLoaded` first

`ClerkProvider` missing
Provider not at root
Wrap `<App>` in `main.tsx`

Env var undefined
Wrong Vite prefix
Use `VITE_CLERK_PUBLISHABLE_KEY`, access via `import.meta.env`

Token is `null`
User not signed in
Null-check `getToken()` result

Sign-in component shows blank
No `publishableKey` on provider
Pass `publishableKey` explicitly

## See Also

- `clerk-setup` - Initial Clerk install

- `clerk-custom-ui` - Custom flows & appearance

- `clerk-orgs` - B2B organizations

## Docs

[React SDK](https://clerk.com/docs/react/getting-started/quickstart)
Weekly Installs514Repository[clerk/skills](https://github.com/clerk/skills)GitHub Stars34First Seen11 days agoSecurity Audits[Gen Agent Trust HubPass](/clerk/skills/clerk-react-patterns/security/agent-trust-hub)[SocketPass](/clerk/skills/clerk-react-patterns/security/socket)[SnykPass](/clerk/skills/clerk-react-patterns/security/snyk)Installed oncodex442gemini-cli419cursor419github-copilot417cline411opencode407

---
*Source: https://skills.yangsir.net/skill/daily-clerk-react-patterns*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-clerk-react-patterns/markdown*