-1
CLAUDE.md
-1
CLAUDE.md
···
233
233
// Client internal imports
234
234
import { Header } from '@www/components/Header'
235
235
import { xrpcClient } from '@www/lib/xrpcClient'
236
-
import { requireAuth } from '@www/lib/session.server'
237
236
238
237
// Import server types (type-only imports)
239
238
import type { Account } from '@api/db/schema'
+2
-2
README.md
+2
-2
README.md
···
40
40
- Vite
41
41
42
42
**Shared**:
43
-
- @watproto/lexicon - ATProto type definitions
43
+
- @watproto/lexicon - Lexicon type definitions and utils generated from lexicon schemas
44
44
45
45
## Quick Start
46
46
···
288
288
289
289
**CORS errors**:
290
290
- Ensure server CORS allows client origin
291
-
- Check `VITE_API_URL` matches server URL
291
+
- Check `API_URL` in client environment variables matches server URL
292
292
293
293
**Type errors**:
294
294
- Run `bun install` at root to sync workspace
+8
-9
packages/client/CLAUDE.md
+8
-9
packages/client/CLAUDE.md
···
206
206
207
207
3. **Session Management**:
208
208
- Sessions stored in SQLite via @atproto/oauth-client-node
209
-
- Session data available via `requireAuth()` helper
209
+
- Session data available via `getOAuthSession()` helper
210
210
- Automatic token refresh handled by OAuth client
211
211
212
212
4. **Protected Routes**:
213
-
- Use `requireAuth()` in loaders to enforce authentication
213
+
- Use `getOAuthSession()` in loaders to enforce authentication
214
214
- Access user data and OAuth session in route loaders/actions
215
215
216
216
**Example Protected Route**:
217
217
```typescript
218
218
// app/routes/editor.tsx
219
-
import { requireAuth } from '@www/lib/session.server'
219
+
import { getOAuthSession } from '@www/lib/oauth.server'
220
220
221
221
export async function loader({ request }: Route.LoaderArgs) {
222
-
const { user, session } = await requireAuth(request)
223
-
return { user }
222
+
const { did } = await getOAuthSession(request)
223
+
return { did }
224
224
}
225
225
226
226
export default function Editor({ loaderData }: Route.ComponentProps) {
227
-
const { user } = loaderData
227
+
const { did } = loaderData
228
228
// User is guaranteed to be authenticated here
229
229
}
230
230
```
···
324
324
### Adding New Features
325
325
1. Create route files in `app/routes/`
326
326
2. Create components in `app/components/`
327
-
3. Add API calls using `fetch` with `VITE_API_URL`
327
+
3. Add XRPC calls using utils from `app/lib/xrpcClient.ts`
328
328
4. Style with Tailwind CSS utility classes
329
329
5. Test locally with both client and server running
330
330
···
337
337
338
338
### Server Communication
339
339
- **Protocol**: XRPC over HTTP
340
-
- **XRPC Client**: Configured in `lib/xrpcClient.ts`
340
+
- **XRPC Client**: Configured in `app/lib/xrpcClient.ts`
341
341
- **Server URL**: Configured via `API_URL` environment variable
342
342
- **Authentication**: OAuth managed by client, XRPC calls include session context
343
343
···
380
380
- E2E testing with Playwright
381
381
382
382
### Performance Optimization
383
-
- Implement code splitting for routes (automatic with React Router)
384
383
- Optimize images and assets
385
384
- Add loading states and skeleton screens
386
385
- Implement virtual scrolling for long lists