update

.node-version

@@ -1 +1 @@
-18.18.0
+18.18.2

CONTRIBUTING.md

@@ -12,15 +12,18 @@ corepack enable
 pnpm install
 ```
 
-Optionally, you might also want to install Deno or Bun if you are working on
-their examples.
-
 ## Development
 
 ```sh
 pnpm dev
 ```
 
+## Tests
+
+```sh
+pnpm test
+```
+
 ## Submitting a Contribution
 
 1. Fork the repository

TODO

@@ -4,23 +4,22 @@ Examples:
   ✔ Add explanations/fix examples basic @done(23-11-17 16:33)
   ✔ showcase swr example in first @done(23-11-17 17:08)
   ✔ Link to GitHub in homepage @done(23-11-17 17:12)
-  ☐ remove merging options, let's rollback with previous code and discuss with community to add it back for the right reasons/usecase
+  ✔ remove merging options, let's rollback with previous code and discuss with community to add it back for the right reasons/usecase @done(23-11-19 23:50)
   ✔ Merge both getIronSession APIs @done(23-11-18 15:17)
   ☐ Deploy the website
-  ☐ refactor the code to share more code between cookies() and req/res
-  ☐ <details> in readme to show how to have req.session
-  ☐ Link to code in all examples
+  ✘ refactor the code to share more code between cookies() and req/res @cancelled(23-11-19 23:50)
+  ✘ <details> in readme to show how to have req.session @cancelled(23-11-19 23:50)
+  ✔ Link to code in all examples @done(23-11-20 00:07)
   ☐ Merge to main
   ☐ Release
   ☐ Move all remaining confirmed work to a single issue
     ☐ add default data option?
-    ☐ change action to session (POST, GET, DELETE) in app-router-client-component-redirect-route-handler-fetch, as swr
-    ☐ eslint unused variables
-    ☐ eslint imports reorder
-    ☐ why do we need export interface CookieStore?
-    ☐ what are mergeHeaders, createResponse?? why do we need them here?
-    ☐ why do we need OverridableOptions??
-  ☐ Add blurb about the technique, as previously done
+    ✔ change action to session (POST, GET, DELETE) in app-router-client-component-redirect-route-handler-fetch, as swr @done(23-11-20 00:09)
+    ☐ eslint setup doesn't seem to work well (unused variables, imports reorder, ..)
+    ✔ why do we need export interface CookieStore? @done(23-11-20 00:09)
+    ✔ what are mergeHeaders, createResponse?? why do we need them here? @done(23-11-20 00:09)
+    ✔ why do we need OverridableOptions?? @done(23-11-20 00:09)
+  ✔ Add blurb about the technique, as previously done @done(23-11-20 00:09)
   ☐ Check Notion page
   ☐ Make preview deployment working
 

examples/next/package.json

@@ -10,19 +10,19 @@
   },
   "dependencies": {
     "iron-session": "workspace:*",
-    "next": "14.0.2",
+    "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
     "swr": "^2.2.4"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
-    "@types/node": "^18",
+    "@types/node": "18.18.10",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.2",
+    "eslint": "^8.54.0",
+    "eslint-config-next": "14.0.3",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"

examples/next/src/app/app-router-client-component-redirect-route-handler-fetch/[action]/route.ts

@@ -5,12 +5,12 @@ import { defaultSession, sessionOptions } from "../lib";
 import { redirect } from "next/navigation";
 import { sleep, SessionData } from "../lib";
 
-// /app-router-client-component-redirect-route-handler-fetch/login
+// /app-router-client-component-redirect-route-handler-fetch/session
 export async function POST(
   request: NextRequest,
   { params }: { params: { action: string } },
 ) {
-  if (params.action !== "login") {
+  if (params.action !== "session") {
     return new Response("Unknown path", { status: 404 });
   }
 

examples/next/src/app/app-router-client-component-redirect-route-handler-fetch/form.tsx

@@ -40,7 +40,7 @@ export function Form() {
 function LoginForm() {
   return (
     <form
-      action="/app-router-client-component-redirect-route-handler-fetch/login"
+      action="/app-router-client-component-redirect-route-handler-fetch/session"
       method="POST"
       className={css.form}
     >

examples/next/src/app/app-router-client-component-redirect-route-handler-fetch/page.tsx

@@ -3,32 +3,24 @@ import * as css from "@/app/css";
 
 import { Metadata } from "next";
 import { Form } from "./form";
+import { Title } from "../title";
+import { GetTheCode } from "../get-the-code";
 
 export const metadata: Metadata = {
   title:
-    "🔐 iron-session examples: App router using client components, redirects, route handlers and fetch",
+    "🛠 iron-session examples: Client components, route handlers, redirects and fetch",
 };
 
 export default function AppRouterRedirect() {
   return (
     <main className="p-10 space-y-5">
-      <div>
-        <h1 className="text-2xl">
-          🔐{" "}
-          <Link className={css.link} href="/">
-            iron-session
-          </Link>{" "}
-          examples: App router{" "}
-        </h1>
-        <h2 className="text-xl text-gray-500">
-          + client components, route handlers, redirects, and fetch
-        </h2>
-      </div>
+      <Title subtitle="+ client components, route handlers, redirects, and fetch" />
 
       <div className="grid grid-cols-1 gap-4 p-10 border border-gray-500 rounded-md max-w-xl">
         <Form />
       </div>
 
+      <GetTheCode path="app/app-router-client-component-redirect-route-handler-fetch" />
       <HowItWorks />
 
       <p>
@@ -48,9 +40,9 @@ function HowItWorks() {
       <ol className="list-decimal list-inside">
         <li>
           The form is submitted to
-          /app-router-client-component-redirect-route-handler-fetch/login (route
-          handler) via a POST call (non-fetch). The route handler sets the
-          session data and redirects back to /app-router (this page).
+          /app-router-client-component-redirect-route-handler-fetch/session
+          (route handler) via a POST call (non-fetch). The route handler sets
+          the session data and redirects back to /app-router (this page).
         </li>
         <li>
           The page gets the session data via a fetch call to

examples/next/src/app/app-router-client-component-route-handler-swr/page.tsx

@@ -4,10 +4,10 @@ import * as css from "@/app/css";
 import { Metadata } from "next";
 import { Form } from "./form";
 import { Title } from "@/app/title";
+import { GetTheCode } from "../get-the-code";
 
 export const metadata: Metadata = {
-  title:
-    "🔐 iron-session examples: App router using client components, redirects, route handlers and fetch",
+  title: "🛠 iron-session examples: Client components, route handlers and swr",
 };
 
 export default function AppRouterRedirect() {
@@ -70,6 +70,7 @@ export default function AppRouterRedirect() {
         </div>
       </div>
 
+      <GetTheCode path="app/app-router-client-component-route-handler-swr" />
       <HowItWorks />
 
       <p>

examples/next/src/app/app-router-client-component-route-handler-swr/session/route.ts

@@ -4,6 +4,7 @@ import { getIronSession } from "iron-session";
 import { defaultSession, sessionOptions } from "../lib";
 import { sleep, SessionData } from "../lib";
 
+// login
 export async function POST(request: NextRequest) {
   const session = await getIronSession<SessionData>(cookies(), sessionOptions);
 
@@ -21,6 +22,7 @@ export async function POST(request: NextRequest) {
   return Response.json(session);
 }
 
+// read session
 export async function GET() {
   const session = await getIronSession<SessionData>(cookies(), sessionOptions);
 
@@ -34,6 +36,7 @@ export async function GET() {
   return Response.json(session);
 }
 
+// logout
 export async function DELETE() {
   const session = await getIronSession<SessionData>(cookies(), sessionOptions);
 

examples/next/src/app/app-router-server-component-and-action/page.tsx

@@ -4,33 +4,25 @@ import { Metadata } from "next";
 import { Form } from "./form";
 import { Suspense } from "react";
 import * as css from "@/app/css";
+import { Title } from "../title";
+import { GetTheCode } from "../get-the-code";
 
 export const metadata: Metadata = {
-  title: "🔐 iron-session examples: App router and server actions",
+  title: "🛠 iron-session examples: Server components, and server actions",
 };
 
 export default async function AppRouter() {
   return (
     <main className="p-10 space-y-5">
-      <div>
-        <h1 className="text-2xl">
-          🔐{" "}
-          <Link className={css.link} href="/">
-            iron-session
-          </Link>{" "}
-          examples: App router{" "}
-        </h1>
-        <h2 className="text-xl text-gray-500">
-          + server components, and server actions
-        </h2>
-      </div>
+      <Title subtitle="+ server components, and server actions" />
 
       <div className="grid grid-cols-1 gap-4 p-10 border border-gray-500 rounded-md max-w-xl">
         <Suspense fallback={<p className="text-lg">Loading...</p>}>
           <Form />
         </Suspense>
       </div>
 
+      <GetTheCode path="app/app-router-server-component-and-action" />
       <HowItWorks />
 
       <p>

examples/next/src/app/get-the-code.tsx

@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+export function GetTheCode({ path }: { path: string }) {
+  return (
+    <div className="flex items-center gap-2 text-md">
+      <Image src="/github-mark.svg" alt="GitHub Logo" width={20} height={20} />{" "}
+      <a
+        href={`https://github.com/vvo/iron-session/tree/main/examples/next/src/${path}`}
+        target="_blank"
+        className="text-gray-700 underline hover:no-underline"
+      >
+        Get the code for this example
+      </a>
+    </div>
+  );
+}

examples/next/src/app/layout.tsx

@@ -5,7 +5,7 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "🔐 iron-session examples",
+  title: "🛠 iron-session examples",
   description: "Set of examples for iron-session",
 };
 

examples/next/src/app/page.tsx

@@ -1,6 +1,5 @@
 import Link from "next/link";
 import * as css from "@/app/css";
-import Image from "next/image";
 import { Title } from "./title";
 
 export default function Home() {
@@ -43,9 +42,12 @@ export default function Home() {
             App router + client components, route handlers, redirects, and fetch
           </Link>
         </li>
-        <li>Pages + API routes, redirects, and fetch (Help needed!)</li>
-        <li>Pages + API routes, and swr (Help needed!)</li>
-        <li>Pages + getServerSideProps, and redirects (Help needed!)</li>
+        <li>OAuth login example (swr) (Help needed)</li>
+        <li>Pages + API routes, redirects, and fetch (Help needed)</li>
+        <li>Pages + API routes, and swr (Help needed)</li>
+        <li>Pages + getServerSideProps, and redirects (Help needed)</li>
+        <li>Magic links (Help needed)</li>
+        <li>req.session wrappers (Help needed)</li>
       </ul>
     </main>
   );

examples/next/src/app/title.tsx

@@ -14,7 +14,7 @@ export function Title({
       <h1>
         <div className="flex items-center gap-2">
           <div className="text-2xl">
-            🔐{" "}
+            🛠{" "}
             <Link className={css.link} href="/">
               iron-session
             </Link>{" "}

package.json

@@ -53,12 +53,12 @@
   "devDependencies": {
     "@release-it/conventional-changelog": "8.0.1",
     "@types/cookie": "0.5.4",
-    "@types/node": "20.9.0",
+    "@types/node": "18.18.10",
     "@typescript-eslint/eslint-plugin": "6.11.0",
     "@typescript-eslint/parser": "6.11.0",
     "c8": "8.0.1",
     "concurrently": "8.2.2",
-    "eslint": "8.53.0",
+    "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-node": "0.3.9",
     "eslint-import-resolver-typescript": "3.6.1",
@@ -68,11 +68,11 @@
     "prettier-plugin-packagejson": "2.4.6",
     "publint": "0.2.5",
     "release-it": "17.0.0",
-    "tsup": "7.2.0",
-    "tsx": "4.1.2",
+    "tsup": "8.0.0",
+    "tsx": "4.1.4",
     "typescript": "5.2.2"
   },
-  "packageManager": "[email protected].2",
+  "packageManager": "[email protected].5",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"