fjrg2007/enigma/clerk-react-patterns

npm install @clerk/react

VITE_CLERK_PUBLISHABLE_KEY=pk_...

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>,
)

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

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>

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