clerk-auth

Name: clerk-auth
Author: jackspace

15stars7forks

How to install clerk-auth?

jackspace/claudeskillz/clerk-auth

$npx -y skills add jackspace/ClaudeSkillz --skill clerk-auth

Installs into the current project.

Summary

This skill provides comprehensive knowledge for integrating Clerk authentication in React, Next.js, and Cloudflare Workers applications. It should be used when setting up user authentication, implementing protected routes, verifying JWT tokens, creating custom JWT templates with

Files · 1

View on GitHub

SKILL.md

1	# Clerk Authentication
2
3	Status: Production Ready ✅
4	Last Updated: 2025-10-28
5	Dependencies: None
6	Latest Versions: @clerk/nextjs@6.33.3, @clerk/backend@2.17.2, @clerk/clerk-react@5.51.0, @clerk/testing@1.4.4
7
8	---
9
10	## Quick Start (10 Minutes)
11
12	Choose your framework:
13	- [React (Vite)](#react-vite-setup) - ClerkProvider + hooks
14	- [Next.js App Router](#nextjs-app-router-setup) - Middleware + async auth()
15	- [Cloudflare Workers](#cloudflare-workers-setup) - Backend verification
16
17	---
18
19	## React (Vite) Setup
20
21	### 1. Install Clerk
22
23	\`\`\`bash
24	npm install @clerk/clerk-react
25	\`\`\`
26
27	Latest Version: @clerk/clerk-react@5.51.0 (verified 2025-10-22)
28
29	### 2. Configure ClerkProvider
30
31	Update \`src/main.tsx\`:
32
33	\`\`\`typescript
34	import React from 'react'
35	import ReactDOM from 'react-dom/client'
36	import { ClerkProvider } from '@clerk/clerk-react'
37	import App from './App.tsx'
38	import './index.css'
39
40	// Get publishable key from environment
41	const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
42
43	if (!PUBLISHABLE_KEY) {
44	throw new Error('Missing Publishable Key')
45	}
46
47	ReactDOM.createRoot(document.getElementById('root')!).render(
48	<React.StrictMode>
49	<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
50	<App />
51	</ClerkProvider>
52	</React.StrictMode>,
53	)
54	\`\`\`
55
56	CRITICAL:
57	- Use \`VITE_\` prefix for environment variables in Vite
58	- ClerkProvider must wrap your entire app
59	- Source: https://clerk.com/docs/references/react/clerk-provider
60
61	### 3. Add Environment Variables
62
63	Create \`.env.local\`:
64
65	\`\`\`bash
66	VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
67	\`\`\`
68
69	Security Note: Only \`VITE_\` prefixed vars are exposed to client code.
70
71	### 4. Use Authentication Hooks
72
73	\`\`\`typescript
74	import { useUser, useAuth, useClerk } from '@clerk/clerk-react'
75
76	function App() {
77	// Get user object (includes email, metadata, etc.)
78	const { isLoaded, isSignedIn, user } = useUser()
79
80	// Get auth state and session methods
81	const { userId, sessionId, getToken } = useAuth()
82
83	// Get Clerk instance for advanced operations
84	const { openSignIn, signOut } = useClerk()
85
86	// Always check isLoaded before rendering auth-dependent UI
87	if (!isLoaded) {
88	return <div>Loading...</div>
89	}
90
91	if (!isSignedIn) {
92	return <button onClick={() => openSignIn()}>Sign In</button>
93	}
94
95	return (
96	<div>
97	<h1>Welcome {user.firstName}!</h1>
98	<p>Email: {user.primaryEmailAddress?.emailAddress}</p>
99	<button onClick={() => signOut()}>Sign Out</button>
100	</div>
101	)
102	}
103	\`\`\`
104
105	Why This Matters:
106	- \`isLoaded\` prevents flash of wrong

People who liked this also viewed

6 picks

Type

clerk-auth

15stars7forks

View on GitHub

How to install clerk-auth?

jackspace/claudeskillz/clerk-auth

$npx -y skills add jackspace/ClaudeSkillz --skill clerk-auth

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Clerk Authentication
2
3	Status: Production Ready ✅
4	Last Updated: 2025-10-28
5	Dependencies: None
6	Latest Versions: @clerk/nextjs@6.33.3, @clerk/backend@2.17.2, @clerk/clerk-react@5.51.0, @clerk/testing@1.4.4
7
8	---
9
10	## Quick Start (10 Minutes)
11
12	Choose your framework:
13	- [React (Vite)](#react-vite-setup) - ClerkProvider + hooks
14	- [Next.js App Router](#nextjs-app-router-setup) - Middleware + async auth()
15	- [Cloudflare Workers](#cloudflare-workers-setup) - Backend verification
16
17	---
18
19	## React (Vite) Setup
20
21	### 1. Install Clerk
22
23	\`\`\`bash
24	npm install @clerk/clerk-react
25	\`\`\`
26
27	Latest Version: @clerk/clerk-react@5.51.0 (verified 2025-10-22)
28
29	### 2. Configure ClerkProvider
30
31	Update \`src/main.tsx\`:
32
33	\`\`\`typescript
34	import React from 'react'
35	import ReactDOM from 'react-dom/client'
36	import { ClerkProvider } from '@clerk/clerk-react'
37	import App from './App.tsx'
38	import './index.css'
39
40	// Get publishable key from environment
41	const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
42
43	if (!PUBLISHABLE_KEY) {
44	throw new Error('Missing Publishable Key')
45	}
46
47	ReactDOM.createRoot(document.getElementById('root')!).render(
48	<React.StrictMode>
49	<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
50	<App />
51	</ClerkProvider>
52	</React.StrictMode>,
53	)
54	\`\`\`
55
56	CRITICAL:
57	- Use \`VITE_\` prefix for environment variables in Vite
58	- ClerkProvider must wrap your entire app
59	- Source: https://clerk.com/docs/references/react/clerk-provider
60
61	### 3. Add Environment Variables
62
63	Create \`.env.local\`:
64
65	\`\`\`bash
66	VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
67	\`\`\`
68
69	Security Note: Only \`VITE_\` prefixed vars are exposed to client code.
70
71	### 4. Use Authentication Hooks
72
73	\`\`\`typescript
74	import { useUser, useAuth, useClerk } from '@clerk/clerk-react'
75
76	function App() {
77	// Get user object (includes email, metadata, etc.)
78	const { isLoaded, isSignedIn, user } = useUser()
79
80	// Get auth state and session methods
81	const { userId, sessionId, getToken } = useAuth()
82
83	// Get Clerk instance for advanced operations
84	const { openSignIn, signOut } = useClerk()
85
86	// Always check isLoaded before rendering auth-dependent UI
87	if (!isLoaded) {
88	return <div>Loading...</div>
89	}
90
91	if (!isSignedIn) {
92	return <button onClick={() => openSignIn()}>Sign In</button>
93	}
94
95	return (
96	<div>
97	<h1>Welcome {user.firstName}!</h1>
98	<p>Email: {user.primaryEmailAddress?.emailAddress}</p>
99	<button onClick={() => signOut()}>Sign Out</button>
100	</div>
101	)
102	}
103	\`\`\`
104
105	Why This Matters:
106	- \`isLoaded\` prevents flash of wrong

People who liked this also viewed

6 picks

Type