nextjs-authentication

openssl rand -base64 32

import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";
 
export const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth({
  providers: [
    GitHub({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session({ session, token }) {
      if (token) {
        session.user.id = token.id as string;
      }
      return session;
    },
  },
  pages: {
    signIn: "/login",
    error: "/error",
  },
});

export { GET, POST } from "@/auth";

import { auth } from "@/auth";
import { NextResponse } from "next/server";
 
export default auth((req) => {
  const { nextUrl } = req;
  const isLoggedIn = !!req.auth;
  const isApiAuthRoute = nextUrl.pathname.startsWith("/api/auth");
  const isPublicRoute = ["/", "/login", "/register"].includes(nextUrl.pathname);
  const isProtectedRoute = nextUrl.pathname.startsWith("/dashboard");
 
  if (isApiAuthRoute) return NextResponse.next();
 
  if (!isLoggedIn && isProtectedRoute) {
    return NextResponse.redirect(new URL("/login", nextUrl));
  }
 
  if (isLoggedIn && nextUrl.pathname === "/login") {
    return NextResponse.redirect(new URL("/dashboard", nextUrl));
  }
 
  return NextResponse.next();
});
 
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.png$).*)"],
};

import { auth } from "@/auth";
import { redirect } from "next/navigation";
 
export default async function DashboardPage() {
  const session = await auth();
 
  if (!session) {
    redirect("/login");
  }
 
  return (
    <div>
      <h1>Welcome, {session.user.name}</h1>
    </div>
  );
}

"use server";
 
import { auth } from "@/auth";
 
export async function createTodo(formData: FormData) {
  const session = await auth();
 
  if (!session?.user) {
    throw new Error("Unauthorized");
  }
 
  // Proceed with protected action
  const title = formData.get("title") as string;
  await db.todo.create({
    data: { title, userId: session.user.id },
  });
}

// app/login/page.tsx
import { signIn } from "@/auth";
import { redirect } from "next/navigation";
 
export default function LoginPage() {
  async function handleLogin(formData: FormData) {
    "use server";
 
    const result = await signIn("credentials", {
      email: formData.get("email"),
      password: formData.get("password"),
      redirect: false,
    });
 
    if (result?.error) {
      return { error: "Invalid credentials" };
    }
 
    redirect("/dashboard");
  }
 
  return (
    <form action={handleLogin}>
      <input name="email" type="email" placeholder="Email" required />
      <input name="password" type="password" placeholder="Password" required />
      <button type="submit">Sign In</button>
    </form>
  );
}

"use client";
 
import { signOut } from "next-auth/react";
 
export function SignOutButton() {
  return <button onClick={() => signOut()}>Sign Out</button>;
}

import { auth } from "@/auth";
import { unauthorized } from "next/navigation";
 
export default async function AdminPage() {
  const session = await auth();
 
  if (session?.user?.role !== "admin") {
    unauthorized();
  }
 
  return <AdminDashboard />;
}

import { DefaultSession } from "next-auth";
 
declare module "next-auth" {
  interface Session {
    user: {
      id: string;
      role: "user" | "admin";
    } & DefaultSession["user"];
  }
 
  interface User {
    role?: "user" | "admin";
  }
}
 
declare module "next-auth/jwt" {
  interface JWT {
    id?: string;
    role?: "user" | "admin";
  }
}

// app/dashboard/page.tsx
import { auth } from "@/auth";
import { redirect } from "next/navigation";
import { getUserTodos } from "@/app/lib/data";
 
export default async function DashboardPage() {
  const session = await auth();
 
  if (!session?.user?.id) {
    redirect("/login");
  }
 
  const todos = await getUserTodos(session.user.id);
 
  return (
    <main>
      <h1>Welcome, {session.user.name}</h1>
      <p>Email: {session.user.email}</p>
      <TodoList todos={todos} />
    </main>
  );
}

// app/admin/page.tsx
import { auth } from "@/auth";
import { unauthorized } from "next/navigation";
 
export default async function AdminPage() {
  const session = await auth();
 
  if (session?.user?.role !== "admin") {
    unauthorized();
  }
 
  return (
    <main>
      <h1>Admin Panel</h1>
      <p>Welcome, administrator {session.user.name}</p>
    </main>
  );
}

// app/components/create-todo-form.tsx
"use server";
 
import { auth } from "@/auth";
import { revalidatePath } from "next/cache";
 
export async function createTodo(formData: FormData) {
  const session = await auth();
 
  if (!session?.user?.id) {
    throw new Error("Unauthorized");
  }
 
  const title = formData.get("title") as string;
 
  await db.todo.create({
    data: {
      title,
      userId: session.user.id,
    },
  });
 
  revalidatePath("/dashboard");
}
 
// Usage in component
export function CreateTodoForm() {
  return (
    <form action={createTodo}>
      <input name="title" placeholder="New todo..." required />
      <button type="submit">Add Todo</button>
    </form>
  );
}

// ❌ WRONG: Setting cookies in Server Component
export default async function Page() {
  cookies().set("key", "value"); // Won't work
}
 
// ✅ CORRECT: Use Server Action
async function setCookieAction() {
  "use server";
  cookies().set("key", "value");
}

// ❌ WRONG: Database queries in Middleware
export default auth(async (req) => {
  const user = await db.user.findUnique(); // Won't work in Edge
});
 
// ✅ CORRECT: Use only Edge-compatible APIs
export default auth(async (req) => {
  const session = req.auth; // This works
});