brainstorming
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or planning anything new, in software or out of it (a talk, a business, a renovation).
adding-authAdd authentication to a web application using NextAuth.js (Auth.js), including OAuth providers, session management, and protected routes.
Independent GitHub snapshot · Automated classification · Original documentation governs
Use this skill when the user asks to add authentication, login, sign-up, OAuth, or session management.
Install dependencies
npm install next-auth@beta
Generate an auth secret
npx auth secret
This adds AUTH_SECRET to .env.local.
Create the auth config — create auth.ts in the project root:
import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [GitHub, Google],
});
Add the route handler — create app/api/auth/[...nextauth]/route.ts:
import { handlers } from "@/auth";
export const { GET, POST } = handlers;
Add environment variables for each provider:
AUTH_SECRET=...
AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...
Add sign-in/sign-out UI — create components that call the signIn and signOut server actions, or use <Link href="/api/auth/signin">.
Protect routes — use the auth() function in server components or middleware:
import { auth } from "@/auth";
export default async function ProtectedPage() {
const session = await auth();
if (!session) redirect("/api/auth/signin");
return <div>Welcome {session.user?.name}</div>;
}
Add database adapter (optional) — if the user needs persistent sessions or user records, install a database adapter (e.g. @auth/drizzle-adapter, @auth/prisma-adapter) and configure it in the auth config.
getServerSession in getServerSideProps and useSession on the client.NEXTAUTH_URL for production deployments.