pnpm add -E next-auth

pnpx auth secret

import {
  getServerSession as getNextAuthServerSession,
  NextAuthOptions,
} from "next-auth";
import GitHubProvider from "next-auth/providers/github";
// ...import any other providers or config as needed

export const authOptions: NextAuthOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID || "",
      clientSecret: process.env.GITHUB_SECRET || "",
    }),
    // ...add more providers here
  ],
  // You can choose between JWT or DB sessions
  session: { strategy: "jwt" }, // (default strategy)

  // callbacks let you customize or enrich the session
  callbacks: {
    async session({ session, token, user }) {
      // e.g. attach a "role" to the session
    //   session.user.role = user.role;
      return session;
    },
  },
  // ...more NextAuth configuration
};

// For better reusability, encapsulate the session logic in a separate hook
export const getServerSession = () => getNextAuthServerSession(authOptions);

import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

"use client";

import { useSession, signIn, signOut } from "next-auth/react";

export default function HomePage() {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <p>Loading...</p>;
  }

  if (session) {
    return (
      <div>
        <p>Signed in as {session.user?.email}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  }

  return (
    <div>
      <p>You are not signed in.</p>
      <button onClick={() => signIn("github")}>Sign in with GitHub</button>
    </div>
  );
}

import { getServerSession } from "@/lib/auth";

export default async function DashboardPage() {
  const session = await getServerSession();

  if (!session) {
    // You can redirect or throw an error
    return <div>Please sign in to access your dashboard.</div>;
  }

  return <div>Welcome to the dashboard, {session.user?.name}!</div>;
}

pnpm add -E @casl/ability @casl/react

async session({ session, user }) {
  session.user.role = user.role; 
  return session;
},

// lib/casl.ts
import { AbilityBuilder, Ability } from "@casl/ability";

export default function defineAbilitiesFor(user) {
  const { can, cannot, build } = new AbilityBuilder(Ability);

  if (user.role === "admin") {
    can("manage", "all");
  } else {
    can("read", "Post");
    can("delete", "Post", { authorId: user.id }); // Only allow deleting own posts
    cannot("delete", "Post").unless({ authorId: user.id }); // Prevent deleting others' posts
    // etc.
  }

  return build();
}

// lib/casl.ts
import { AbilityBuilder, PureAbility } from "@casl/ability";

type Actions = "manage" | "create" | "read" | "update" | "delete";
type Subjects = "Users" | "Posts" | "all"; // Example domain models

export type AppAbility = PureAbility<[Actions, Subjects]>;

export function defineAbilitiesFor(params: { role: string; userId: string }) {
  const { can, cannot, build } = new AbilityBuilder<AppAbility>(PureAbility);

  const { role } = params;

  if (role === "admin") {
    // Admin can do everything
    can("manage", "all");
  } else if (role === "editor") {
    can("read", "Posts");
    can("create", "Posts");
    can("update", "Posts");
    cannot("delete", "Posts");
  } else {
    // role === "user"
    can("read", "Posts");
    cannot("create", "Posts");
    cannot("delete", "Posts");
    // etc.
  }

  return build();
}

// lib/auth.ts
import {
  getServerSession as getNextAuthServerSession,
  NextAuthOptions,
} from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const MOCK_USER = {
  id: "1",
  name: "John Doe",
  email: "john@example.com",
  hashedPassword: "hashedPassword",
  role: "user",
};

const findUserByEmail = async (_email: string) => {
  return MOCK_USER;
};
const verifyPassword = async (_password: string, _hashedPassword: string) => {
  return true;
};

export const authOptions: NextAuthOptions = {
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error("Missing username or password");
        }

        const user = await findUserByEmail(credentials.email);
        if (!user) {
          // Remember to never leak if there's actually a user with given email, always show the end-user "Invalid password" error!
          throw new Error("User not found");
        }

        const isValid = await verifyPassword(
          credentials.password,
          user.hashedPassword
        );
        if (!isValid) {
          throw new Error("Invalid password");
        }

        // Return a "safe" user object. NextAuth will store this in JWT token
        return {
          id: user.id,
          name: user.name,
          email: user.email,
          // User role used by CASL
          role: user.role,
        };
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      // If `user` is defined, it means we're in the process of the user signing in
      if (user) {
        token.user = user;
      }
      return token;
    },
    async session({ session, token }) {
      // Add the user role to the session for CASL
      if (session.user && token) {
        session.user = token.user;
      }
      return session;
    },
  },
  // Optionally, add pages if you want custom error or signIn pages
  // pages: {
  //   signIn: '/login',
  //   error: '/login?error=CredentialsSignin', // example
  // },
};

// For better reusability, encapsulate the session logic in a separate hook
export const getServerSession = () => getNextAuthServerSession(authOptions);

/// <reference types="next-auth" />

import type { DefaultSession, DefaultUser } from "next-auth";
import type { DefaultJWT } from "next-auth/jwt";

type AppUser = DefaultUser & {
  id: string;
  name: string;
  email: string;
  role: string;
};

declare module "next-auth" {
  interface User extends AppUser {
    // Strictly override the base type "string | null | undefined" with "string"
    name: string;
    email: string;
  }

  interface Session extends DefaultSession {
    user: AppUser;
  }
}

declare module "next-auth/jwt" {
  interface JWT extends DefaultJWT {
    user: AppUser;
  }
}

import { getServerSession } from "@/lib/auth";
import { defineAbilitiesFor } from "@/lib/casl";

export default async function DashboardPage() {
  const session = await getServerSession();

  if (!session?.user) {
    return <div>Please sign in first.</div>;
  }

  const ability = defineAbilitiesFor({
    role: session.user.role,
    userId: session.user.id,
  });

  // Example usage
  const canCreatePost = ability.can("create", "Posts");

  return (
    <div>
      <h1>Welcome, {session.user.name}!</h1>
      <p>Your role: {session.user.role}</p>

      {canCreatePost ? (
        <div>Show "Create Post" button or form here.</div>
      ) : (
        <p>You do not have permission to create posts.</p>
      )}
    </div>
  );
}

"use client";

import { useSession, signIn, signOut } from "next-auth/react";
import { useState } from "react";

export default function LoginPage() {
  const { data: session, status } = useSession();
  const [credentials, setCredentials] = useState({ email: "", password: "" });

  if (status === "loading") {
    return <p>Loading...</p>;
  }

  if (session) {
    return (
      <div>
        <p>Signed in as {session.user.email}</p>
        <p>Your role is: {session.user.role}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  }

  return (
    <form>
      <label>
        Email
        <input
          type="email"
          value={credentials.email}
          onChange={(e) =>
            setCredentials({ ...credentials, email: e.target.value })
          }
        />
      </label>
      <label>
        Password
        <input
          type="password"
          value={credentials.password}
          onChange={(e) =>
            setCredentials({ ...credentials, password: e.target.value })
          }
        />
      </label>
      <button
        type="submit"
        onClick={(e) => {
          e.preventDefault();
          signIn("credentials", {
            email: credentials.email,
            password: credentials.password,
          });
        }}
      >
        Sign in
      </button>
    </form>
  );
}

// app/api/protected-resource/route.ts
import { NextResponse } from "next/server";
import { getServerSession } from "@/lib/auth";
import { defineAbilitiesFor } from "@/lib/casl";

export async function GET() {
  const session = await getServerSession();

  if (!session?.user) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  const ability = defineAbilitiesFor({
    role: session.user.role,
    userId: session.user.id,
  });

  // For example, we check if the user can "read" a "Post"
  if (!ability.can("read", "Posts")) {
    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
  }

  // Otherwise, proceed with returning the resource
  return NextResponse.json({ message: "Here is the protected data" });
}