skills/asmayaseen/configuring-better-auth/SKILL.md
Implement OAuth 2.1 / OIDC authentication using Better Auth with MCP assistance. Use when setting up a centralized auth server (SSO provider), implementing SSO clients in Next.js apps, configuring PKCE flows, or managing tokens with JWKS verification. Uses Better Auth MCP for guided setup. NOT when using simple session-only auth without OAuth/OIDC requirements.
npx skillsauth add aiskillstore/marketplace configuring-better-authInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Implement centralized authentication with Better Auth - either as an auth server or SSO client.
Better Auth provides an MCP server powered by Chonkie for guided configuration:
claude mcp add --transport http better-auth https://mcp.chonkie.ai/better-auth/better-auth-builder/mcp
Or in settings.json:
{
"mcpServers": {
"better-auth": {
"type": "http",
"url": "https://mcp.chonkie.ai/better-auth/better-auth-builder/mcp"
}
}
}
| Task | Use MCP? | |------|----------| | Initial Better Auth setup | Yes - guided configuration | | Adding OIDC provider plugin | Yes - generates correct config | | Troubleshooting auth issues | Yes - can analyze setup | | Understanding auth flow | Yes - explains concepts | | Writing custom middleware | No - use patterns below |
┌─────────────────┐
│ Better Auth SSO │ ← Central auth server (auth-server-setup.md)
│ (Auth Server) │
└────────┬────────┘
│
┌────┴────┐
▼ ▼
┌───────┐ ┌───────┐
│ App 1 │ │ App 2 │ ← SSO clients (sso-client-integration.md)
└───────┘ └───────┘
npm install better-auth @better-auth/oidc-provider drizzle-orm
// src/lib/auth.ts
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { oidcProvider } from "better-auth/plugins/oidc-provider";
export const auth = betterAuth({
database: drizzleAdapter(db, { provider: "pg", schema }),
emailAndPassword: { enabled: true },
session: {
expiresIn: 60 * 60 * 24 * 7, // 7 days
updateAge: 60 * 60 * 24, // 1 day
},
plugins: [
oidcProvider({
loginPage: "/sign-in",
consentPage: "/consent",
// PKCE for public clients (recommended)
requirePKCE: true,
}),
],
});
// Register SSO client
await auth.api.createOAuthClient({
name: "My App",
redirectUris: ["http://localhost:3000/api/auth/callback"],
type: "public", // Use 'public' for PKCE
});
See references/auth-server-setup.md for complete setup with JWKS, email verification, and admin dashboard.
npm install jose
NEXT_PUBLIC_SSO_URL=http://localhost:3001
NEXT_PUBLIC_SSO_CLIENT_ID=your-client-id
// lib/auth-client.ts
import { generateCodeVerifier, generateCodeChallenge } from "./pkce";
export async function startLogin() {
const verifier = generateCodeVerifier();
const challenge = await generateCodeChallenge(verifier);
// Store verifier in cookie
document.cookie = `pkce_verifier=${verifier}; path=/; SameSite=Lax`;
const params = new URLSearchParams({
client_id: process.env.NEXT_PUBLIC_SSO_CLIENT_ID!,
redirect_uri: `${window.location.origin}/api/auth/callback`,
response_type: "code",
scope: "openid profile email",
code_challenge: challenge,
code_challenge_method: "S256",
});
window.location.href = `${SSO_URL}/oauth2/authorize?${params}`;
}
// app/api/auth/callback/route.ts
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const code = searchParams.get("code");
const verifier = cookies().get("pkce_verifier")?.value;
const response = await fetch(`${SSO_URL}/oauth2/token`, {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({
grant_type: "authorization_code",
client_id: process.env.NEXT_PUBLIC_SSO_CLIENT_ID!,
code: code!,
redirect_uri: `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback`,
code_verifier: verifier!,
}),
});
const tokens = await response.json();
// Set httpOnly cookies
const res = NextResponse.redirect("/dashboard");
res.cookies.set("access_token", tokens.access_token, { httpOnly: true });
res.cookies.set("refresh_token", tokens.refresh_token, { httpOnly: true });
return res;
}
See references/sso-client-integration.md for JWKS verification, token refresh, and global logout.
// lib/pkce.ts
export function generateCodeVerifier(): string {
const array = new Uint8Array(32);
crypto.getRandomValues(array);
return base64UrlEncode(array);
}
export async function generateCodeChallenge(verifier: string): Promise<string> {
const encoder = new TextEncoder();
const data = encoder.encode(verifier);
const hash = await crypto.subtle.digest("SHA-256", data);
return base64UrlEncode(new Uint8Array(hash));
}
function base64UrlEncode(buffer: Uint8Array): string {
return btoa(String.fromCharCode(...buffer))
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/, "");
}
async function refreshTokens() {
const response = await fetch(`${SSO_URL}/oauth2/token`, {
method: "POST",
body: new URLSearchParams({
grant_type: "refresh_token",
client_id: process.env.NEXT_PUBLIC_SSO_CLIENT_ID!,
refresh_token: currentRefreshToken,
}),
});
return response.json();
}
import { createRemoteJWKSet, jwtVerify } from "jose";
const JWKS = createRemoteJWKSet(
new URL(`${SSO_URL}/.well-known/jwks.json`)
);
export async function verifyAccessToken(token: string) {
const { payload } = await jwtVerify(token, JWKS, {
issuer: SSO_URL,
audience: process.env.NEXT_PUBLIC_SSO_CLIENT_ID,
});
return payload;
}
// Logout from all apps
const logoutUrl = new URL(`${SSO_URL}/oauth2/logout`);
logoutUrl.searchParams.set("post_logout_redirect_uri", window.location.origin);
window.location.href = logoutUrl.toString();
| Issue | Solution | |-------|----------| | PKCE verifier lost after redirect | Store in httpOnly cookie before redirect | | Token in localStorage | Use httpOnly cookies instead | | JWKS fetch fails | Check CORS on auth server | | Consent screen loops | Ensure consent page saves decision |
Run: python3 scripts/verify.py
Expected: ✓ configuring-better-auth skill ready
development
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
tools
Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.
testing
Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.
tools
GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.