auth-packagelisted
Install: claude install-skill mattbutlerengineering/mattbutlerengineering
# Auth Package Development Skill
This skill provides patterns for using the `@mbe/auth` package, a portable OIDC-compliant authentication layer with React hooks for frontend and a Fastify plugin for backend JWT validation.
## Package Overview
**Location**: `packages/auth/`
**Package**: `@mbe/auth`
**Auth Provider**: Auth0 (OIDC-compliant)
### Module Entry Points
| Import | Purpose |
| ------------------- | ------------------------------------- |
| `@mbe/auth` | All exports (React + Fastify + types) |
| `@mbe/auth/react` | React hooks and AuthProvider only |
| `@mbe/auth/fastify` | Fastify plugin only |
| `@mbe/auth/types` | Type definitions only |
## React Authentication
### Setting Up AuthProvider
Wrap the app with `AuthProvider` in the root component:
```typescript
import { AuthProvider } from "@mbe/auth/react";
import type { OIDCConfig } from "@mbe/auth/types";
const config: OIDCConfig = {
authority: import.meta.env.VITE_AUTH_AUTHORITY,
clientId: import.meta.env.VITE_AUTH_CLIENT_ID,
redirectUri: import.meta.env.VITE_AUTH_REDIRECT_URI,
audience: import.meta.env.VITE_AUTH_AUDIENCE,
scope: "openid profile email", // default
};
function App() {
return (
<AuthProvider config={config}>
<RouterProvider router={router} />
</AuthProvider>
);
}
```
### useAuth Hook
Primary hook for authentication state and actions:
```typescript
import { useAuth } f