Remix

# Oficjalny CLI
npx create-remix@latest my-remix-app

# Z szablonem
npx create-remix@latest --template remix-run/indie-stack my-app
npx create-remix@latest --template remix-run/blues-stack my-app
npx create-remix@latest --template remix-run/grunge-stack my-app

# Minimalna instalacja
npx create-remix@latest --template remix-run/remix/templates/remix

# Indie Stack - SQLite, Tailwind, Fly.io
# Idealny do małych projektów i prototypów
npx create-remix@latest --template remix-run/indie-stack

# Blues Stack - PostgreSQL, Docker, Fly.io
# Dla większych aplikacji produkcyjnych
npx create-remix@latest --template remix-run/blues-stack

# Grunge Stack - DynamoDB, AWS Lambda
# Dla serverless na AWS
npx create-remix@latest --template remix-run/grunge-stack

my-remix-app/
├── app/
│   ├── routes/                 # File-based routing
│   │   ├── _index.tsx         # /
│   │   ├── about.tsx          # /about
│   │   ├── posts._index.tsx   # /posts
│   │   ├── posts.$id.tsx      # /posts/:id
│   │   └── posts.new.tsx      # /posts/new
│   ├── components/            # React components
│   ├── utils/                 # Utility functions
│   ├── styles/                # CSS files
│   ├── entry.client.tsx       # Client entry point
│   ├── entry.server.tsx       # Server entry point
│   └── root.tsx               # Root layout
├── public/                    # Static assets
├── remix.config.js            # Remix configuration
├── package.json
└── tsconfig.json

// remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  // Ignoruj routes w tych folderach
  ignoredRouteFiles: ["**/.*"],

  // Server runtime
  serverModuleFormat: "esm",

  // Future flags
  future: {
    v2_dev: true,
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },

  // Tailwind support
  tailwind: true,
  postcss: true,

  // Server build target
  serverBuildTarget: "vercel",
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
}

app/routes/
├── _index.tsx              # GET /
├── about.tsx               # GET /about
├── contact.tsx             # GET /contact
│
├── posts._index.tsx        # GET /posts
├── posts.$id.tsx           # GET /posts/:id (dynamic)
├── posts.new.tsx           # GET /posts/new
├── posts.$id.edit.tsx      # GET /posts/:id/edit
│
├── blog_.tsx               # Layout dla /blog/* bez nested UI
├── blog_.$slug.tsx         # GET /blog/:slug (flat route)
│
├── ($lang).about.tsx       # GET /about lub GET /pl/about (optional)
├── files.$.tsx             # GET /files/* (splat/catch-all)
│
├── _auth.tsx               # Layout bez URL segmentu
├── _auth.login.tsx         # GET /login
├── _auth.register.tsx      # GET /register
│
├── api.users.ts            # GET/POST /api/users (resource route)
└── healthcheck.ts          # GET /healthcheck

// app/routes/dashboard.tsx - Parent layout
import { Outlet } from '@remix-run/react'

export default function DashboardLayout() {
  return (
    <div className="dashboard">
      <nav className="sidebar">
        <NavLink to="/dashboard">Overview</NavLink>
        <NavLink to="/dashboard/analytics">Analytics</NavLink>
        <NavLink to="/dashboard/settings">Settings</NavLink>
      </nav>

      <main className="content">
        {/* Child routes render here */}
        <Outlet />
      </main>
    </div>
  )
}

// app/routes/dashboard._index.tsx - /dashboard
export default function DashboardIndex() {
  return <h1>Dashboard Overview</h1>
}

// app/routes/dashboard.analytics.tsx - /dashboard/analytics
export default function DashboardAnalytics() {
  return <h1>Analytics</h1>
}

// app/routes/dashboard.settings.tsx - /dashboard/settings
export default function DashboardSettings() {
  return <h1>Settings</h1>
}

// app/routes/_auth.tsx - Layout dla auth pages bez /auth w URL
import { Outlet } from '@remix-run/react'

export default function AuthLayout() {
  return (
    <div className="auth-container">
      <div className="auth-card">
        <img src="/logo.svg" alt="Logo" />
        <Outlet />
      </div>
    </div>
  )
}

// app/routes/_auth.login.tsx -> /login
// app/routes/_auth.register.tsx -> /register
// app/routes/_auth.forgot-password.tsx -> /forgot-password

// app/routes/posts._index.tsx
import type { LoaderFunctionArgs } from '@remix-run/node'
import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { db } from '~/utils/db.server'

// Loader wykonuje się na serwerze przy każdym request
export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url)
  const page = parseInt(url.searchParams.get('page') || '1')
  const limit = 10

  const posts = await db.post.findMany({
    where: { published: true },
    orderBy: { createdAt: 'desc' },
    skip: (page - 1) * limit,
    take: limit,
    include: {
      author: {
        select: { name: true, avatar: true }
      }
    }
  })

  const total = await db.post.count({ where: { published: true } })

  // json() ustawia Content-Type i serializuje dane
  return json({
    posts,
    pagination: {
      page,
      totalPages: Math.ceil(total / limit),
      total
    }
  })
}

export default function PostsIndex() {
  // useLoaderData zwraca dane z loadera z pełnym type inference
  const { posts, pagination } = useLoaderData<typeof loader>()

  return (
    <div>
      <h1>Blog Posts</h1>

      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/posts/${post.id}`}>
              <h2>{post.title}</h2>
              <p>By {post.author.name}</p>
            </Link>
          </li>
        ))}
      </ul>

      <Pagination {...pagination} />
    </div>
  )
}

// app/routes/posts.$id.tsx
import type { LoaderFunctionArgs } from '@remix-run/node'
import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { db } from '~/utils/db.server'

export async function loader({ params }: LoaderFunctionArgs) {
  // params.id pochodzi z nazwy pliku ($id)
  const post = await db.post.findUnique({
    where: { id: params.id },
    include: {
      author: true,
      comments: {
        include: { author: true },
        orderBy: { createdAt: 'desc' }
      }
    }
  })

  // Rzuć Response dla 404
  if (!post) {
    throw new Response('Post not found', { status: 404 })
  }

  // Możesz też sprawdzić uprawnienia
  // if (!post.published && !isAuthor) {
  //   throw new Response('Forbidden', { status: 403 })
  // }

  return json({ post })
}

export default function PostPage() {
  const { post } = useLoaderData<typeof loader>()

  return (
    <article>
      <h1>{post.title}</h1>
      <div className="meta">
        <span>By {post.author.name}</span>
        <time>{new Date(post.createdAt).toLocaleDateString()}</time>
      </div>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      <section className="comments">
        <h2>Comments ({post.comments.length})</h2>
        {post.comments.map(comment => (
          <Comment key={comment.id} {...comment} />
        ))}
      </section>
    </article>
  )
}

// app/routes/dashboard.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  const user = await requireUser(request)
  return json({ user })
}

// app/routes/dashboard.analytics.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  // Ten loader wykonuje się RÓWNOLEGLE z parent loader
  const analytics = await getAnalytics()
  return json({ analytics })
}

// Oba loadery wykonują się jednocześnie!
// Dashboard Layout otrzymuje user, Analytics Page otrzymuje analytics

// app/utils/session.server.ts
import { createCookieSessionStorage, redirect } from '@remix-run/node'

const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: '__session',
    httpOnly: true,
    path: '/',
    sameSite: 'lax',
    secrets: [process.env.SESSION_SECRET!],
    secure: process.env.NODE_ENV === 'production',
  },
})

export async function getUser(request: Request) {
  const session = await sessionStorage.getSession(
    request.headers.get('Cookie')
  )
  const userId = session.get('userId')

  if (!userId) return null

  return db.user.findUnique({ where: { id: userId } })
}

export async function requireUser(request: Request) {
  const user = await getUser(request)

  if (!user) {
    throw redirect('/login')
  }

  return user
}

// app/routes/dashboard.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  const user = await requireUser(request) // Redirect jeśli nie zalogowany

  const [stats, notifications] = await Promise.all([
    getStats(user.id),
    getNotifications(user.id)
  ])

  return json({ user, stats, notifications })
}

// app/routes/posts.new.tsx
import type { ActionFunctionArgs } from '@remix-run/node'
import { redirect, json } from '@remix-run/node'
import { Form, useActionData } from '@remix-run/react'
import { requireUser } from '~/utils/session.server'
import { db } from '~/utils/db.server'

export async function action({ request }: ActionFunctionArgs) {
  const user = await requireUser(request)

  // Pobierz dane z formularza
  const formData = await request.formData()
  const title = formData.get('title')
  const content = formData.get('content')
  const published = formData.get('published') === 'on'

  // Walidacja
  const errors: Record<string, string> = {}

  if (!title || typeof title !== 'string' || title.length < 3) {
    errors.title = 'Title must be at least 3 characters'
  }

  if (!content || typeof content !== 'string' || content.length < 10) {
    errors.content = 'Content must be at least 10 characters'
  }

  if (Object.keys(errors).length > 0) {
    return json({ errors }, { status: 400 })
  }

  // Zapisz do bazy
  const post = await db.post.create({
    data: {
      title: title as string,
      content: content as string,
      published,
      authorId: user.id,
    },
  })

  // Redirect po sukcesie
  return redirect(`/posts/${post.id}`)
}

export default function NewPost() {
  const actionData = useActionData<typeof action>()

  return (
    <div>
      <h1>Create New Post</h1>

      {/* Form automatycznie wysyła POST do tego samego URL */}
      <Form method="post">
        <div>
          <label htmlFor="title">Title</label>
          <input
            type="text"
            id="title"
            name="title"
            required
          />
          {actionData?.errors?.title && (
            <p className="error">{actionData.errors.title}</p>
          )}
        </div>

        <div>
          <label htmlFor="content">Content</label>
          <textarea
            id="content"
            name="content"
            rows={10}
            required
          />
          {actionData?.errors?.content && (
            <p className="error">{actionData.errors.content}</p>
          )}
        </div>

        <div>
          <label>
            <input type="checkbox" name="published" />
            Publish immediately
          </label>
        </div>

        <button type="submit">Create Post</button>
      </Form>
    </div>
  )
}

// app/routes/posts.$id.tsx
import { Form } from '@remix-run/react'

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData()
  const intent = formData.get('intent')

  switch (intent) {
    case 'delete': {
      await db.post.delete({ where: { id: params.id } })
      return redirect('/posts')
    }

    case 'publish': {
      await db.post.update({
        where: { id: params.id },
        data: { published: true }
      })
      return json({ success: true })
    }

    case 'unpublish': {
      await db.post.update({
        where: { id: params.id },
        data: { published: false }
      })
      return json({ success: true })
    }

    case 'add-comment': {
      const content = formData.get('content')
      await db.comment.create({
        data: {
          content: content as string,
          postId: params.id!,
          authorId: user.id
        }
      })
      return json({ success: true })
    }

    default:
      throw new Response('Invalid intent', { status: 400 })
  }
}

export default function PostPage() {
  const { post } = useLoaderData<typeof loader>()

  return (
    <article>
      <h1>{post.title}</h1>

      <div className="actions">
        {/* Każdy form ma inny intent */}
        <Form method="post">
          <input type="hidden" name="intent" value="delete" />
          <button type="submit">Delete</button>
        </Form>

        <Form method="post">
          <input
            type="hidden"
            name="intent"
            value={post.published ? 'unpublish' : 'publish'}
          />
          <button type="submit">
            {post.published ? 'Unpublish' : 'Publish'}
          </button>
        </Form>
      </div>

      {/* Form do komentarzy */}
      <Form method="post">
        <input type="hidden" name="intent" value="add-comment" />
        <textarea name="content" placeholder="Add a comment..." />
        <button type="submit">Comment</button>
      </Form>
    </article>
  )
}

// app/routes/posts.$id.tsx
import { useFetcher } from '@remix-run/react'

function LikeButton({ postId, liked, likesCount }) {
  const fetcher = useFetcher()

  // Optimistic UI - zakładamy sukces
  const optimisticLiked = fetcher.formData
    ? fetcher.formData.get('intent') === 'like'
    : liked

  const optimisticCount = fetcher.formData
    ? likesCount + (fetcher.formData.get('intent') === 'like' ? 1 : -1)
    : likesCount

  return (
    <fetcher.Form method="post" action={`/posts/${postId}`}>
      <input
        type="hidden"
        name="intent"
        value={optimisticLiked ? 'unlike' : 'like'}
      />
      <button
        type="submit"
        disabled={fetcher.state !== 'idle'}
        className={optimisticLiked ? 'liked' : ''}
      >
        {optimisticLiked ? '❤️' : '🤍'} {optimisticCount}
      </button>
    </fetcher.Form>
  )
}

// Newsletter signup z fetcher
function NewsletterSignup() {
  const fetcher = useFetcher()

  const isSubmitting = fetcher.state === 'submitting'
  const isSuccess = fetcher.data?.success
  const error = fetcher.data?.error

  if (isSuccess) {
    return <p>Thanks for subscribing!</p>
  }

  return (
    <fetcher.Form method="post" action="/api/newsletter">
      <input
        type="email"
        name="email"
        placeholder="Enter your email"
        required
      />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Subscribing...' : 'Subscribe'}
      </button>
      {error && <p className="error">{error}</p>}
    </fetcher.Form>
  )
}

// app/routes/contact.tsx
import { Form, useNavigation } from '@remix-run/react'

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData()

  await sendEmail({
    from: formData.get('email') as string,
    subject: formData.get('subject') as string,
    message: formData.get('message') as string,
  })

  return json({ success: true })
}

export default function Contact() {
  const navigation = useNavigation()
  const actionData = useActionData<typeof action>()

  const isSubmitting = navigation.state === 'submitting'

  if (actionData?.success) {
    return (
      <div className="success">
        <h2>Message sent!</h2>
        <p>We'll get back to you soon.</p>
        <Link to="/">Back to home</Link>
      </div>
    )
  }

  return (
    <div>
      <h1>Contact Us</h1>

      {/* Ten formularz działa bez JavaScript! */}
      <Form method="post">
        <div>
          <label htmlFor="email">Email</label>
          <input type="email" id="email" name="email" required />
        </div>

        <div>
          <label htmlFor="subject">Subject</label>
          <input type="text" id="subject" name="subject" required />
        </div>

        <div>
          <label htmlFor="message">Message</label>
          <textarea id="message" name="message" rows={5} required />
        </div>

        <button type="submit" disabled={isSubmitting}>
          {/* Bez JS pokazuje "Send", z JS pokazuje loading state */}
          {isSubmitting ? 'Sending...' : 'Send Message'}
        </button>
      </Form>
    </div>
  )
}

import { Link, NavLink } from '@remix-run/react'

function Navigation() {
  return (
    <nav>
      {/* Prefetch on hover - ładuje dane przed kliknięciem */}
      <Link to="/posts" prefetch="intent">
        Blog
      </Link>

      {/* Prefetch od razu przy renderze */}
      <Link to="/about" prefetch="render">
        About
      </Link>

      {/* NavLink z active state */}
      <NavLink
        to="/dashboard"
        className={({ isActive, isPending }) =>
          isActive ? 'active' : isPending ? 'pending' : ''
        }
      >
        Dashboard
      </NavLink>
    </nav>
  )
}

// app/root.tsx
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  isRouteErrorResponse,
  useRouteError
} from '@remix-run/react'

export function ErrorBoundary() {
  const error = useRouteError()

  if (isRouteErrorResponse(error)) {
    return (
      <html>
        <head>
          <title>{error.status} {error.statusText}</title>
          <Meta />
          <Links />
        </head>
        <body>
          <div className="error-page">
            <h1>{error.status}</h1>
            <p>{error.statusText}</p>
            {error.status === 404 && (
              <p>The page you're looking for doesn't exist.</p>
            )}
            <Link to="/">Go home</Link>
          </div>
          <Scripts />
        </body>
      </html>
    )
  }

  // Unknown error
  return (
    <html>
      <head>
        <title>Error</title>
        <Meta />
        <Links />
      </head>
      <body>
        <div className="error-page">
          <h1>Something went wrong</h1>
          <p>We're sorry, an unexpected error occurred.</p>
          <Link to="/">Go home</Link>
        </div>
        <Scripts />
      </body>
    </html>
  )
}

// app/routes/posts.$id.tsx - Error boundary dla konkretnego route
export function ErrorBoundary() {
  const error = useRouteError()

  if (isRouteErrorResponse(error) && error.status === 404) {
    return (
      <div className="not-found">
        <h1>Post not found</h1>
        <p>This post may have been deleted or doesn't exist.</p>
        <Link to="/posts">Browse all posts</Link>
      </div>
    )
  }

  return (
    <div className="error">
      <h1>Error loading post</h1>
      <p>Something went wrong. Please try again later.</p>
    </div>
  )
}

export async function loader({ params }: LoaderFunctionArgs) {
  const post = await db.post.findUnique({ where: { id: params.id } })

  // 404 - Post nie istnieje
  if (!post) {
    throw new Response('Not Found', {
      status: 404,
      statusText: 'Post not found'
    })
  }

  // 403 - Brak uprawnień
  if (!post.published && !isAuthor) {
    throw new Response('Forbidden', {
      status: 403,
      statusText: 'You do not have access to this post'
    })
  }

  // 410 - Usunięty
  if (post.deletedAt) {
    throw new Response('Gone', {
      status: 410,
      statusText: 'This post has been deleted'
    })
  }

  return json({ post })
}

// app/routes/posts.$id.tsx
import type { MetaFunction } from '@remix-run/node'

export const meta: MetaFunction<typeof loader> = ({ data, params }) => {
  if (!data?.post) {
    return [
      { title: 'Post not found' },
      { name: 'robots', content: 'noindex' }
    ]
  }

  const { post } = data

  return [
    { title: `${post.title} | My Blog` },
    { name: 'description', content: post.excerpt },

    // Open Graph
    { property: 'og:title', content: post.title },
    { property: 'og:description', content: post.excerpt },
    { property: 'og:image', content: post.coverImage },
    { property: 'og:type', content: 'article' },
    { property: 'article:published_time', content: post.createdAt },
    { property: 'article:author', content: post.author.name },

    // Twitter
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:title', content: post.title },
    { name: 'twitter:description', content: post.excerpt },
    { name: 'twitter:image', content: post.coverImage },

    // Canonical
    { tagName: 'link', rel: 'canonical', href: `https://myblog.com/posts/${params.id}` },
  ]
}

// app/routes/posts.$id.tsx
import type { HeadersFunction } from '@remix-run/node'

export const headers: HeadersFunction = ({ loaderHeaders }) => ({
  'Cache-Control': loaderHeaders.get('Cache-Control') || 'max-age=300, s-maxage=3600',
  'X-Frame-Options': 'DENY',
})

// W loaderze ustaw headers
export async function loader({ params }: LoaderFunctionArgs) {
  const post = await db.post.findUnique({ where: { id: params.id } })

  return json({ post }, {
    headers: {
      'Cache-Control': 'public, max-age=60, s-maxage=600',
    }
  })
}

// app/routes/api.posts.ts (bez default export = resource route)
import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node'
import { json } from '@remix-run/node'

// GET /api/posts
export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url)
  const page = parseInt(url.searchParams.get('page') || '1')

  const posts = await db.post.findMany({
    skip: (page - 1) * 10,
    take: 10,
  })

  return json({ posts })
}

// POST /api/posts
export async function action({ request }: ActionFunctionArgs) {
  if (request.method !== 'POST') {
    return json({ error: 'Method not allowed' }, { status: 405 })
  }

  const body = await request.json()

  const post = await db.post.create({
    data: body
  })

  return json({ post }, { status: 201 })
}

// app/routes/files.$id.download.ts
export async function loader({ params }: LoaderFunctionArgs) {
  const file = await db.file.findUnique({ where: { id: params.id } })

  if (!file) {
    throw new Response('Not found', { status: 404 })
  }

  const fileContent = await storage.download(file.path)

  return new Response(fileContent, {
    headers: {
      'Content-Type': file.mimeType,
      'Content-Disposition': `attachment; filename="${file.name}"`,
      'Content-Length': file.size.toString(),
    }
  })
}

// app/routes/webhooks.stripe.ts
import type { ActionFunctionArgs } from '@remix-run/node'
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function action({ request }: ActionFunctionArgs) {
  const payload = await request.text()
  const signature = request.headers.get('stripe-signature')!

  let event: Stripe.Event

  try {
    event = stripe.webhooks.constructEvent(
      payload,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    )
  } catch (err) {
    return new Response('Invalid signature', { status: 400 })
  }

  switch (event.type) {
    case 'checkout.session.completed':
      await handleCheckoutComplete(event.data.object)
      break
    case 'customer.subscription.updated':
      await handleSubscriptionUpdate(event.data.object)
      break
  }

  return new Response('OK', { status: 200 })
}

// app/utils/db.server.ts
import { PrismaClient } from '@prisma/client'

let db: PrismaClient

declare global {
  var __db__: PrismaClient
}

// Unikaj tworzenia wielu instancji w dev mode
if (process.env.NODE_ENV === 'production') {
  db = new PrismaClient()
} else {
  if (!global.__db__) {
    global.__db__ = new PrismaClient()
  }
  db = global.__db__
}

export { db }

// app/routes/posts._index.tsx
import { db } from '~/utils/db.server'

export async function loader() {
  const posts = await db.post.findMany({
    where: { published: true },
    include: { author: true },
    orderBy: { createdAt: 'desc' }
  })

  return json({ posts })
}

// app/utils/db.server.ts
import { drizzle } from 'drizzle-orm/postgres-js'
import postgres from 'postgres'
import * as schema from './schema'

const client = postgres(process.env.DATABASE_URL!)
export const db = drizzle(client, { schema })

// app/routes/posts._index.tsx
import { db } from '~/utils/db.server'
import { posts, users } from '~/utils/schema'
import { eq, desc } from 'drizzle-orm'

export async function loader() {
  const allPosts = await db
    .select()
    .from(posts)
    .leftJoin(users, eq(posts.authorId, users.id))
    .where(eq(posts.published, true))
    .orderBy(desc(posts.createdAt))

  return json({ posts: allPosts })
}

// app/utils/session.server.ts
import { createCookieSessionStorage, redirect } from '@remix-run/node'
import bcrypt from 'bcryptjs'
import { db } from './db.server'

const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: '__session',
    httpOnly: true,
    path: '/',
    sameSite: 'lax',
    secrets: [process.env.SESSION_SECRET!],
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 30, // 30 days
  },
})

export async function createUserSession(userId: string, redirectTo: string) {
  const session = await sessionStorage.getSession()
  session.set('userId', userId)

  return redirect(redirectTo, {
    headers: {
      'Set-Cookie': await sessionStorage.commitSession(session),
    },
  })
}

export async function getUserId(request: Request) {
  const session = await sessionStorage.getSession(
    request.headers.get('Cookie')
  )
  return session.get('userId')
}

export async function requireUserId(request: Request) {
  const userId = await getUserId(request)
  if (!userId) {
    throw redirect('/login')
  }
  return userId
}

export async function logout(request: Request) {
  const session = await sessionStorage.getSession(
    request.headers.get('Cookie')
  )

  return redirect('/login', {
    headers: {
      'Set-Cookie': await sessionStorage.destroySession(session),
    },
  })
}

// Login action
export async function login(email: string, password: string) {
  const user = await db.user.findUnique({ where: { email } })

  if (!user) return null

  const isValid = await bcrypt.compare(password, user.passwordHash)

  if (!isValid) return null

  return user
}