feat(auth): implement user authentication with JWT and NextAuth

- Added user registration and login functionality with JWT authentication.
- Created auth controller, service, and module in the backend.
- Implemented user model and user products management.
- Integrated NextAuth for session management on the frontend.
- Added middleware for protecting routes and handling public access.
- Updated frontend API routes to include authorization headers.
- Enhanced recipe and user product models to support ownership and visibility.
- Created registration and login pages in the frontend.
- Added necessary types for NextAuth session management.

frontend/app/Navigation.tsx

@@ -1,6 +1,20 @@
 import Link from 'next/link';
+import { auth, signOut } from '../auth';
+
+const linkStyle: React.CSSProperties = {
+  padding: '0.5rem 0.75rem',
+  background: '#fff',
+  border: '1px solid #ddd',
+  borderRadius: '4px',
+  textDecoration: 'none',
+  color: '#0070f3',
+  fontSize: '0.9rem',
+  fontWeight: 500,
+};
+
+export default async function Navigation() {
+  const session = await auth();
 
-export default function Navigation() {
   return (
     <nav
       style={{
@@ -14,111 +28,40 @@ export default function Navigation() {
         alignItems: 'center',
       }}
     >
-      <Link
-        href="/"
-        style={{
-          padding: '0.5rem 0.75rem',
-          background: '#fff',
-          border: '1px solid #ddd',
-          borderRadius: '4px',
-          textDecoration: 'none',
-          color: '#0070f3',
-          fontSize: '0.9rem',
-          fontWeight: 500,
-        }}
-      >
-        🏠 Hem
-      </Link>
-      <Link
-        href="/inventory"
-        style={{
-          padding: '0.5rem 0.75rem',
-          background: '#fff',
-          border: '1px solid #ddd',
-          borderRadius: '4px',
-          textDecoration: 'none',
-          color: '#0070f3',
-          fontSize: '0.9rem',
-          fontWeight: 500,
-        }}
-      >
-        🛒 Varor
-      </Link>
-      <Link
-        href="/recipes"
-        style={{
-          padding: '0.5rem 0.75rem',
-          background: '#fff',
-          border: '1px solid #ddd',
-          borderRadius: '4px',
-          textDecoration: 'none',
-          color: '#0070f3',
-          fontSize: '0.9rem',
-          fontWeight: 500,
-        }}
-      >
-        📖 Recept
-      </Link>
-      <Link
-        href="/baslager"
-        style={{
-          padding: '0.5rem 0.75rem',
-          background: '#fff',
-          border: '1px solid #ddd',
-          borderRadius: '4px',
-          textDecoration: 'none',
-          color: '#0070f3',
-          fontSize: '0.9rem',
-          fontWeight: 500,
-        }}
-      >
-        🏪 Baslager
-      </Link>
-      <Link
-        href="/admin/products"
-        style={{
-          padding: '0.5rem 0.75rem',
-          background: '#fff',
-          border: '1px solid #ddd',
-          borderRadius: '4px',
-          textDecoration: 'none',
-          color: '#0070f3',
-          fontSize: '0.9rem',
-          fontWeight: 500,
-        }}
-      >
-        ⚙️ Admin
-      </Link>
-      <Link
-        href="/import"
-        style={{
-          padding: '0.5rem 0.75rem',
-          background: '#fff',
-          border: '1px solid #ddd',
-          borderRadius: '4px',
-          textDecoration: 'none',
-          color: '#0070f3',
-          fontSize: '0.9rem',
-          fontWeight: 500,
-        }}
-      >
-        📥 Importera
-      </Link>
-      <Link
-        href="/matplan"
-        style={{
-          padding: '0.5rem 0.75rem',
-          background: '#fff',
-          border: '1px solid #ddd',
-          borderRadius: '4px',
-          textDecoration: 'none',
-          color: '#0070f3',
-          fontSize: '0.9rem',
-          fontWeight: 500,
-        }}
-      >
-        📅 Matplan
-      </Link>
+      <Link href="/" style={linkStyle}>🏠 Hem</Link>
+      <Link href="/inventory" style={linkStyle}>🛒 Varor</Link>
+      <Link href="/recipes" style={linkStyle}>📖 Recept</Link>
+      <Link href="/baslager" style={linkStyle}>🏪 Baslager</Link>
+      <Link href="/admin/products" style={linkStyle}>⚙️ Admin</Link>
+      <Link href="/import" style={linkStyle}>📥 Importera</Link>
+      <Link href="/matplan" style={linkStyle}>📅 Matplan</Link>
+      <span style={{ flex: 1 }} />
+      {session?.user && (
+        <>
+          <span style={{ fontSize: '0.9rem', color: '#555' }}>
+            👤 {session.user.name}
+          </span>
+          <form
+            action={async () => {
+              'use server';
+              await signOut({ redirectTo: '/login' });
+            }}
+          >
+            <button
+              type="submit"
+              style={{
+                ...linkStyle,
+                cursor: 'pointer',
+                color: '#dc2626',
+                borderColor: '#dc2626',
+              }}
+            >
+              Logga ut
+            </button>
+          </form>
+        </>
+      )}
     </nav>
   );
 }
+

frontend/app/admin/products/actions.ts

@@ -2,6 +2,7 @@
 
 import { revalidatePath } from 'next/cache';
 import { API_BASE } from '../../../lib/api';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 export async function updateProduct(formData: FormData) {
   const id = Number(formData.get('id'));
@@ -20,7 +21,7 @@ export async function updateProduct(formData: FormData) {
 
   const res = await fetch(`${API_BASE}/api/products/${id}`, {
     method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...(await getAuthHeaders()) },
     body: JSON.stringify({
       name: name || undefined,
       canonicalName: canonicalName || undefined,
@@ -42,7 +43,7 @@ export async function updateProduct(formData: FormData) {
 export async function setProductTags(productId: number, tags: string[]) {
   const res = await fetch(`${API_BASE}/api/products/${productId}/tags`, {
     method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...(await getAuthHeaders()) },
     body: JSON.stringify({ tags }),
     cache: 'no-store',
   });
@@ -58,6 +59,7 @@ export async function setProductTags(productId: number, tags: string[]) {
 export async function deleteProduct(id: number) {
   const res = await fetch(`${API_BASE}/api/products/${id}`, {
     method: 'DELETE',
+    headers: { ...(await getAuthHeaders()) },
     cache: 'no-store',
   });
 

frontend/app/api/admin/merge-preview-proxy/route.ts

@@ -1,9 +1,11 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../../lib/auth-headers';
 
 const API_BASE =
   process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const sourceProductId = request.nextUrl.searchParams.get('sourceProductId');
   const targetProductId = request.nextUrl.searchParams.get('targetProductId');
 
@@ -11,6 +13,7 @@ export async function GET(request: NextRequest) {
     `${API_BASE}/api/products/merge-preview?sourceProductId=${sourceProductId}&targetProductId=${targetProductId}`,
     {
       method: 'GET',
+      headers: { ...authHeaders },
       cache: 'no-store',
     },
   );

frontend/app/api/auth-register/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
+
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  const res = await fetch(`${API_BASE}/api/auth/register`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  const text = await res.text();
+  return new NextResponse(text, {
+    status: res.status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}

frontend/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from '../../../../auth';
+
+export const { GET, POST } = handlers;

frontend/app/api/inventory-history-proxy/route.ts

@@ -1,13 +1,16 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 const API_BASE =
   process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const id = request.nextUrl.searchParams.get('id');
 
   const res = await fetch(`${API_BASE}/api/inventory/${id}/consumption-history`, {
     method: 'GET',
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
 

frontend/app/api/meal-plan-proxy/inventory-compare/route.ts

@@ -1,12 +1,15 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const { searchParams } = request.nextUrl;
   const from = searchParams.get('from');
   const to = searchParams.get('to');
   const res = await fetch(`${API_BASE}/api/meal-plan/inventory-compare?from=${from}&to=${to}`, {
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
   const text = await res.text();

frontend/app/api/meal-plan-proxy/route.ts

@@ -1,11 +1,14 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const { searchParams } = request.nextUrl;
   const query = searchParams.toString();
   const res = await fetch(`${API_BASE}/api/meal-plan${query ? `?${query}` : ''}`, {
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
   const text = await res.text();
@@ -16,10 +19,11 @@ export async function GET(request: NextRequest) {
 }
 
 export async function POST(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const body = await request.text();
   const res = await fetch(`${API_BASE}/api/meal-plan`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...authHeaders },
     body,
     cache: 'no-store',
   });
@@ -31,9 +35,11 @@ export async function POST(request: NextRequest) {
 }
 
 export async function DELETE(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const date = request.nextUrl.searchParams.get('date');
   const res = await fetch(`${API_BASE}/api/meal-plan/${date}`, {
     method: 'DELETE',
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
   return new NextResponse(null, { status: res.status });

frontend/app/api/meal-plan-proxy/shopping/route.ts

@@ -1,12 +1,15 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const { searchParams } = request.nextUrl;
   const from = searchParams.get('from');
   const to = searchParams.get('to');
   const res = await fetch(`${API_BASE}/api/meal-plan/shopping-list?from=${from}&to=${to}`, {
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
   const text = await res.text();

frontend/app/api/parse-markdown-proxy/route.ts

@@ -1,13 +1,15 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function POST(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const body = await request.text();
 
   const res = await fetch(`${API_BASE}/api/recipes/parse-markdown`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...authHeaders },
     body,
     cache: 'no-store',
   });

frontend/app/api/products/route.ts

@@ -1,10 +1,13 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const res = await fetch(`${API_BASE}/api/products`, {
     method: 'GET',
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
 

frontend/app/api/quick-import-proxy/route.ts

@@ -1,17 +1,19 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 export async function POST(request: NextRequest) {
   try {
     const contentType = request.headers.get('content-type') ?? '';
     const isMultipart = contentType.includes('multipart/form-data');
     const backendUrl = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
+    const authHeaders = await getAuthHeaders();
 
     const response = await fetch(`${backendUrl}/api/quick-import`, {
       method: 'POST',
       body: isMultipart
         ? await request.formData()
         : JSON.stringify(await request.json()),
-      headers: isMultipart ? undefined : { 'Content-Type': 'application/json' },
+      headers: isMultipart ? { ...authHeaders } : { 'Content-Type': 'application/json', ...authHeaders },
       cache: 'no-store',
     });
 

frontend/app/api/receipt-alias-proxy/route.ts

@@ -1,10 +1,15 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 const API_BASE =
   process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET() {
-  const res = await fetch(`${API_BASE}/api/receipt-aliases`, { cache: 'no-store' });
+  const authHeaders = await getAuthHeaders();
+  const res = await fetch(`${API_BASE}/api/receipt-aliases`, {
+    headers: { ...authHeaders },
+    cache: 'no-store',
+  });
   const text = await res.text();
   return new NextResponse(text, {
     status: res.status,
@@ -13,10 +18,11 @@ export async function GET() {
 }
 
 export async function POST(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const body = await request.json();
   const res = await fetch(`${API_BASE}/api/receipt-aliases`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...authHeaders },
     body: JSON.stringify(body),
   });
   const text = await res.text();
@@ -27,9 +33,11 @@ export async function POST(request: NextRequest) {
 }
 
 export async function DELETE(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const id = request.nextUrl.searchParams.get('id');
   const res = await fetch(`${API_BASE}/api/receipt-aliases/${id}`, {
     method: 'DELETE',
+    headers: { ...authHeaders },
   });
   return new NextResponse(null, { status: res.status });
 }

frontend/app/api/receipt-import-proxy/route.ts

@@ -1,13 +1,16 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 const API_BASE =
   process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function POST(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const formData = await request.formData();
 
   const res = await fetch(`${API_BASE}/api/receipt-import`, {
     method: 'POST',
+    headers: { ...authHeaders },
     body: formData,
   });
 

frontend/app/api/recipe-preview-proxy/route.ts

@@ -1,8 +1,10 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const id = request.nextUrl.searchParams.get('id');
 
   if (!id) {
@@ -14,6 +16,7 @@ export async function GET(request: NextRequest) {
 
   const res = await fetch(`${API_BASE}/api/recipes/${id}/inventory-preview`, {
     method: 'GET',
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
 

frontend/app/api/recipes/[id]/image/route.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
@@ -7,11 +8,12 @@ export async function POST(
   { params }: { params: Promise<{ id: string }> },
 ) {
   const { id } = await params;
+  const authHeaders = await getAuthHeaders();
   const body = await request.text();
 
   const res = await fetch(`${API_BASE}/api/recipes/${id}/image`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...authHeaders },
     body,
     cache: 'no-store',
   });

frontend/app/api/recipes/[id]/route.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
@@ -7,7 +8,11 @@ export async function GET(
   { params }: { params: Promise<{ id: string }> },
 ) {
   const { id } = await params;
-  const res = await fetch(`${API_BASE}/api/recipes/${id}`, { cache: 'no-store' });
+  const authHeaders = await getAuthHeaders();
+  const res = await fetch(`${API_BASE}/api/recipes/${id}`, {
+    headers: { ...authHeaders },
+    cache: 'no-store',
+  });
   const text = await res.text();
   return new NextResponse(text, {
     status: res.status,
@@ -20,10 +25,11 @@ export async function PATCH(
   { params }: { params: Promise<{ id: string }> },
 ) {
   const { id } = await params;
+  const authHeaders = await getAuthHeaders();
   const body = await request.json();
   const res = await fetch(`${API_BASE}/api/recipes/${id}`, {
     method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...authHeaders },
     body: JSON.stringify(body),
     cache: 'no-store',
   });
@@ -39,8 +45,10 @@ export async function DELETE(
   { params }: { params: Promise<{ id: string }> },
 ) {
   const { id } = await params;
+  const authHeaders = await getAuthHeaders();
   const res = await fetch(`${API_BASE}/api/recipes/${id}`, {
     method: 'DELETE',
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
   return new NextResponse(null, { status: res.status });

frontend/app/api/recipes/route.ts

@@ -1,9 +1,12 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
 
 export async function GET() {
+  const authHeaders = await getAuthHeaders();
   const res = await fetch(`${API_BASE}/api/recipes`, {
+    headers: { ...authHeaders },
     cache: 'no-store',
   });
   const data = await res.json();
@@ -11,10 +14,11 @@ export async function GET() {
 }
 
 export async function POST(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
   const body = await request.json();
   const res = await fetch(`${API_BASE}/api/recipes`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...authHeaders },
     body: JSON.stringify(body),
     cache: 'no-store',
   });

frontend/app/api/user-products/[productId]/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../../lib/auth-headers';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
+
+export async function DELETE(
+  _request: NextRequest,
+  { params }: { params: Promise<{ productId: string }> },
+) {
+  const { productId } = await params;
+  const authHeaders = await getAuthHeaders();
+  const res = await fetch(`${API_BASE}/api/user-products/${productId}`, {
+    method: 'DELETE',
+    headers: { ...authHeaders },
+  });
+  return new NextResponse(null, { status: res.status });
+}

frontend/app/api/user-products/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders } from '../../../lib/auth-headers';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
+
+export async function GET() {
+  const authHeaders = await getAuthHeaders();
+  const res = await fetch(`${API_BASE}/api/user-products`, {
+    headers: { ...authHeaders },
+    cache: 'no-store',
+  });
+  const text = await res.text();
+  return new NextResponse(text, {
+    status: res.status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+export async function POST(request: NextRequest) {
+  const authHeaders = await getAuthHeaders();
+  const body = await request.json();
+  const res = await fetch(`${API_BASE}/api/user-products`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', ...authHeaders },
+    body: JSON.stringify(body),
+  });
+  const text = await res.text();
+  return new NextResponse(text, {
+    status: res.status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}

frontend/app/baslager/actions.ts

@@ -2,11 +2,12 @@
 
 import { revalidatePath } from 'next/cache';
 import { API_BASE } from '../../lib/api';
+import { getAuthHeaders } from '../../lib/auth-headers';
 
 export async function addPantryItem(productId: number) {
   const res = await fetch(`${API_BASE}/api/pantry`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'application/json', ...(await getAuthHeaders()) },
     body: JSON.stringify({ productId }),
     cache: 'no-store',
   });
@@ -22,6 +23,7 @@ export async function addPantryItem(productId: number) {
 export async function removePantryItem(id: number) {
   const res = await fetch(`${API_BASE}/api/pantry/${id}`, {
     method: 'DELETE',
+    headers: { ...(await getAuthHeaders()) },
     cache: 'no-store',
   });
 

frontend/app/inventory/actions.ts

@@ -2,14 +2,17 @@
 
 import { revalidatePath } from 'next/cache';
 import { API_BASE } from '../../lib/api';
+import { getAuthHeaders } from '../../lib/auth-headers';
 
 export async function createProduct(formData: FormData) {
   const name = String(formData.get('name') || '').trim();
+  const authHeaders = await getAuthHeaders();
 
   const res = await fetch(`${API_BASE}/api/products`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
+      ...authHeaders,
     },
     body: JSON.stringify({ name }),
     cache: 'no-store',
@@ -51,6 +54,7 @@ export async function createInventoryItem(formData: FormData) {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
+      ...(await getAuthHeaders()),
     },
     body: JSON.stringify(payload),
     cache: 'no-store',
@@ -91,6 +95,7 @@ export async function updateInventoryItem(formData: FormData) {
     method: 'PATCH',
     headers: {
       'Content-Type': 'application/json',
+      ...(await getAuthHeaders()),
     },
     body: JSON.stringify(payload),
     cache: 'no-store',
@@ -112,6 +117,7 @@ export async function updateCanonicalName(formData: FormData) {
     method: 'PATCH',
     headers: {
       'Content-Type': 'application/json',
+      ...(await getAuthHeaders()),
     },
     body: JSON.stringify({ canonicalName }),
     cache: 'no-store',
@@ -133,6 +139,7 @@ export async function mergeProducts(formData: FormData) {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
+      ...(await getAuthHeaders()),
     },
     body: JSON.stringify({
       sourceProductId,
@@ -166,6 +173,7 @@ export async function consumeInventoryItem(formData: FormData) {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
+      ...(await getAuthHeaders()),
     },
     body: JSON.stringify(payload),
     cache: 'no-store',

frontend/app/login/page.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { signIn } from 'next-auth/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get('callbackUrl') ?? '/';
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    const result = await signIn('credentials', {
+      username,
+      password,
+      redirect: false,
+    });
+    setLoading(false);
+    if (result?.error) {
+      setError('Felaktigt användarnamn eller lösenord');
+    } else {
+      router.push(callbackUrl);
+      router.refresh();
+    }
+  }
+
+  return (
+    <main style={{ maxWidth: 400, margin: '80px auto', padding: '0 1rem' }}>
+      <h1 style={{ marginBottom: '1.5rem' }}>Logga in</h1>
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <div>
+          <label htmlFor="username" style={{ display: 'block', marginBottom: 4 }}>
+            Användarnamn
+          </label>
+          <input
+            id="username"
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            required
+            autoComplete="username"
+            style={{ width: '100%', padding: '8px 12px', borderRadius: 6, border: '1px solid #ccc', fontSize: '1rem' }}
+          />
+        </div>
+        <div>
+          <label htmlFor="password" style={{ display: 'block', marginBottom: 4 }}>
+            Lösenord
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="current-password"
+            style={{ width: '100%', padding: '8px 12px', borderRadius: 6, border: '1px solid #ccc', fontSize: '1rem' }}
+          />
+        </div>
+        {error && <p style={{ color: 'red', margin: 0 }}>{error}</p>}
+        <button
+          type="submit"
+          disabled={loading}
+          style={{
+            padding: '10px',
+            background: '#2563eb',
+            color: 'white',
+            border: 'none',
+            borderRadius: 6,
+            fontSize: '1rem',
+            cursor: loading ? 'not-allowed' : 'pointer',
+            opacity: loading ? 0.7 : 1,
+          }}
+        >
+          {loading ? 'Loggar in...' : 'Logga in'}
+        </button>
+        <p style={{ textAlign: 'center', fontSize: '0.9rem' }}>
+          Inget konto? <a href="/register">Skapa konto</a>
+        </p>
+      </form>
+    </main>
+  );
+}

frontend/app/recipes/[id]/RecipeDetailClient.tsx

@@ -79,6 +79,7 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
     instructions: initialRecipe.instructions || '',
     imageUrl: initialRecipe.imageUrl || '',
     servings: initialRecipe.servings as number | null,
+    isPublic: initialRecipe.isPublic,
     ingredients: initialRecipe.ingredients.map((ing) => ({
       productId: ing.productId,
       quantity: String(ing.quantity),
@@ -469,6 +470,23 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
           </p>
         </section>
 
+        {/* Synlighet */}
+        <section style={sectionStyle}>
+          <h2 style={sectionTitle}>Synlighet</h2>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
+            <input
+              type="checkbox"
+              checked={form.isPublic}
+              onChange={(e) => setForm((f) => ({ ...f, isPublic: e.target.checked }))}
+              style={{ width: 16, height: 16 }}
+            />
+            <span>Publikt recept (synligt för alla inloggade)</span>
+          </label>
+          <p style={{ fontSize: '0.85rem', color: '#666', marginTop: '0.4rem', marginBottom: 0 }}>
+            Privata recept syns bara för dig och de du delar med.
+          </p>
+        </section>
+
         {/* Ingredienser */}
         <section style={sectionStyle}>
           <h2 style={sectionTitle}>Ingredienser</h2>

frontend/app/register/page.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_API_URL ?? '/api';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [form, setForm] = useState({ username: '', email: '', password: '', confirm: '' });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    if (form.password !== form.confirm) {
+      setError('Lösenorden matchar inte');
+      return;
+    }
+    setLoading(true);
+    const res = await fetch('/api/auth-register', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username: form.username, email: form.email, password: form.password }),
+    });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      setError(data.message ?? 'Registrering misslyckades');
+      setLoading(false);
+      return;
+    }
+    // Auto-login after register
+    await signIn('credentials', { username: form.username, password: form.password, redirect: false });
+    router.push('/');
+    router.refresh();
+  }
+
+  return (
+    <main style={{ maxWidth: 400, margin: '80px auto', padding: '0 1rem' }}>
+      <h1 style={{ marginBottom: '1.5rem' }}>Skapa konto</h1>
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        {(['username', 'email', 'password', 'confirm'] as const).map((field) => (
+          <div key={field}>
+            <label htmlFor={field} style={{ display: 'block', marginBottom: 4 }}>
+              {field === 'username' ? 'Användarnamn' : field === 'email' ? 'E-post' : field === 'password' ? 'Lösenord' : 'Bekräfta lösenord'}
+            </label>
+            <input
+              id={field}
+              type={field.includes('password') || field === 'confirm' ? 'password' : field === 'email' ? 'email' : 'text'}
+              value={form[field]}
+              onChange={(e) => setForm((f) => ({ ...f, [field]: e.target.value }))}
+              required
+              minLength={field.includes('password') || field === 'confirm' ? 8 : undefined}
+              style={{ width: '100%', padding: '8px 12px', borderRadius: 6, border: '1px solid #ccc', fontSize: '1rem' }}
+            />
+          </div>
+        ))}
+        {error && <p style={{ color: 'red', margin: 0 }}>{error}</p>}
+        <button
+          type="submit"
+          disabled={loading}
+          style={{
+            padding: '10px',
+            background: '#16a34a',
+            color: 'white',
+            border: 'none',
+            borderRadius: 6,
+            fontSize: '1rem',
+            cursor: loading ? 'not-allowed' : 'pointer',
+            opacity: loading ? 0.7 : 1,
+          }}
+        >
+          {loading ? 'Skapar konto...' : 'Skapa konto'}
+        </button>
+        <p style={{ textAlign: 'center', fontSize: '0.9rem' }}>
+          Har du redan ett konto? <a href="/login">Logga in</a>
+        </p>
+      </form>
+    </main>
+  );
+}