passwordとGoogleでの認証

packages/client/package.json

@@ -39,7 +39,10 @@
     "vite": "^7.0.5"
   },
   "dependencies": {
-    "@packages/convex": "workspace:convex",
+    "@auth/core": "^0.40.0",
+    "@convex-dev/auth": "^0.0.87",
+    "@mmailaender/convex-auth-svelte": "^0.0.2",
+    "@packages/convex": "workspace:*",
     "@inlang/paraglide-js": "^2.2.0",
     "@playwright/test": "^1.54.1",
     "@sveltejs/adapter-static": "^3.0.8",

packages/client/src/components/chat/MessageInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { api, type Id } from "@packages/convex";
-  import { useConvexClient } from "convex-svelte";
+  import { useConvexClient, useQuery } from "convex-svelte";
 
   interface Props {
     channelId: Id<"channels">;
@@ -9,8 +9,16 @@
   const { channelId }: Props = $props();
 
   const convex = useConvexClient();
+  const identity = useQuery(api.users.me, {});
+
   let messageContent = $state("");
-  let authorName = $state("ユーザー");
+  let authorName = $state("");
+
+  $effect(() => {
+    if (identity?.data && !authorName) {
+      authorName = identity.data.name ?? identity.data.email ?? "匿名";
+    }
+  });
 
   async function sendMessage() {
     if (!messageContent.trim()) return;

packages/client/src/hooks.server.ts

@@ -1,4 +1,7 @@
+import { createConvexAuthHooks } from "@mmailaender/convex-auth-svelte/sveltekit/server";
 import type { Handle } from "@sveltejs/kit";
+import { sequence } from "@sveltejs/kit/hooks";
+import { PUBLIC_CONVEX_URL } from "$lib/env";
 import { paraglideMiddleware } from "$lib/paraglide/server";
 
 const handleParaglide: Handle = ({ event, resolve }) =>
@@ -11,4 +14,6 @@ const handleParaglide: Handle = ({ event, resolve }) =>
     });
   });
 
-export const handle: Handle = handleParaglide;
+const { handleAuth } = createConvexAuthHooks({ convexUrl: PUBLIC_CONVEX_URL });
+
+export const handle: Handle = sequence(handleParaglide, handleAuth);

packages/client/src/routes/+layout.server.ts

@@ -0,0 +1,13 @@
+import { createConvexAuthHandlers } from "@mmailaender/convex-auth-svelte/sveltekit/server";
+import { PUBLIC_CONVEX_URL } from "$lib/env.ts";
+import type { LayoutServerLoad } from "./$types";
+
+const { getAuthState } = createConvexAuthHandlers({
+  convexUrl: PUBLIC_CONVEX_URL,
+});
+
+export const load: LayoutServerLoad = async (event) => {
+  const authState = await getAuthState(event);
+
+  return { authState };
+};

packages/client/src/routes/+layout.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
   import "@@/global.css";
 
+  import { setupConvexAuth } from "@mmailaender/convex-auth-svelte/sveltekit";
   import { setupConvex } from "convex-svelte";
-  import type { Snippet } from "svelte";
   import { PUBLIC_CONVEX_URL } from "$lib/env.ts";
 
-  type Props = {
-    children: Snippet;
-  };
-
-  const { children }: Props = $props();
+  const { children, data } = $props();
 
   setupConvex(PUBLIC_CONVEX_URL);
+
+  setupConvexAuth({
+    getServerState: () => data.authState,
+    convexUrl: PUBLIC_CONVEX_URL,
+  });
 </script>
 
 {@render children()}

packages/client/src/routes/+page.svelte

@@ -1,5 +1,25 @@
 <script lang="ts">
+  import { useAuth } from "@mmailaender/convex-auth-svelte/sveltekit";
   import ChatApp from "$components/chat/ChatApp.svelte";
+
+  const isAuthenticated = $derived(useAuth().isAuthenticated);
+  const isLoading = $derived(useAuth().isLoading);
 </script>
 
-<ChatApp />
+{#if isLoading}
+  <div class="flex h-screen w-full items-center justify-center">
+    <span class="loading loading-dots loading-lg"></span>
+  </div>
+{:else if isAuthenticated}
+  <ChatApp />
+{:else}
+  <div class="hero bg-base-100 min-h-screen">
+    <div class="hero-content text-center">
+      <div class="max-w-md">
+        <h1 class="text-7xl font-bold">Prism</h1>
+        <p class="py-6">The ultimate chat tool for engineers.</p>
+        <a href="/signin" class="btn btn-primary">Get Started</a>
+      </div>
+    </div>
+  </div>
+{/if}

packages/client/src/routes/reset/+page.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { useAuth } from "@mmailaender/convex-auth-svelte/sveltekit";
+
+  const { signIn, isLoading } = useAuth();
+
+  let step = $state<"forgot" | { email: string }>("forgot");
+</script>
+
+<div class="hero bg-base-200 min-h-screen">
+  <div class="card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
+    {#if step === "forgot"}
+      <form
+        class="card-body"
+        onsubmit={(event) => {
+          event.preventDefault();
+          const formData = new FormData(event.currentTarget);
+          void signIn("password", formData).then(
+            () => (step = { email: formData.get("email") as string }),
+          );
+        }}
+      >
+        <h1 class="text-2xl font-bold">Reset Password</h1>
+        <p class="text-base-content/70 text-sm">
+          Enter your email address and we will send you a code to reset your
+          password.
+        </p>
+        <div class="form-control">
+          <label class="label" for="email">
+            <span class="label-text">Email</span>
+          </label>
+          <input
+            id="email"
+            name="email"
+            placeholder="email"
+            class="input input-bordered"
+            required
+          />
+          <input name="flow" type="hidden" value="reset" />
+        </div>
+        <div class="form-control mt-6">
+          <button type="submit" class="btn btn-primary" disabled={isLoading}>
+            {#if isLoading}
+              <span class="loading loading-spinner"></span>
+            {/if}
+            Send Code
+          </button>
+        </div>
+      </form>
+    {:else}
+      <form
+        class="card-body"
+        onsubmit={(event) => {
+          event.preventDefault();
+          const formData = new FormData(event.currentTarget);
+          void signIn("password", formData);
+        }}
+      >
+        <h1 class="text-2xl font-bold">Enter Code</h1>
+        <p class="text-base-content/70 text-sm">
+          A code has been sent to <strong>{step.email}</strong>.
+        </p>
+        <div class="form-control">
+          <label class="label" for="code">
+            <span class="label-text">Code</span>
+          </label>
+          <input
+            id="code"
+            name="code"
+            placeholder="123456"
+            class="input input-bordered"
+            required
+          />
+        </div>
+        <div class="form-control">
+          <label class="label" for="newPassword">
+            <span class="label-text">New Password</span>
+          </label>
+          <input
+            id="newPassword"
+            name="newPassword"
+            type="password"
+            placeholder="new password"
+            class="input input-bordered"
+            required
+          />
+          <input name="email" value={step.email} type="hidden" />
+          <input name="flow" value="reset-verification" type="hidden" />
+        </div>
+        <div class="form-control mt-6">
+          <button type="submit" class="btn btn-primary" disabled={isLoading}>
+            {#if isLoading}
+              <span class="loading loading-spinner"></span>
+            {/if}
+            Continue
+          </button>
+        </div>
+        <div class="mt-4 text-center">
+          <button
+            type="button"
+            class="link-hover link text-sm"
+            onclick={() => (step = "forgot")}
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    {/if}
+  </div>
+</div>