mcpField
A
adding-auth

adding-auth

github.com/spencerpaulyDevelopment868384 installsUpdated 12w ago
Repository

About adding-auth

A skill that guides coding agents through adding Auth.js authentication to a Next.js app, from setup and provider configuration to route protection. It also covers optional database adapters for persistent sessions or user records.

Key features

  1. 01Install and configure Auth.js
  2. 02Set up GitHub and Google providers
  3. 03Create authentication route handlers
  4. 04Add sign-in and sign-out UI
  5. 05Protect routes with session checks
  6. 06Configure optional database adapters

Use cases

  1. 01Add login and sign-up to a Next.js app
  2. 02Enable GitHub or Google OAuth
  3. 03Restrict pages to authenticated sessions
  4. 04Persist sessions or user records with an adapter

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill adding-auth

After installing, type/adding-authin Claude Code to confirm it loaded.

Details

From the project README

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

    npm install next-auth@beta

  2. Generate an auth secret

    npx auth secret

    This adds AUTH_SECRET to .env.local.

  3. 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],
});

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

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

  5. Add environment variables for each provider:

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

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

  7. 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>;
}

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

Comments

Markdown supported