Agent skill
mern-add-auth
Add authentication to a MERN project using NextAuth.js with OAuth and/or credentials.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/mern-add-auth
SKILL.md
Purpose
Add secure authentication to an existing MERN project using NextAuth.js (Auth.js).
Arguments
--providers <list>— Comma-separated providers (default:google,github)- Options:
google,github,discord,credentials
- Options:
--with-user-model— Create User model in MongoDB for storing user data
What gets created
apps/web/
├── app/api/auth/[...nextauth]/route.ts # NextAuth API route
├── src/lib/auth.ts # Auth config + providers
├── src/lib/auth-client.ts # Client-side helpers
├── src/components/auth/
│ ├── SignInButton.tsx # OAuth sign-in
│ ├── SignOutButton.tsx # Sign-out
│ └── UserMenu.tsx # User avatar + dropdown
├── src/server/db/models/user.ts # (if --with-user-model)
└── middleware.ts # Route protection
packages/shared/schemas/
└── user.ts # User schemas
.env.example # Updated with auth vars
Environment variables required
# OAuth (per provider)
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET= # Generate with: openssl rand -base64 32
Workflow
- Install dependencies:
next-auth,@auth/mongodb-adapter(if using DB) - Create auth config with selected providers
- Create API route handler
- Create auth components
- Create middleware for protected routes
- Update env.ts schema with auth variables
- Create User model (if --with-user-model)
- Add session provider to app layout
- Run tests to verify
Protected routes
Middleware protects routes matching these patterns by default:
/dashboard/*/settings/*/api/*(except/api/auth/*and/api/health)
Customize in middleware.ts.
Usage patterns
Server Component
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
const session = await getServerSession(authOptions);
if (!session) redirect('/api/auth/signin');
Client Component
'use client';
import { useSession } from 'next-auth/react';
const { data: session, status } = useSession();
API Route
const session = await getServerSession(authOptions);
if (!session?.user?.id) {
return NextResponse.json(err('UNAUTHORIZED', 'Authentication required'), { status: 401 });
}
Output
Summarize: providers configured, environment variables needed, protected routes, components available.
Reference
For templates and OAuth setup guides, see reference/mern-add-auth-reference.md
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?