ブログを作るぞ(n 回目)

-- better-auth schema
-- https://www.better-auth.com/docs/concepts/database#core-schema
CREATE TABLE user (
  id TEXT PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL UNIQUE,
  emailVerified BOOLEAN DEFAULT FALSE,
  image TEXT,
  createdAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE session (
  id TEXT PRIMARY KEY,
  userId TEXT NOT NULL,
  token TEXT NOT NULL UNIQUE,
  expiresAt TIMESTAMP NOT NULL,
  ipAddress TEXT,
  userAgent TEXT,
  createdAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (userId) REFERENCES user(id) ON DELETE CASCADE
);

CREATE TABLE account (
  id TEXT PRIMARY KEY,
  userId TEXT NOT NULL,
  accountId TEXT NOT NULL,
  providerId TEXT NOT NULL,
  accessToken TEXT,
  refreshToken TEXT,
  accessTokenExpiresAt TIMESTAMP,
  refreshTokenExpiresAt TIMESTAMP,
  scope TEXT,
  idToken TEXT,
  password TEXT,
  createdAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (userId) REFERENCES user(id) ON DELETE CASCADE,
  UNIQUE(providerId, accountId)
);

CREATE TABLE verification (
  id TEXT PRIMARY KEY,
  identifier TEXT NOT NULL,
  value TEXT NOT NULL,
  expiresAt TIMESTAMP NOT NULL,
  createdAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

export default defineConfig({
  ...
  vite: {
    resolve: {
      // Use react-dom/server.edge instead of react-dom/server.browser for React 19.
      // Without this, MessageChannel from node:worker_threads needs to be polyfilled.
      alias: import.meta.env.PROD? { "react-dom/server": "react-dom/server.edge" } : undefined,
    }
  }
})

import { type ActionError, actions } from "astro:actions"
import { navigate } from "astro:transitions/client"
import { useActionState } from "react"

async function loginFormAction(_: ActionError | null, formData: FormData) {
  const { error } = actions.login(formData)

  if (error) return error

  await navigate("...")

  return null
}

export default function LoginForm() {
  const [ error, formAction ] = useActionState(loginFormAction, null)

  return (
    <form action={formAction}>
      ...
    </form>
  )
}

import { defineAction } from "astro:actions"
import { SetCookie } from "@mjackson/headers"

// cookies.set() した時に自動でエンコードされて値が変わってしまうので、
// 何も変化させないようにする
const encode = (value: string) => value

export const server = {
  login: defineAction({
    input: ...,
    async handler(input, context) {
      const { headers } = await auth.api.signInEmail({
        body: input,
        returnHeaders: true
      })
      const setCookies = headers.getSetCookie()

      setCookies.forEach(setCookie => {
        const { name, value, sameSite, ...options } = new SetCookie(setCookie)
        // AstroCookie の sameSite と @mjackson/headers SetCookie の sameSite の型は少し違うので合わせる為に変換する
        // AstroCookie's sameSite: boolean | 'lax' | 'none' | 'strict'
        // SetCookie's sameSite: 'Strict' | 'Lax' | 'None'
        const lowerCaseSameSite = sameSite?.toLowerCase() as LowerCase<NonNullable<typeof sameSite>> | undefined

        // どちらも string? なので型エラーを消す為にも確認しておく
        if (!name || !value) return

        // 他の options はそのまま渡して OK, encode を忘れずに
        context.cookies.set(name, value, { sameSite: lowerCaseSameSite, encode, ...options })
      })

      return { success: true }
    }
  })
}