// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Todo {
  id        Int      @id
}

-- CreateTable
CREATE TABLE "Todo" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT
);

// ry

model Todo {
  id        Int      @id
  content   String   @default("")
}

-- RedefineTables
PRAGMA foreign_keys=OFF;
CREATE TABLE "new_Todo" (
    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    "content" TEXT NOT NULL DEFAULT ''
);
INSERT INTO "new_Todo" ("id") SELECT "id" FROM "Todo";
DROP TABLE "Todo";
ALTER TABLE "new_Todo" RENAME TO "Todo";
PRAGMA foreign_key_check;
PRAGMA foreign_keys=ON;

ALTER TABLE "Todo" ADD COLUMN "content" TEXT NOT NULL DEFAULT '';

ALTER TABLE "Todo" ADD COLUMN "content" TEXT NOT NULL DEFAULT '';

$ pnpm add drizzle-orm drizzle-kit -D

import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';

export const users = sqliteTable('users', {
  id: integer('id').primaryKey(),
  name: text('full_name'),
});

$ pnpm drizzle-kit generate:sqlite --out drizzle/migrations --schema drizzle/schema.ts

import { drizzle } from 'drizzle-orm/better-sqlite3';
import { migrate } from 'drizzle-orm/better-sqlite3/migrator';
import Database from "better-sqlite3";

const sqlite = new Database("test.db");
const db = drizzle(sqlite);
migrate(db, {
  migrationsFolder: "drizzle/migrations",
});

import { drizzle } from 'drizzle-orm/better-sqlite3';
import Database from 'better-sqlite3';
import { users } from "./schema";

const sqlite = new Database('test.db');
const db = drizzle(sqlite);

db.insert(users).values({ name: "John Doe" }).run();

const allUsers = db.select().from(users).all();
console.log("allUsers", allUsers); // allUsers [ { id: 1, name: 'John Doe' } ]

# 最初に --local をつけて実験していたが、今回は本番向けなのでつけない
$ pnpm wrangler d1 create testdb3

[[ d1_databases ]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "testdb3"
database_id = "...."

$ wrangler d1 migrations create testdb3 init

CREATE TABLE t(id INTEGER, name TEXT);

$ pnpm wrangler d1 migrations apply testdb3

# 確認
$ pnpm wrangler d1 execute testdb3 --command="select count(*) from t;"

export type Env = {
	DB: D1Database
}

export default {
	async fetch(
		request: Request,
		env: Env,
		ctx: ExecutionContext
	): Promise<Response> {
		const ret = await env.DB.prepare(`SELECT * FROM t`).all();
		return Response.json(ret.results);
	},
};

$ wrangler dev src/index.ts --persist

$ pnpm wrangler d1 execute testdb3 --command="select * from d1_migrations;"

🌀 Mapping SQL input into an array of statements
🌀 Parsing 1 statements
🌀 Executing on testdb3 (cbdf14e0-bf7f-4211-86d5-8225a65b4564):
🚣 Executed 1 command in 4.813999995589256ms
┌────┬───────────────┬─────────────────────┐
│ id │ name          │ applied_at          │
├────┼───────────────┼─────────────────────┤
│ 1  │ 0000_init.sql │ 2023-04-28 16:24:54 │
└────┴───────────────┴─────────────────────┘

$ npx wrangler generate d1-drizzle
 ⛅️ wrangler 2.12.1 (update available 2.17.0)
-------------------------------------------------------
Using npm as package manager.
✨ Created d1-drizzle/wrangler.toml
✔ Would you like to use git to manage this Worker? … yes
✨ Initialized git repository at d1-drizzle
✔ No package.json found. Would you like to create one? … yes
✨ Created d1-drizzle/package.json
✔ Would you like to use TypeScript? … yes
✨ Created d1-drizzle/tsconfig.json
✔ Would you like to create a Worker at d1-drizzle/src/index.ts? › Fetch handler
✨ Created d1-drizzle/src/index.ts
✔ Would you like us to write your first test with Vitest? … yes
✨ Created d1-drizzle/src/index.test.ts
npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 165 packages, and audited 166 packages in 25s

20 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✨ Installed @cloudflare/workers-types, typescript, and vitest into devDependencies

To start developing your Worker, run `cd d1-drizzle && npm start`
To start testing your Worker, run `npm test`
To publish your Worker to the Internet, run `npm run deploy`

$ tree . -I node_modules
.
├── package-lock.json
├── package.json
├── src
│   ├── index.test.ts
│   └── index.ts
├── tsconfig.json
└── wrangler.toml

$ rm -r node_modules package-lock.json
$ pnpm install

# 起動確認

$ pnpm wrangler dev --local

$ pnpm add drizzle-kit drizzle-orm -D

/*
  DO NOT RENAME THIS FILE FOR DRIZZLE-ORM TO WORK
*/
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';

export const users = sqliteTable('users', {
  id: integer('id').primaryKey().notNull(),
  name: text('name').notNull(),
});

$ pnpm drizzle-kit generate:sqlite --out migrations --schema src/schema.ts
drizzle-kit: v0.17.6
drizzle-orm: v0.25.3

1 tables
users 2 columns 0 indexes 0 fks

[✓] Your SQL migration file ➜ migrations/0000_acoustic_doorman.sql

$ tree migrations/
migrations/
├── 0000_acoustic_doorman.sql
└── meta
    ├── 0000_snapshot.json
    └── _journal.json

CREATE TABLE `users` (
	`id` integer PRIMARY KEY NOT NULL,
	`name` text NOT NULL
);

$ pnpm wrangler d1 create dzltest

✅ Successfully created DB 'dzltest'!

Add the following to your wrangler.toml to connect to it from a Worker:

[[ d1_databases ]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "dzltest"
database_id = "<your-id>"

$ pnpm add better-sqlite3 --dev

$ wrangler d1 migrations apply dzltest --local
🌀 Mapping SQL input into an array of statements
🌀 Loading DB at .wrangler/state/d1/DB.sqlite3
🌀 Mapping SQL input into an array of statements
🌀 Loading DB at .wrangler/state/d1/DB.sqlite3
Migrations to be applied:
┌───────────────────────────┐
│ Name                      │
🌀 Mapping SQL input into an array of statements
🌀 Loading DB at .wrangler/state/d1/DB.sqlite3
┌───────────────────────────┬────────┐
│ Name                      │ Status │
├───────────────────────────┼────────┤
│ 0000_acoustic_doorman.sql │ ✅       │
└───────────────────────────┴────────┘

import { drizzle } from 'drizzle-orm/d1';
import { users } from './schema';

export interface Env {
  DB: D1Database;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    const db = drizzle(env.DB);
    const result = await db.select().from(users).all();
    return Response.json(result);
  },
};

$ pnpm wrangler d1 migrations apply dzltest

🌀 Mapping SQL input into an array of statements
🌀 Parsing 1 statements
🌀 Executing on dzltest (ab8b338d-2bdb-4c24-9f8e-1095dc814506):
🚣 Executed 1 command in 1.704942001029849ms
🚣 Executed 1 command in 10.565411001443865ms
🌀 Mapping SQL input into an array of statements
🌀 Parsing 1 statements
🌀 Executing on dzltest (ab8b338d-2bdb-4c24-9f8e-1095dc814506):
🚣 Executed 1 command in 1.6205519996583462ms
Migrations to be applied:
┌───────────────────────────┐
│ Name                      │
🌀 Mapping SQL input into an array of statements
🌀 Parsing 2 statements
🌀 Executing on dzltest (ab8b338d-2bdb-4c24-9f8e-1095dc814506):
🚣 Executed 1 command in 0.4101349990814924ms
🚣 Executed 1 command in 7.989365998655558ms
┌───────────────────────────┬────────┐
│ Name                      │ Status │
├───────────────────────────┼────────┤
│ 0000_acoustic_doorman.sql │ ✅       │
└───────────────────────────┴────────┘

$ pnpm wrangler dev

$ pnpm wrangler d1 execute dzltest --command="select * from d1_migrations;"

🌀 Mapping SQL input into an array of statements
🌀 Parsing 1 statements
🌀 Executing on dzltest (ab8b338d-2bdb-4c24-9f8e-1095dc814506):
🚣 Executed 1 command in 86.91357399895787ms
┌────┬───────────────────────────┬─────────────────────┐
│ id │ name                      │ applied_at          │
├────┼───────────────────────────┼─────────────────────┤
│ 1  │ 0000_acoustic_doorman.sql │ 2023-04-29 08:43:11 │
└────┴───────────────────────────┴─────────────────────┘

$ pnpm wrangler publish
Your worker has access to the following bindings:
- D1 Databases:
  - DB: dzltest (ab8b338d-2bdb-4c24-9f8e-1095dc814506)
Total Upload: 6.47 KiB / gzip: 2.08 KiB
Uploaded d1-drizzle (1.77 sec)
Published d1-drizzle (3.74 sec)
  https://d1-drizzle.mizchi.workers.dev
Current Deployment ID: b7994ea4-6f54-4d33-b87e-60de1c6a02dd

$ npx create-next-app@latest my-next-app
$ cd my-next-app
$ npm install

/** @type {import('next').NextConfig} */
const nextConfig = {
  runtime: 'edge',
  swcMinify: true,
  experimental: {
    appDir: true,
  },
}
module.exports = nextConfig

$ npx install @cloudflare/next-on-pages vercel -D
$ npx @cloudflare/next-on-pages
$ npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat

# プロセスを2つ使う。next のビルドコマンド。
$ npx @cloudflare/next-on-pages --watch
# 別のターミナルで wrangler を起動
$ npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
    <div>
      hello world 4
    </div>
  )
  // ry
}

$ tree . -I node_modules -I pages
.
├── functions
│   └── api
│       └── [[route]].ts
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── App.tsx
│   └── index.tsx
├── tsconfig.json
├── vite.config.ts
└── wrangler.toml

wrangler pages dev --local -- vite

...
[mf:wrn] Service bindings are experimental. There may be breaking changes in the future.
[mf:inf] Worker reloaded! (55.71KiB)
[mf:inf] Listening on 0.0.0.0:8788
[mf:inf] - http://127.0.0.1:8788
[mf:inf] - http://192.168.11.2:8788
[mf:inf] Updated `Request.cf` object cache!

import { useState, useEffect } from 'react'

const App = () => {
  const [message, setMessage] = useState('')

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api')
      const data = await res.json() as any;
      console.log("hello", data);
      setMessage(data.message)
    }
    fetchData()
  }, [])

  return <h1>{message}</h1>
}

export default App

 npx create-remix@latest plane-remix
? What type of app do you want to create? Just the 
basics
? Where do you want to deploy? Choose Remix App 
Server if you're unsure; it's easy to change 
deployment targets. Cloudflare Pages
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? No
💿 That's it! `cd` into "/Users/kotaro.chikuba/proj/plane-remix" and check the README for development and deploy instructions!

$ tree . -I node_modules
.
├── README.md
├── app
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root.tsx
│   └── routes
│       └── _index.tsx
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── _headers
│   ├── _routes.json
│   └── favicon.ico
├── remix.config.js
├── remix.env.d.ts
├── server.ts
├── tsconfig.json
└── wrangler.toml

$ pnpm install

    "dev:remix": "remix watch",
    "dev:wrangler": "cross-env NODE_ENV=development npm run wrangler",
    "dev": "npm-run-all build --parallel \"dev:*\"",

    "build": "remix build",
    "dev": "NODE_ENV=development npm-run-all build --parallel dev:*",
    "dev:remix": "remix watch",
    "dev:wrangler": "wrangler pages dev ./public --local --persist",
    "start": "NODE_ENV=production wrangler pages dev ./public",
    "typecheck": "tsc -p . --noEmit"

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  devServerBroadcastDelay: 1000,
  ignoredRouteFiles: ["**/.*"],
  server: "./server.ts",
  serverBuildPath: "functions/[[path]].js",
  serverConditions: ["worker"],
  serverDependenciesToBundle: "all",
  serverMainFields: ["browser", "module", "main"],
  serverMinify: true,
  serverModuleFormat: "esm",
  serverPlatform: "neutral",
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
};

$ du -hs public/ functions/
268K    public/
1.7M    functions/

$ la functions/
total 3432
-rw-r--r--  1 kotaro.chikuba  staff   206K May  1 17:27 [[path]].js
-rw-r--r--  1 kotaro.chikuba  staff   1.5M May  1 17:09 [[path]].js.map

import type { LoaderArgs } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { useLoaderData } from "@remix-run/react";

export const loader = async ({ context }: LoaderArgs) => {
  const db = context.DB as D1Database;
  const { results } = await db
    .prepare("SELECT 1 as x")
    .all();

  return json({
    results: results ?? [],
  });
};

import { Layout } from "../components/Layout";
export default function WithServer() {
  const { results } = useLoaderData<typeof loader>();
  return (
    <Layout>
      <h2>With Server</h2>
      <pre><code>{JSON.stringify(results, null, 2)}</code></pre>
    </Layout>
  );
}

$ pnpm wrangler pages dev --local false
🚧 'wrangler pages <command>' is a beta command. Please report any issues to github.com/cloudflare/wor…

✘ [ERROR] Only local mode is supported at the moment.

/*
  DO NOT RENAME THIS FILE FOR DRIZZLE-ORM TO WORK
*/
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';

export const users = sqliteTable('users', {
  id: integer('id').primaryKey().notNull(),
  name: text('name').notNull(),
});

# 必要だったらmigration 生成。今回は `migrations` もそのままコピーした
# pnpm drizzle-kit generate:sqlite --out migrations --schema app/schema.ts

# 開発環境向けに apply
$ pnpm wrangler d1 migrations apply dzltest --local

    "dev:wrangler": "wrangler pages dev ./public --persist",

import type { LoaderArgs } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { useLoaderData } from "@remix-run/react";

export const loader = async ({ context }: LoaderArgs) => {
  const db = context.DB as D1Database;
  console.log("db", db);
  const { results } = await db
    .prepare("SELECT * from users")
    .all();

  return json({
    results: results ?? [],
  });
};

export default function WithServer() {
  const { results } = useLoaderData<typeof loader>();
  return (
    <>
      <h2>With Server</h2>
      <pre><code>{JSON.stringify(results, null, 2)}</code></pre>
    </>
  );
}

/*
  DO NOT RENAME THIS FILE FOR DRIZZLE-ORM TO WORK
*/
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
import { InferModel } from 'drizzle-orm';

export const users = sqliteTable('users', {
  id: integer('id').primaryKey().notNull(),
  name: text('name').notNull(),
});

export type User = InferModel<typeof users>;

import { drizzle } from 'drizzle-orm/d1';

export function createClient(db: D1Database) {
  return drizzle(db);
}

import type { LoaderArgs } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { useLoaderData } from "@remix-run/react";
import { createClient } from "../db.server";
import { users } from "../schema";

export const loader = async ({ context }: LoaderArgs) => {
  const db = createClient(context.DB as D1Database);
  const results = await db.select().from(users).all();
  return json({results});
};

export default function WithServer() {
  const { results } = useLoaderData<typeof loader>();
  console.log("schema", users);
  return (
    <>
      <h2>With Server</h2>
      <pre><code>{JSON.stringify(results, null, 2)}</code></pre>
    </>
  );
}

name = "remix-d1-drizzle"
compatibility_date = "2023-04-30"
compatibility_flags = ["streams_enable_constructors"]

[[ d1_databases ]]
binding = "DB"
database_name = "dzltest"
database_id = "ab8b338d-2bdb-4c24-9f8e-1095dc814506"

# production build
$ NODE_ENV=production pnpm remix build


# first release
$ pnpm wrangler pages publish ./public
No project selected. Would you like to create one or use an
existing project?
❯ Create a new project
  Use an existing project
✔ Enter the name of your new project: … remix-d1-drizzle
✔ Enter the production branch name: … main
✨ Successfully created the 'remix-d1-drizzle' project.
▲ [WARNING] Warning: Your working directory is a git repo and has uncommitted changes

  To silence this warning, pass in --commit-dirty=true


✨ Compiled Worker successfully
🌍  Uploading... (9/9)

✨ Success! Uploaded 9 files (102.19 sec)

✨ Uploading _headers
✨ Uploading Functions bundle
✨ Uploading _routes.json
✨ Deployment complete! Take a peek over at https://9bb9e46e.remix-d1-drizzle.pages.dev

$ pnpm wrangler kv:namespace create remix_d1_drizzle_session_kv
$ pnpm wrangler kv:namespace create remix_d1_drizzle_session_kv_preview --preview

kv_namespaces = [
  # remix_d1_drizzle_session_kv / remix_d1_drizzle_session_kv_preview
  { binding = "SESSION_KV", id = "<your-kv-hash>", preview_id = "<your-kv-preview-hash>" }
]

import {
  createCookie,
  createWorkersKVSessionStorage,
} from "@remix-run/cloudflare";

export function createSessionCookie(kv: KVNamespace) {
  const cookie = createCookie("__session", {
    secrets: ["mysecretkey"],
    sameSite: true,
    httpOnly: true,
    secure: true,
  });
  return createWorkersKVSessionStorage({
    kv,
    cookie
  });
}

import { Authenticator } from "remix-auth";
import { FormStrategy } from "remix-auth-form";
import { createSessionCookie } from "../sessions.server";

export type AuthUser = {
  email: string;
  password: string;
}

let _authenticator: Authenticator<AuthUser> | undefined;
export function getAuthenticator(kv: KVNamespace): Authenticator<AuthUser> {
  // init once
  if (_authenticator == null) {
    _authenticator = new Authenticator<AuthUser>(createSessionCookie(kv));
    _authenticator.use(
      new FormStrategy(
        async (req) => {
          const form = req.form;
          const email = form.get("email") as string;
          const password = form.get("password") as string;
          if (email === 'miz404@gmail.com' && password === 'test') {
            return {
              email,
              password  
            };
          }
          throw new Error("Invalid email or password");
        },
      ),
      "user-pass"
    );
  }
  return _authenticator;
}

import type { ActionArgs, LoaderArgs } from "@remix-run/node";
import { Form } from "@remix-run/react";
import { getAuthenticator } from "../services/auth.server";

export async function action({ request, context }: ActionArgs) {
  console.log('on action');
  const authenticator = getAuthenticator(context.SESSION_KV as KVNamespace);
  return await authenticator.authenticate('user-pass', request, {
    successRedirect: "/",
    // failureRedirect: "/login",
  });
};

export async function loader({ request, context }: LoaderArgs) {
  const authenticator = getAuthenticator(context.SESSION_KV as KVNamespace);
  const user = await authenticator.isAuthenticated(request, {
    successRedirect: "/",
  });
  return user;
};

import { Layout } from "../components/Layout";
export default function Login() {
  return (
    <Layout>
      <Form method="post">
        <input type="email" name="email" required />
        &nbsp;
        <input
          type="password"
          name="password"
          autoComplete="current-password"
          required
        />
        <button>Sign In</button>
      </Form>
    </Layout>
  );
}

import type { ActionArgs, LoaderArgs } from "@remix-run/node";
import { Form } from "@remix-run/react";
import { getAuthenticator } from "../services/auth.server";

export async function action({ request, context }: ActionArgs) {
  const authenticator = getAuthenticator(context.SESSION_KV as KVNamespace);
  return authenticator.logout(request, {
    redirectTo: '/login'
  });
};

// First we create our UI with the form doing a POST and the inputs with the
// names we are going to use in the strategy
import { Layout } from "../components/Layout";
export default function Logout() {
  return (
    <Layout>
      <Form method="post">
        <button>Logout</button>
      </Form>
    </Layout>
  );
}

$ npx wrangler generate cf-worker-vars

export default {
	async fetch(
		request: Request,
		env: Env,
		ctx: ExecutionContext
	): Promise<Response> {
		return Response.json(env);
	},
};

[vars]
x = 1

$ wrangler dev
{"x": 1}
$ wrangler dev --local
{"x": 1}
$ wnagler publish
{"x": 1}

$ wrangler dev
{"from_dev_vars":"3","x":1}
$ wrangler dev --local
{"from_dev_vars":"3"}
$ wrangler publish
{}

$ pnpm wrangler secret put foo
 ⛅️ wrangler 2.12.1 (update available 2.18.0)
-------------------------------------------------------
✔ Enter a secret value: … ****
🌀 Creating the secret for the Worker "cf-worker-vars" 
✨ Success! Uploaded secret foo

$ wrangler dev --local
{}
$ wrangler dev
{"foo":"unko"}
$ wrangler publish
{"foo":"unko"}

$ pnpm wrangler secret delete foo
 ⛅️ wrangler 2.12.1 (update available 2.18.0)
-------------------------------------------------------
✔ Are you sure you want to permanently delete the secret foo on the Worker cf-worker-vars? … yes
🌀 Deleting the secret foo on the Worker cf-worker-vars
✨ Success! Deleted secret foo

[vars]
x = 2

[env.production.vars]
z = 4
x = 1

$ wrangler dev --local
{"x": 1}
$ wrangler dev --local --env production
{"z": 4, "x": 2}

$ pnpm wrangler publish --env production
Your worker has access to the following bindings:
- Vars:
  - z: 4
  - x: 1
Current Deployment ID: e5dbc52a-b7b2-4e27-b8e7-6b47d5eac34e

GOOGLE_AUTH_CALLBACK_URL="http://localhost:8788/auth/google/callback"
GOOGLE_AUTH_CLIENT_ID=""
GOOGLE_AUTH_CLIENT_SECRET=""
SESSION_SECRET=""

import type { AppLoadContext } from "@remix-run/cloudflare";
import {
  createCookie,
  createWorkersKVSessionStorage,
} from "@remix-run/cloudflare";

import { Authenticator } from "remix-auth";
import { GoogleStrategy } from "remix-auth-google";

export type AuthUser = {
  id: string;
  name: string;
  email: string;
}

let _authenticator: Authenticator<AuthUser> | undefined;
export function getAuthenticator(context: AppLoadContext): Authenticator<AuthUser> {
  // console.log('[auth] getAuthenticator', 'context', context);
  if (_authenticator == null) {
    // const cookie = createSessionCookie(context);
    const cookie = createCookie("__session", {
      secrets: [context.SESSION_SECRET as string],
      path: "/",
      sameSite: "lax",
      httpOnly: true,
      secure: process.env.NODE_ENV ==  "production",
    });
    console.log('[auth.server] cookie', cookie);
    const sessionStorage = createWorkersKVSessionStorage({
      kv: context.SESSION_KV as KVNamespace,
      cookie
    });    
    _authenticator = new Authenticator<AuthUser>(sessionStorage);
    /// google
    const googleAuth = new GoogleStrategy({
      clientID: context.GOOGLE_AUTH_CLIENT_ID as string,
      clientSecret: context.GOOGLE_AUTH_CLIENT_SECRET as string,
      callbackURL: context.GOOGLE_AUTH_CALLBACK_URL as string,
    }, async ({ profile }) => {
      console.log('[auth] google callback', 'profile', profile);
      return {
        id: profile.id,
        name: profile.displayName,
        email: profile.emails?.[0].value,
      };
    });
    _authenticator.use(googleAuth);
  }
  return _authenticator;
}

import { redirect, type ActionArgs } from "@remix-run/cloudflare";
import { getAuthenticator } from '~/services/auth.server'

export const loader = () => redirect('/login')

export const action = ({ request, context }: ActionArgs) => {
  const authenticator = getAuthenticator(context);
  return authenticator.authenticate('google', request, {
    successRedirect: '/',
    failureRedirect: '/login',
  })
}

import { LoaderArgs } from '@remix-run/node';
import { getAuthenticator } from '../services/auth.server'

export let loader = ({ request, context }: LoaderArgs) => {
  const authenticator = getAuthenticator(context)
  return authenticator.authenticate('google', request, {
    successRedirect: '/',
    failureRedirect: '/login',
  })
}

import type { LoaderArgs } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { useLoaderData } from "@remix-run/react";
import { Form } from "@remix-run/react";
import { getAuthenticator } from "../services/auth.server";
import { Layout } from "../components/Layout";

export async function loader({ request, context }: LoaderArgs) {
  const authenticator = getAuthenticator(context);
  const user = await authenticator.isAuthenticated(request);
  return json({
    user,
  });
};

export default function Login() {
  const { user } = useLoaderData<typeof loader>();

  if (user) {
    return (
      <Layout>
        <pre><code>{JSON.stringify(user)}</code></pre>
        <Form method="post" action="/auth/logout">
          <button>Logout</button>
        </Form>
      </Layout>
    );
  }
  return (
    <Layout>
      <Form action="/auth/google" method="post">
        <button>Login with Google</button>
      </Form>
    </Layout>
  );
}

import { LoaderArgs } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { Form, useActionData } from "@remix-run/react";

export const action = ({ request }: LoaderArgs) => {
  return json({ value: 1, at: Date.now()});
}

export default function FormPage() {
  const actionData = useActionData<typeof action>();
  return (
    <>
      <Form method="post">
        <fieldset>
          <legend>FormAction</legend>
          <label htmlFor="value">value</label>
          &nbsp;
          <input name="value" defaultValue={actionData?.value} />
          <input type="submit" value="submit" />
        </fieldset>
      </Form>
      {actionData?.at && (<div>at: {actionData.at}</div>)}
    </>
  );
}

import { LoaderArgs } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";
import { Form, useActionData, useLoaderData, useNavigation } from "@remix-run/react";

export const action = async ({ request }: LoaderArgs) => {
  const form = await request.formData();
  const val = form.get('value');
  if (val == "" || val == null) {
    return json({
      ok: false as const,
      errors: [
        { field: 'value', message: 'value is empty'}
      ]
    });
  }
  await new Promise((resolve) => setTimeout(resolve, 500));
  return json({
    ok: true as const,
    at: Date.now(),
  });
}

export const loader = async ({ request }: LoaderArgs) => {
  return json({ ok: false as const, value: 0, at: Date.now()});
}

export default function UserSettingPage() {
  const { value: initialValue } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  return (
    <>
      <Form method="post">
        <fieldset disabled={navigation.state === 'submitting'}>
          <legend>FormAction</legend>
          <label htmlFor="value">value</label>
          &nbsp;
          <input name="value" defaultValue={initialValue} />
          <input type="submit" value="submit" />
        </fieldset>
      </Form>
      {
        actionData?.ok === true
          ? <>
            Saved at {actionData.at}
          </>
          : <>
            {
              actionData?.errors.map((error, i) => {
                return <div key={i} style={{color: 'red'}}>{error.field}: {error.message}</div>
              })
            }
          </>
      }
    </>
  );
}