(sessionStorage);
35 | const googleAuth = new GoogleStrategy({
36 | clientID: context.GOOGLE_AUTH_CLIENT_ID as string,
37 | clientSecret: context.GOOGLE_AUTH_CLIENT_SECRET as string,
38 | callbackURL: context.GOOGLE_AUTH_CALLBACK_URL as string,
39 | }, async ({ profile }) => {
40 | const db = createClient(context.DB as D1Database);
41 | const newUser: CreateUser = {
42 | googleProfileId: profile.id,
43 | iconUrl: profile.photos?.[0].value,
44 | displayName: profile.displayName,
45 | registeredAt: new Date(),
46 | };
47 | const ret = await db.insert(users).values(newUser).returning().get();
48 | return {
49 | id: ret.id,
50 | };
51 | });
52 | _authenticator.use(googleAuth);
53 | }
54 | return _authenticator;
55 | }
56 |
--------------------------------------------------------------------------------
/app/routes/validated-form-example.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * This is an example of using remix-validated-form and zod
3 | * If you drop this libraries, bundle size will be reduced by -100kb. (400kb to 300kb at first)
4 | */
5 | import { DataFunctionArgs, json } from "@remix-run/cloudflare";
6 | import { useActionData } from "@remix-run/react";
7 | import { withZod } from "@remix-validated-form/with-zod";
8 | import {
9 | ValidatedForm,
10 | useField,
11 | useIsSubmitting,
12 | validationError,
13 | } from "remix-validated-form";
14 | import { z } from "zod";
15 |
16 | const validator = withZod(
17 | z.object({
18 | firstName: z
19 | .string()
20 | .min(1, { message: "First name is required" }),
21 | lastName: z
22 | .string()
23 | .min(1, { message: "Last name is required" }),
24 | email: z
25 | .string()
26 | .min(1, { message: "Email is required" })
27 | .email("Must be a valid email"),
28 | })
29 | );
30 |
31 | export const action = async ({
32 | request,
33 | }: DataFunctionArgs) => {
34 | const data = await validator.validate(
35 | await request.formData()
36 | );
37 | if (data.error) return validationError(data.error);
38 | const { firstName, lastName, email } = data.data;
39 |
40 | return json({
41 | title: `Hi ${firstName} ${lastName}!`,
42 | description: `Your email is ${email}`,
43 | });
44 | };
45 |
46 | export default function ValidatedFormExample() {
47 | const data = useActionData();
48 | return (
49 | <>
50 |
51 | This is remix-validated-form example
52 |
53 |
54 |
55 |
56 |
57 | {data && (
58 | {JSON.stringify(data)}
59 | )}
60 |
61 |
62 |
63 | );
64 | }
65 |
66 | const InputWithLabel = ({ name, label }: { name: string, label: string }) => {
67 | const { error, getInputProps } = useField(name);
68 | return (
69 |
70 |
71 |
72 | {error && (
73 | {error}
74 | )}
75 |
76 | );
77 | };
78 |
79 | const SubmitButton = () => {
80 | const isSubmitting = useIsSubmitting();
81 | return (
82 |
85 | );
86 | };
87 |
88 |
--------------------------------------------------------------------------------
/docs/01_setup.md:
--------------------------------------------------------------------------------
1 | # Setup
2 |
3 | ## Steps
4 |
5 | - Google OAuth
6 | - Cloudflare
7 | - GitHub Actions
8 | - Local
9 |
10 | ## Setup Google OAuth
11 |
12 | - Enter https://console.cloud.google.com/
13 | - Search "APIs & Service"
14 | - Create "OAuth 2.0 Client IDs"
15 |
16 | and fullfill forms.
17 |
18 | ### Authorized JavaScript origins
19 |
20 | http://localhost:8788 and `your-deploy-url`
21 |
22 | ### Authorized redirect URIs
23 |
24 | http://localhost:8788/auth/google/callback and `your-deploy-url/auth/google/callback`
25 |
26 | ## Setup cloudflare project
27 |
28 | Now `wrangler pages publish ...` does not read `wrangler.toml` bindings. So you should put values on cloudflare pages dashboard by hand.
29 |
30 | ### Create a project
31 |
32 | If you does not create project, create at first.
33 |
34 | https://dash.cloudflare.com > Pages > Create a Project
35 |
36 | ### Setting environments and bindings
37 |
38 | https://dash.cloudflare.com > Pages > `ProjectName` > Settings > Environment variables
39 |
40 | Fullfil production values like `.dev.vars`
41 |
42 | ```
43 | GOOGLE_AUTH_CALLBACK_URL="..."
44 | GOOGLE_AUTH_CLIENT_ID="..."
45 | GOOGLE_AUTH_CLIENT_SECRET="..."
46 | SESSION_SECRET="..." # random hash you choice
47 | ```
48 |
49 | and copy them to local `.dev.vars`
50 |
51 | ### KV bindings
52 |
53 | KV for session storage.
54 |
55 | ```
56 | $ pnpm wrangler kv:namespace create session-kv
57 | $ pnpm wrangler kv:namespace create session-kv-preview --preview
58 | ```
59 |
60 | https://dash.cloudflare.com > Pages > `ProjectName` > Settings > Functions > KV namespace bindings
61 |
62 | ```
63 | SESSION_KV=
64 | ```
65 |
66 | and put to `wrangler toml` for local dev.
67 |
68 | ```toml
69 | kv_namespaces = [
70 | {binding = "SESSION_KV", id = "...", preview_id = "..." }
71 | ]
72 | ```
73 |
74 | ### D1 database bindings
75 |
76 | https://dash.cloudflare.com > Pages > `ProjectName` > Settings > Functions > D1
77 |
78 | ```bash
79 | $ pnpm wrangler d1 create mydb
80 | ```
81 |
82 | ```
83 | DB=mydb
84 | ```
85 |
86 | and put it to `wrangler.toml` for local dev.
87 |
88 | ```toml
89 | [[ d1_databases ]]
90 | binding = "DB"
91 | database_name = "mydb"
92 | database_id = "mydb-id"
93 | ```
94 |
95 | ## GitHub Actions
96 |
97 | Generate cloudflare token to GitHub Actions Secrets with pages publish permission.
98 |
99 | ```
100 | CLOUDFLARE_API_TOKEN=...
101 | ```
102 |
103 | ## Setup local
104 |
105 | ```bash
106 | $ pnpm install
107 | $ cp .dev.vars.example .dev.vars
108 | ```
109 |
110 | `wrangler.toml` for local bindings
111 |
112 | ```toml
113 | compatibility_date = "2023-04-30"
114 | compatibility_flags = ["streams_enable_constructors"]
115 |
116 | kv_namespaces = [
117 | {binding = "SESSION_KV", id = "...", preview_id = "..." }
118 | ]
119 |
120 | [[ d1_databases ]]
121 | binding = "DB"
122 | database_name = "mydb"
123 | database_id = "mydb-id"
124 | ```
125 |
126 | `.dev.vars` for local dev
127 |
128 | ```
129 | GOOGLE_AUTH_CALLBACK_URL="..."
130 | GOOGLE_AUTH_CLIENT_ID="..."
131 | GOOGLE_AUTH_CLIENT_SECRET="..."
132 | SESSION_SECRET="..." # random hash you choice
133 | ```
134 |
135 | Run first migration.
136 |
137 | ```bash
138 | # Check app/schema.ts and migrations/0000_conscious_ironclad.sql
139 | # If you want to use your schema, fix src/schema.ts and remove migrations/*.
140 |
141 | $ pnpm gen:migrate
142 | $ pnpm wrangler d1 migrations apply mydb --local
143 | ```
144 |
--------------------------------------------------------------------------------
/docs/00_how_it_generate.md:
--------------------------------------------------------------------------------
1 | # How this project generates
2 |
3 | from bare to this project.
4 |
5 | ```bash
6 | $ npx create-remix@latest remix-d1-bullets
7 | # Select TypeScript / CloudflarePages
8 | $ cd remix-d1-bullets
9 | $ rm -r node_modules package-lock.json
10 | $ pnpm install
11 | $ pnpm add drizzle-kit drizzle-orm better-sqlite3 remix-auth remix-auth-google -D
12 | ```
13 |
14 | ## Put Schema
15 |
16 | app/schema.ts
17 |
18 | ```ts
19 | /*
20 | DO NOT RENAME THIS FILE FOR DRIZZLE-ORM TO WORK
21 | */
22 | import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
23 |
24 | export const users = sqliteTable('users', {
25 | id: integer('id').primaryKey().notNull(),
26 | googleProfileId: text('googleProfileId').notNull(),
27 | iconUrl: text('iconUrl'),
28 | displayName: text('displayName').notNull(),
29 | registeredAt: integer('registeredAt', { mode: 'timestamp' }).notNull(),
30 | });
31 | ```
32 |
33 | and generate migaration.
34 |
35 | ```bash
36 | $ pnpm drizzle-kit generate:sqlite --out migrations --schema src/schema.ts
37 | ```
38 |
39 | ## Auth Service
40 |
41 | app/services/auth.server.ts
42 |
43 | ```ts
44 | import type { AppLoadContext } from "@remix-run/cloudflare";
45 | import {
46 | createCookie,
47 | createWorkersKVSessionStorage,
48 | } from "@remix-run/cloudflare";
49 |
50 | import { Authenticator } from "remix-auth";
51 | import { GoogleStrategy } from "remix-auth-google";
52 | import { users } from "../schema"
53 | import { InferModel } from "drizzle-orm";
54 | import { createClient } from "~/db.server";
55 |
56 | export type AuthUser = {
57 | id: number;
58 | };
59 |
60 | type CreateUser = InferModel
61 |
62 | let _authenticator: Authenticator | undefined;
63 | export function getAuthenticator(context: AppLoadContext): Authenticator {
64 | if (_authenticator == null) {
65 | const cookie = createCookie("__session", {
66 | secrets: [context.SESSION_SECRET as string],
67 | path: "/",
68 | sameSite: "lax",
69 | httpOnly: true,
70 | secure: process.env.NODE_ENV == "production",
71 | });
72 | console.log('[auth.server] cookie', cookie);
73 | const sessionStorage = createWorkersKVSessionStorage({
74 | kv: context.SESSION_KV as KVNamespace,
75 | cookie
76 | });
77 | _authenticator = new Authenticator(sessionStorage);
78 | const googleAuth = new GoogleStrategy({
79 | clientID: context.GOOGLE_AUTH_CLIENT_ID as string,
80 | clientSecret: context.GOOGLE_AUTH_CLIENT_SECRET as string,
81 | callbackURL: context.GOOGLE_AUTH_CALLBACK_URL as string,
82 | }, async ({ profile }) => {
83 | const db = createClient(context.DB as D1Database);
84 | const newUser: CreateUser = {
85 | googleProfileId: profile.id,
86 | iconUrl: profile.photos?.[0].value,
87 | displayName: profile.displayName,
88 | registeredAt: new Date(),
89 | };
90 | const ret = await db.insert(users).values(newUser).returning().get();
91 | return {
92 | id: ret.id,
93 | };
94 | });
95 | _authenticator.use(googleAuth);
96 | }
97 | return _authenticator;
98 | }
99 | ```
100 |
101 | `.dev.vars` and production enviroments require them.
102 |
103 | ```
104 | GOOGLE_AUTH_CALLBACK_URL="http://localhost:8788/auth/google/callback"
105 | GOOGLE_AUTH_CLIENT_ID=""
106 | GOOGLE_AUTH_CLIENT_SECRET=""
107 | SESSION_SECRET=""
108 | ```
109 |
110 | usage example
111 |
112 | ```tsx
113 | // app/routes/*
114 | import type { LoaderArgs } from "@remix-run/cloudflare";
115 | import { json } from "@remix-run/cloudflare";
116 | import { getAuthenticator } from "../services/auth.server";
117 |
118 | export async function loader({ request, context }: LoaderArgs) {
119 | const authenticator = getAuthenticator(context);
120 | const user = await authenticator.isAuthenticated(request);
121 | return json({
122 | user,
123 | });
124 | };
125 | ```
126 |
127 | and put API and callback
128 |
129 | - `app/routes/auth.google.tsx`
130 | - `app/routes/auth.google.callback.tsx`
131 |
132 | Implement login page.
133 |
134 | ```tsx
135 | // app/routes/login.tsx
136 | import type { LoaderArgs } from "@remix-run/cloudflare";
137 | import { json } from "@remix-run/cloudflare";
138 | import { useLoaderData } from "@remix-run/react";
139 | import { Form } from "@remix-run/react";
140 | import { getAuthenticator } from "../services/auth.server";
141 | import { Layout } from "../components/Layout";
142 |
143 | export async function loader({ request, context }: LoaderArgs) {
144 | const authenticator = getAuthenticator(context);
145 | const user = await authenticator.isAuthenticated(request);
146 | return json({
147 | user,
148 | });
149 | };
150 |
151 | export default function Login() {
152 | const { user } = useLoaderData();
153 |
154 | if (user) {
155 | return (
156 |
157 | {JSON.stringify(user)}
158 |
161 |
162 | );
163 | }
164 | return (
165 |
166 |
169 |
170 | );
171 | }
172 | ```
--------------------------------------------------------------------------------