plugins/aai-stack-auth0/skills/auth0-nextjs/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/the-answerai/alphaagent-team/blob/main/plugins/aai-stack-auth0/skills/auth0-nextjs/SKILL.md -a claude-code --skill auth0-nextjsInstallation paths:
.claude/skills/auth0-nextjs/# Auth0 Next.js Skill
Patterns for integrating Auth0 with Next.js applications.
## Setup
### Installation
```bash
npm install @auth0/nextjs-auth0
```
### Configuration
```typescript
// .env.local
AUTH0_SECRET=use-openssl-rand-base64-32
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id
AUTH0_CLIENT_SECRET=your-client-secret
AUTH0_AUDIENCE=your-api-audience # Optional
```
### API Route Handler
```typescript
// app/api/auth/[auth0]/route.ts
import { handleAuth } from '@auth0/nextjs-auth0'
export const GET = handleAuth()
// With custom handlers
export const GET = handleAuth({
login: handleLogin({
authorizationParams: {
audience: process.env.AUTH0_AUDIENCE,
scope: 'openid profile email',
},
returnTo: '/dashboard',
}),
callback: handleCallback({
afterCallback: async (req, session) => {
// Custom logic after login
await createUserIfNotExists(session.user)
return session
},
}),
logout: handleLogout({
returnTo: '/',
}),
})
```
## Client-Side Auth
### UserProvider
```tsx
// app/layout.tsx
import { UserProvider } from '@auth0/nextjs-auth0/client'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<UserProvider>{children}</UserProvider>
</body>
</html>
)
}
```
### useUser Hook
```tsx
'use client'
import { useUser } from '@auth0/nextjs-auth0/client'
export default function Profile() {
const { user, error, isLoading } = useUser()
if (isLoading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
if (!user) {
return (
<div>
<a href="/api/auth/login">Login</a>
</div>
)
}
return (
<div>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
<a href="/api/auth/logout">Logout</a>
</div>
)
}
```
### P