baasith6/cursor-skills/adding-auth

Add Authentication (Auth.js)

Use this skill when the user asks to add authentication, login, sign-up, OAuth, or session management.

Steps

1. Install dependencies

``bash npm install next-auth@beta ``

1. Generate an auth secret

``bash npx auth secret ``

This adds AUTH_SECRET to .env.local.

1. Create the auth config — create auth.ts in the project root:

```ts 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], }); ```

1. Add the route handler — create app/api/auth/[...nextauth]/route.ts:

``ts import { handlers } from "@/auth"; export const { GET, POST } = handlers; ``

1. Add environment variables for each provider:

`` AUTH_SECRET=... AUTH_GITHUB_ID=... AUTH_GITHUB_SECRET=... AUTH_GOOGLE_ID=... AUTH_GOOGLE_SECRET=... ``

1. Add sign-in/sign-out UI — create components that call the signIn and signOut server actions, or use <Link href="/api/auth/signin">.

1. Protect routes — use the auth() function in server components or middleware:

```ts 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>; } ```

1. 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.

Notes

• Auth.js v5 works with Next.js App Router and Server Actions natively.
• For Pages Router, use getServerSession in getServerSideProps and useSession on the client.
• Add NEXTAUTH_URL for production deployments.
• Store minimal user data in the session; fetch full profiles from the database when needed.