sign in from client-side

Author: tknkaa

app/routes/_index.tsx

@@ -1,22 +1,30 @@
-import { Form, Link } from "react-router";
+import { Link, useFetcher } from "react-router";
+import { authClient } from "@/lib/auth-client";
 import github from "/github.svg";
 import logo from "/logo.svg";
 
 export default function Page() {
+	const fetcher = useFetcher();
+	async function handlePlay() {
+		const session = await authClient.getSession();
+		if (!session?.data?.user) {
+			await authClient.signIn.anonymous();
+		}
+		fetcher.submit(null, { method: "post", action: "/api/games" });
+	}
 	return (
 		<div className="h-screen w-screen bg-[#1A472A] font-serif text-white relative flex justify-center">
 			<h1 className="absolute top-1/3 text-center font-bold text-4xl tracking-widest">
 				一人麻雀
 			</h1>
 			<div className="absolute top-1/2 flex flex-col md:flex-row items-center space-y-4 md:space-x-4 md:space-y-0">
-				<Form method="post" action="/api/games" className="w-full md:w-30">
-					<button
-						type="submit"
-						className="bg-yellow-600 rounded text-sm w-full h-10 transition-transform duration-150 hover:scale-105 text-white"
-					>
-						プレイ
-					</button>
-				</Form>
+				<button
+					onClick={handlePlay}
+					type="button"
+					className="bg-yellow-600 rounded text-sm w-full h-10 transition-transform duration-150 hover:scale-105 text-white"
+				>
+					プレイ
+				</button>
 				<Link
 					to="/learn"
 					className="bg-yellow-600 rounded text-sm w-full md:w-30 h-10 flex items-center justify-center transition-transform duration-150 hover:scale-105 text-white"

app/routes/api.games.ts

@@ -8,14 +8,9 @@ export async function action({ context, request }: Route.LoaderArgs) {
 	const { env } = context.cloudflare;
 	const db = getDB(env);
 	const auth = getAuth(env);
-
-	let session = await auth.api.getSession({ headers: request.headers });
+	const session = await auth.api.getSession({ headers: request.headers });
 	if (!session?.user.id) {
-		await auth.api.signInAnonymous({ headers: request.headers });
-		session = await auth.api.getSession({ headers: request.headers });
-		if (!session?.user.id) {
-			throw new Response("Unauthorized", { status: 401 });
-		}
+		throw new Response("Unauthorized", { status: 401 });
 	}
 	const userId = session.user.id;
 	const randomHaiyama = await getRandomHaiyama(db, userId);