Add Google Authentication

.env.sample

@@ -5,4 +5,14 @@ SERVER_PORT=4000 # optional, server port (alias: PORT, PUBLIC_SERVER_URL.port) (
 
 # Secrets
 PUBLIC_X_ANON_KEY=...
-X_API_KEY=...
+X_API_KEY=...
+
+DATABASE_URL=file:local.db
+
+BETTER_AUTH_SECRET=...
+BETTER_AUTH_URL=http://localhost:4000
+
+GOOGLE_CLIENT_ID=...
+GOOGLE_CLIENT_SECRET=
+
+PUBLIC_WEB_URL=http://localhost:3000

.gitignore

@@ -12,3 +12,5 @@ dist
 
 *storybook.log
 storybook-static
+
+local.db

packages/server/app.ts

@@ -1,10 +1,30 @@
 import { cors } from "@elysiajs/cors";
 import { Elysia } from "elysia";
+import { auth } from "./lib/auth.ts";
 import { usersRouter } from "./router/users.sample.ts";
 
+const betterAuth = new Elysia({ name: "better-auth" })
+  .mount(auth.handler)
+  .macro({
+    auth: {
+      async resolve({ status, request: { headers } }) {
+        const session = await auth.api.getSession({
+          headers,
+        });
+        if (!session) return status(401);
+
+        return {
+          user: session.user,
+          session: session.session,
+        };
+      },
+    },
+  });
+
 export const app = new Elysia({
   prefix: "/api",
 })
+  .use(betterAuth)
   .use(cors())
   .group("/users", (app) => app.use(usersRouter));
 

packages/server/db/index.ts

@@ -0,0 +1,5 @@
+import { drizzle } from "drizzle-orm/libsql";
+
+export const db = drizzle({
+  connection: { url: process.env.DATABASE_URL ?? "file:local.db" },
+});

packages/server/db/schema.ts

@@ -0,0 +1,66 @@
+import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+
+// auth
+export const user = sqliteTable("users", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email").notNull().unique(),
+  emailVerified: integer("email_verified", { mode: "boolean" })
+    .$defaultFn(() => false)
+    .notNull(),
+  image: text("image"),
+  createdAt: integer("created_at", { mode: "timestamp" })
+    .$defaultFn(() => /* @__PURE__ */ new Date())
+    .notNull(),
+  updatedAt: integer("updated_at", { mode: "timestamp" })
+    .$defaultFn(() => /* @__PURE__ */ new Date())
+    .notNull(),
+});
+
+export const session = sqliteTable("sessions", {
+  id: text("id").primaryKey(),
+  expiresAt: integer("expires_at", { mode: "timestamp" }).notNull(),
+  token: text("token").notNull().unique(),
+  createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+  updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
+  ipAddress: text("ip_address"),
+  userAgent: text("user_agent"),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+});
+
+export const account = sqliteTable("accounts", {
+  id: text("id").primaryKey(),
+  accountId: text("account_id").notNull(),
+  providerId: text("provider_id").notNull(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  accessToken: text("access_token"),
+  refreshToken: text("refresh_token"),
+  idToken: text("id_token"),
+  accessTokenExpiresAt: integer("access_token_expires_at", {
+    mode: "timestamp",
+  }),
+  refreshTokenExpiresAt: integer("refresh_token_expires_at", {
+    mode: "timestamp",
+  }),
+  scope: text("scope"),
+  password: text("password"),
+  createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+  updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
+});
+
+// export const verification = sqliteTable("verifications", {
+//   id: text("id").primaryKey(),
+//   identifier: text("identifier").notNull(),
+//   value: text("value").notNull(),
+//   expiresAt: integer("expires_at", { mode: "timestamp" }).notNull(),
+//   createdAt: integer("created_at", { mode: "timestamp" }).$defaultFn(
+//     () => /* @__PURE__ */ new Date(),
+//   ),
+//   updatedAt: integer("updated_at", { mode: "timestamp" }).$defaultFn(
+//     () => /* @__PURE__ */ new Date(),
+//   ),
+// });

packages/server/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  out: "./drizzle",
+  schema: "./db/schema.ts",
+  dialect: "sqlite",
+  dbCredentials: {
+    url: process.env.DATABASE_URL ?? "file:local.db",
+  },
+});

packages/server/lib/auth.ts

@@ -0,0 +1,18 @@
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { db } from "../db/index.ts";
+import * as schema from "../db/schema.ts";
+
+export const auth = betterAuth({
+  database: drizzleAdapter(db, {
+    provider: "sqlite",
+    schema: schema,
+  }),
+  socialProviders: {
+    google: {
+      clientId: process.env.GOOGLE_CLIENT_ID as string,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+    },
+  },
+  trustedOrigins: [process.env.PUBLIC_WEB_URL ?? "http://localhost:3000"],
+});

packages/server/package.json

@@ -10,14 +10,19 @@
     "dev": "bun --env-file=../../.env run --watch ./serve.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.2.18"
+    "@types/bun": "^1.2.18",
+    "drizzle-kit": "^0.31.4",
+    "tsx": "^4.20.3"
   },
   "peerDependencies": {
     "typescript": "^5.8.3"
   },
   "dependencies": {
     "@elysiajs/cors": "^1.3.3",
+    "@libsql/client": "^0.15.10",
     "@sinclair/typebox": "^0.34.37",
+    "better-auth": "^1.3.1",
+    "drizzle-orm": "^0.44.3",
     "elysia": "^1.3.5"
   }
 }

packages/web/src/App.tsx

@@ -14,6 +14,8 @@ import Home from "./pages/Home.tsx";
 import HowToUse from "./pages/HowToUse.tsx";
 import NotFound from "./pages/NotFound.tsx";
 import Notion from "./pages/Notion.tsx";
+import Profile from "./pages/Profile.tsx";
+import SignIn from "./pages/SignIn.tsx";
 import UserManagement from "./sample/UserManagement.tsx";
 
 /**
@@ -65,6 +67,8 @@ export default function App() {
                   <Route path="/how-to-use" element={<HowToUse />} />
                   <Route path="/notion" element={<Notion />} />
                   <Route path="/sample" element={<UserManagement />} />
+                  <Route path="/sign-in" element={<SignIn />} />
+                  <Route path="/profile" element={<Profile />} />
                   <Route path="*" element={<NotFound />} />
                 </Routes>
                 <Footer />

packages/web/src/lib/auth-client.ts

@@ -0,0 +1,5 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+  baseURL: import.meta.env.PUBLIC_SERVER_URL,
+});

packages/web/src/pages/Home.tsx

@@ -1,4 +1,5 @@
 import type React from "react";
+import { Link } from "react-router-dom";
 import Logo from "/syllabus_icon.svg";
 // import { useUser } from "@/app/UserContext";
 
@@ -55,7 +56,9 @@ export default function Home(): React.ReactElement {
 
           {/* はじめるボタン */}
           <div className="flex items-center justify-center">
-            <div className="btn btn-primary w-36 mt-24">はじめる</div>
+            <Link to="/sign-in" className="btn btn-primary w-36 mt-24">
+              サインインページへ
+            </Link>
           </div>
         </div>
       </div>

packages/web/src/pages/Profile.tsx

@@ -0,0 +1,11 @@
+import { authClient } from "@/lib/auth-client";
+
+export default function Profile() {
+  const { data: session } = authClient.useSession();
+  const username = session?.user.name;
+  return (
+    <div>
+      {username ? <div>Hello {username}</div> : <div>Who are you?</div>}
+    </div>
+  );
+}

packages/web/src/pages/SignIn.tsx

@@ -0,0 +1,23 @@
+import { authClient } from "@/lib/auth-client";
+
+export default function SignIn() {
+  const handleClick = async () => {
+    try {
+      await authClient.signIn.social({
+        provider: "google",
+        // Use an absolute path for the callbackURL to prevent redirecting to the server.
+        callbackURL: `${window.location.origin}/profile`,
+      });
+    } catch (error) {
+      console.error("error", error);
+    }
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={handleClick} className="btn btn-primary">
+        sign in with google
+      </button>
+    </div>
+  );
+}