mcpField
A
adding-auth

adding-auth

github.com/revitalb-portSecurity052 installsUpdated 10w ago
Repository

About adding-auth

adding-auth is a skill for developers adding Auth.js authentication to Next.js projects. It covers configuration, routes, sign-in UI, and route protection, with an optional database adapter path.

Key features

  1. 01Install and configure Auth.js
  2. 02Set up GitHub and Google providers
  3. 03Add the authentication route handler
  4. 04Build sign-in and sign-out UI
  5. 05Protect routes with sessions
  6. 06Configure an optional database adapter

Use cases

  1. 01Add login to a Next.js app
  2. 02Set up GitHub or Google OAuth
  3. 03Check sessions and restrict route access
  4. 04Persist sessions or user records

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/revitalb-port/skills-registry-demo --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