src/
└── app/
    └── api/
        └── auth/
            └── route.ts

npx create-next-app@latest

What is your project named? cookies-samples
Would you like to use TypeScript? - Yes
Would you like to use ESLint? - Yes
Would you like to use Tailwind CSS? - Yes
Would you like your code inside a `src/` directory? - Yes
Would you like to use App Router? (recommended) - Yes
Would you like to use Turbopack for `next dev`? - No

# JWT verify and generation
npm i jose

# For JWE
npm i bcrypt

# Schema and type verification
npm i zod

  ├── api
  ├── dashboard
  ├── login
  ├── globals.css
  └── layout.tsx

"use client";
...

const LoginForm = () => {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <form className="space-y-6">
      <div>
        <label
          htmlFor="email"
          className="block text-sm font-medium text-gray-700 mb-1"
        >
          {"Email Address"}
        </label>
        <div className="relative">
          <input
            id="email"
            name="email"
            type="email"
            className="input"
            placeholder="[email protected]"
            required
          />
          <Mail className="icon" size={18} />
        </div>
      </div>
      <div>
        <label
          htmlFor="password"
          className="block text-sm font-medium text-gray-700 mb-1"
        >
          {"Password"}
        </label>
        <div className="relative">
          <input
            id="password"
            name="password"
            type={showPassword ? "text" : "password"}
            className="input"
            placeholder="••••••••"
            required
          />
          <Lock className="icon" size={18} />
          <button
            type="button"
            onClick={() => setShowPassword((prev) => !prev)}
            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
          >
            {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
          </button>
        </div>
      </div>
      <div>
        <button type="submit" className="button">
          {"Sign In"}
          <ChevronRight className="ml-2" size={18} />
        </button>
      </div>
    </form>
  );
};

export default LoginForm;

"use client";

import React, { useActionState, useState } from "react";


const LoginForm = () => {
  const [showPassword, setShowPassword] = useState(false);
  const [state, action, pending] = useActionState(()=>{}, undefined);

  return (
    <form action={action} className="space-y-6">
...

export type FormState = {
  errors?: {
    email?: string | string[]; //for zod errors return array
    password?: string | string[];
  };
  message?: string;
};

export async function submitFunk(
  _prevState: FormState,
  formData: FormData
): Promise<FormState> {
  const res = await fetch("/api/auth", {
    method: "POST",
    body: formData,
  });

  if (res.ok) {
    return await res.json();
  } else {
    return {
      errors: { email: "500 - Server Error" },
    };
  }
}

...
const LoginForm = () => {
  const [showPassword, setShowPassword] = useState(false);

  /**
   * We are directly using the submitFunk function inside useActionState
   */
  const [state, action, pending] = useActionState(submitFunk, {
    errors: {
      email: "",
      password: "",
    },
    message: "",
  });

  return (
    <form action={action} className="space-y-6">
      <div>
        <label
          htmlFor="email"
          className="block text-sm font-medium text-gray-700 mb-1"
        >
          {"Email Address"}
        </label>
        <div className="relative">
          <input
            id="email"
            name="email"
            type="email"
            className="input"
            placeholder="[email protected]"
            required
          />
          <Mail className="icon" size={18} />
        </div>

        {/* If there's an email error message, we display it below the email input */}
        {state?.errors?.email && (
          <p className="text-red-500 text-sm mt-1">{state.errors.email}</p>
        )}
      </div>
      <div>
        <label
          htmlFor="password"
          className="block text-sm font-medium text-gray-700 mb-1"
        >
          {"Password"}
        </label>
        <div className="relative">
          <input
            id="password"
            name="password"
            type={showPassword ? "text" : "password"}
            className="input"
            placeholder="••••••••"
            required
          />
          <Lock className="icon" size={18} />
          <button
            type="button"
            onClick={() => setShowPassword((prev) => !prev)}
            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
          >
            {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
          </button>
        </div>

        {/* If there's a password error message, we display it below the password input */}
        {state?.errors?.password && (
          <p className="text-red-500 text-sm mt-1">{state.errors.password}</p>
        )}
      </div>

             {/* If there's a message, we display it above the submit button
             We set this up to show when the API endpoint indicates success */}
      {state!.message && (
        <p className="text-sm text-green-500">{state.message}</p>
      )}
      <div>
        <button aria-disabled={pending} type="submit" className="button mt-20">
          {pending ? (
            <>
              {"Submitting..."}
              <Loader className="ml-2" size={18} />
            </>
          ) : (
            <>
              {"Login"}
              <ChevronRight className="ml-2" size={18} />
            </>
          )}
        </button>
      </div>
    </form>
  );
};

export default LoginForm;

...
      )}
      <div>
        {/* We are adding the newly created SubmitButton component to the submit button section of the form */}
        <SubmitButton />
      </div>
    </form>
  );
};

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button aria-disabled={pending} type="submit" className="button">
      {pending ? (
        <>
          {"Submitting..."}
          <Loader className="ml-2" size={18} />
        </>
      ) : (
        <>
          {"Sign In"}
          <ChevronRight className="ml-2" size={18} />
        </>
      )}
    </button>
  );
}
...

...
// Route handler for POST requests
export async function POST(request: Request) {
  try {
    const data = await request.formData();
    const errorMessage = {
      email: "Invalid password or email",
      password: "Invalid password or email",
    };

    // Validate incoming data with Zod
    const parsedData = loginSchema.safeParse({
      email: data.get("email"),
      password: data.get("password"),
    });
    if (!parsedData.success) {
      return NextResponse.json(
        {
          errors: parsedData.error.flatten().fieldErrors,
        },
        { status: 401 }
      );
    }
...

import { z } from "zod";

export const loginSchema = z.object({
  email: z.string().email({ message: "Please enter a valid email address." }),
  password: z
    .string()
    .min(6, { message: "Please enter a valid password." })
});

export type loginType = z.infer<typeof loginSchema>;

...
  // Find the user in the database
   const user = mockUsers.find((u) => u.email === parsedData.data.email);

    if (!user) {
      return NextResponse.json({ errors: errorMessage }, { status: 401 });
    }

    // Validate the password
    const passwordMatch = await bcrypt.compare(
      parsedData.data.password,
      user.passwordHash
    );
    if (!passwordMatch) {
      return NextResponse.json({ errors: errorMessage }, { status: 401 });
    }

    const secret = process.env.JWT_SECRET;
    if (!secret) {
      console.error("Configuration error: JWT Secret is missing.");
      return NextResponse.json({ error: "Server error" }, { status: 500 });
    }

    // Create JWT token
    const secretKey = new TextEncoder().encode(secret);
    const token = await new SignJWT({ id: user.id })
      .setProtectedHeader({ alg: "HS256" })
      .setExpirationTime("1h") // Token validity period
      .sign(secretKey);

    const production = process.env.VERCEL_ENV === "production";
    
    // Set the JWT token as an HttpOnly cookie
    const response = NextResponse.json({ message: "Login successful" });
    const cookiesStore = await cookies();
    cookiesStore.set("token", token, {
      httpOnly: true,
      secure: production,
      sameSite: "strict",
      maxAge: 3500,
      path: "/",
    });

    // Return the response
    return response;
  } catch (error) {
    console.error(error);
    return NextResponse.json({ error: "Server error" }, { status: 500 });
  }
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: process.env.VERCEL_ENV !== "production",
  async redirects() {
    return [
      {
        source: "/",
        destination: "/login",
        permanent: true,
      },
    ];
  },
};

export default nextConfig;

"use server";
...

export async function submitAction(
  _prevState: FormState,
  formData: FormData
): Promise<FormState> {
  try {
    const errorMessage = {
      email: "Invalid password or email",
      password: "Invalid password or email",
    };

    const parsedData = loginSchema.safeParse({
      email: formData.get("email"),
      password: formData.get("password"),
    });
    if (!parsedData.success) {
      return { errors: parsedData.error.flatten().fieldErrors };
    }

    const user = mockUsers.find((u) => u.email === parsedData.data.email);

    if (!user) {
      return { errors: errorMessage };
    }

    const passwordMatch = await bcrypt.compare(
      parsedData.data.password,
      user.passwordHash
    );

    if (!passwordMatch) {
      return { errors: errorMessage };
    }

    const secret = process.env.JWT_SECRET;
    if (!secret) {
      console.error("Configuration error: JWT Secret is missing.");
      return { errors: { email: "Server error" } };
    }
    const secretKey = new TextEncoder().encode(secret);

    const token = await new SignJWT({ id: user.id })
      .setProtectedHeader({ alg: "HS256" })
      .setExpirationTime("155secs")
      .sign(secretKey);

    const production = process.env.VERCEL_ENV === "production";

    const cookiesStore = await cookies();
    cookiesStore.set("token", token, {
      httpOnly: true,
      secure: production,
      sameSite: "strict",
      maxAge: 150,
    });

    return { message: "Login successful" };
  } catch (error) {
    console.error(error);
    return { errors: { email: "Server error" } };
  }
}

"use client";

...
const LoginForm = () => {
  const [showPassword, setShowPassword] = useState(false);

  const [state, action] = useActionState(submitAction, {
    errors: {
      email: "",
      password: "",
    },
    message: "",
  });

  return (
    <form action={action} className="space-y-6">
      <div>
...

├── actions
├── api
├── dashboard
│   ├── admin
│   │   └── page.tsx
│   ├── customer
│   │   └── page.tsx
│   └── layout.tsx
├── layout.tsx
└── login
    └── page.tsx

import { jwtVerify } from "jose";
import { cookies } from "next/headers";
const secretKey = new TextEncoder().encode(process.env.JWT_SECRET);

export async function verifySession() {
  const cookiesStore = await cookies();
  const token = cookiesStore.get("token");
  if (!token) {
    return false;
  }
  const { payload } = await jwtVerify(token.value, secretKey);

  if (!payload?.id) {
    return false;
  }
  
  //Eğer çerezdeki token doğrulanmışsa payload'ını dönüyoruz
  return payload;
}

import { NextRequest, NextResponse } from "next/server";
import { verifySession } from "./app/actions/utils";

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const loginRes = NextResponse.redirect(new URL("/login", req.nextUrl));

  if (req.nextUrl.pathname === "/dashboard") {
    const verify = await verifySession();
    if (!verify) {
      return loginRes;
    }
  }
  return res;
}

import { useRouter } from "next/navigation";

const LoginForm = () => {
  const [showPassword, setShowPassword] = useState(false);
  const router = useRouter();
  const [state, action] = useActionState(submitAction, {
    errors: {
      email: "",
      password: "",
    },
    message: "",
  } as FormState);

  useEffect(() => {
    // If there are no errors
    // and the message is equal to the success message returned from the server
    if (!state.errors && state.message === "Login successful")
      router.push("/dashboard");
  }, [state]);
...

...
export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const loginRes = NextResponse.redirect(new URL("/login", req.nextUrl));

  if (req.nextUrl.pathname === "/dashboard") {
    const verify = await verifySession();
    if (!verify) {
      return loginRes;
    }
    const user = mockUsers.find((u) => u.id === verify.id);
    if (!user) {
      return loginRes;
    }
    if (user!.admin) {
      console.log("Redirected to admin page.");
      return NextResponse.redirect(new URL("/dashboard/admin", req.nextUrl));
    } else {
      console.log("Redirected to customer page.");
      return NextResponse.redirect(new URL("/dashboard/customer", req.nextUrl));
    }
  }
  return res;
}

...
export default async function Layout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const key = process.env.JWT_SECRET;
  const secretKey = new TextEncoder().encode(key);
  const cookiesStore = await cookies();
  const token = cookiesStore.get("token")?.value;
  let user = null;
  if (!token) {
    redirect("/login");
  }
  const { payload } = await jwtVerify(token!, secretKey);
  if (payload.id) {
    /**
     * Take the id of the user from JWT
     * Make DB query with this id for user role
     */
    user = mockUsers.find((u) => u.id === payload.id);
    return (
      <>
        <Navbar username={user?.name || ""} isAdmin={user?.admin || false} />
        {children}
      </>
    );
  }
  redirect("/login");
}

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const loginRes = NextResponse.redirect(new URL("/login", req.nextUrl));

  if (req.nextUrl.pathname === "/dashboard") {
    const verify = await verifySession();
    if (!verify) {
      return loginRes;
    }
  }
  return res;
}

...
import { AdminPage, CustomerPage } from "@/components"

export default async function DashboardPage() {
  const key = process.env.JWT_SECRET;
  const secretKey = new TextEncoder().encode(key);
  const cookiesStore = await cookies();
  const token = cookiesStore.get("token")?.value;
  
  if (!token) {
    redirect("/login");
  }
  
  const { payload } = await jwtVerify(token!, secretKey);
  const user = mockUsers.find((u) => u.id === payload.id);

  if (!user) {
    redirect("/login");
  }

  return (
    <>
      {user?.admin ? <AdminPage /> : <CustomerPage />}
    </>
  );
}

./src/app
├── actions
├── dashboard
│   ├── layout.tsx
│   └── page.tsx
├── layout.tsx
└── login
    └── page.tsx

...
export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const loginRes = NextResponse.redirect(new URL("/login", req.nextUrl));
  const pathName = req.nextUrl.pathname;

  if (pathName === "/login") {
    const session = await verifySession();
    if (session) {
      return NextResponse.redirect(new URL("/dashboard", req.nextUrl));
    }
    // If session is not valid, continue to login page
    return res;
  }
...

...
import { redirect } from "next/navigation";
...
export const logout = async () => {
  const cookiesStore = await cookies();
  cookiesStore.delete("token");
  redirect("/login");
};

...
 if (pathName === "/dashboard") {
    const verify = await verifySession();
    if (!verify) {
      if (req.method === "POST") {
        return new NextResponse(
          JSON.stringify({ message: "POST is not allowed" }),
          {
            status: 405, // 405 Method Not Allowed
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
      }
      return loginRes;
    }
  }
...

...
const res = NextResponse.next();
...
if (pathName === "/dashboard") {
    const verify = await verifySession();
    if (!verify) {
      if (req.method === "POST" && req.headers.get("next-action")) {
        return res;
      }
      return loginRes;
    }
  }
...

"use server";
...
import { redirect } from "next/navigation";
...
export async function getWeatherData(
  city: WeatherInpType
): Promise<WeatherData | null> {
  const verify = await verifySession();
  if (!verify) {
    redirect("/login");
  }
...