カスタムドメインで Preview と Production 間の Cookie 共有を実現する方法

1. Preview で「ログイン」クリック
   ↓
2. Google OAuth 開始（state を Cookie に保存）
   ↓
3. Google が Production の callback URL にリダイレクト
   （Production URL は Google に登録済み）
   ↓
4. Production が認証を処理し、Preview にリダイレクト
   ↓
5. Preview でセッション Cookie を確認してログイン状態を維持

example.com に設定した Cookie
  ├─ app.example.com     ✅ 共有可能
  ├─ api.example.com     ✅ 共有可能
  └─ staging.example.com ✅ 共有可能

悪意のあるサイト: evil.vercel.app
ターゲット: victim.vercel.app

もし PSL がなければ:
evil.vercel.app が vercel.app に Cookie を設定
  → victim.vercel.app でもその Cookie が読み取れてしまう

// Vercel, Inc : https://vercel.com/
// Submitted by Connor Davis <connor@vercel.com>
vercel.app
vercel.dev
now.sh

linto-dev.vercel.app に設定した Cookie
  ├─ linto-dev-git-feature.vercel.app  ❌ 共有不可
  └─ linto-dev-xxx.vercel.app          ❌ 共有不可

example.com に設定した Cookie
  ├─ preview-feature.example.com  ✅ 共有可能
  ├─ staging.example.com          ✅ 共有可能
  └─ app.example.com              ✅ 共有可能

変更前（デフォルト）:
https://my-app-git-feature-username.vercel.app

変更後（カスタムドメイン）:
https://my-app-git-feature.preview.example.com

*.preview.example.com  CNAME  cname.vercel-dns.com

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { oAuthProxy } from "better-auth/plugins";
import { db } from "@/db";
import { env } from "@/env";

// 本番ドメイン
const PRODUCTION_DOMAIN = "example.com";
const PRODUCTION_URL = `https://app.${PRODUCTION_DOMAIN}`;

export const auth = betterAuth({
  baseURL: env.BETTER_AUTH_URL,
  trustedOrigins: [
    `https://*.${PRODUCTION_DOMAIN}`, // すべてのサブドメインを信頼
  ],
  database: drizzleAdapter(db, {
    provider: "sqlite",
  }),
  advanced: {
    // サブドメイン間で Cookie を共有
    crossSubDomainCookies: {
      enabled: true,
      domain: `.${PRODUCTION_DOMAIN}`, // 先頭のドットが重要
    },
  },
  plugins: [
    oAuthProxy({
      currentURL: env.BETTER_AUTH_URL,
      productionURL: PRODUCTION_URL,
    }),
  ],
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
      redirectURI: `${PRODUCTION_URL}/api/auth/callback/google`,
    },
  },
});

# .env.local（ローカル開発）
BETTER_AUTH_URL=http://localhost:3000

# .env.production（本番）
BETTER_AUTH_URL=https://app.example.com

# Preview 環境では Vercel が自動設定
# BETTER_AUTH_URL=https://my-app-git-feature.preview.example.com

- name: Deploy to Vercel
  run: |
    BRANCH_SLUG=$(echo "${{ github.head_ref }}" | tr '[:upper:]' '[:lower:]' | tr -cd '[:alnum:]-')
    PREVIEW_URL="https://my-app-git-${BRANCH_SLUG}.preview.example.com"

    vercel deploy --prebuilt \
      --env BETTER_AUTH_URL=$PREVIEW_URL \
      --token=${{ secrets.VERCEL_TOKEN }}

trustedOrigins: [
  `https://*.${PRODUCTION_DOMAIN}`,
],

// src/lib/auth.ts
const isPreview = env.VERCEL_ENV === "preview";

export const auth = betterAuth({
  // Preview では OAuth を無効化
  socialProviders: isPreview ? {} : {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
});

import { redis } from "@/lib/redis";

export const auth = betterAuth({
  account: {
    stateStore: {
      async get(state) {
        return await redis.get(`oauth:state:${state}`);
      },
      async set(state, value, expiresIn) {
        await redis.set(`oauth:state:${state}`, value, "EX", expiresIn);
      },
      async delete(state) {
        await redis.del(`oauth:state:${state}`);
      },
    },
  },
});