Merge pull request #6 from tuatmcc/feat/login

feat: ログイン実装

app/libs/getAccountCredentials.ts

@@ -0,0 +1,11 @@
+import type { SignInWithPasswordCredentials } from "@supabase/supabase-js";
+
+export function getAccountCredentials(
+	id: string,
+): SignInWithPasswordCredentials {
+	return {
+		// supabase は userId のみでサインインできないため、強引にやる
+		email: `email-${id}@example.com`,
+		password: "password",
+	};
+}

app/routes/_auth._index.tsx

@@ -0,0 +1,43 @@
+import type { MetaFunction } from "@remix-run/node";
+import { useSession } from "~/hooks/useSession";
+
+export const meta: MetaFunction = () => {
+	return [
+		{ title: "New Remix App" },
+		{ name: "description", content: "Welcome to Remix!" },
+	];
+};
+
+export default function Index() {
+	const session = useSession();
+
+	// 未サインインの場合
+	if (!session)
+		return (
+			<main className="grid h-dvh w-dvw grid-rows-2">
+				<h1 className="p-4 text-center text-4xl">Game</h1>
+				<div className="mx-auto flex max-w-96 flex-col gap-2 p-4">
+					<a
+						href="/signup"
+						type="button"
+						className="rounded-lg bg-pink-500 px-4 py-2 text-center font-bold text-white"
+					>
+						匿名で登録
+					</a>
+				</div>
+			</main>
+		);
+
+	// サインイン済みの場合
+	return (
+		<main className="grid h-dvh w-dvw grid-rows-2">
+			<h1 className="p-4 text-center text-4xl">Game</h1>
+			<div className="mx-auto flex max-w-96 flex-col gap-2 p-4">
+				Hello World
+			</div>
+			<div className="mx-auto flex max-w-96 flex-col gap-2 p-4">
+				ID: {session.user.email?.replace("@example.com", "")}
+			</div>
+		</main>
+	);
+}

app/routes/_auth.tsx

@@ -0,0 +1,17 @@
+import { Outlet, useNavigate } from "@remix-run/react";
+import { type ReactNode, useLayoutEffect } from "react";
+import { useSession } from "~/hooks/useSession";
+
+// _auth.**.tsx のパスへのアクセスは必ずここで前処理される
+export default function Layout(): ReactNode {
+	const navigate = useNavigate();
+	const session = useSession();
+
+	useLayoutEffect(() => {
+		if (!session) {
+			navigate("/signup");
+		}
+	}, [session, navigate]);
+
+	return <Outlet />;
+}

app/routes/_noauth.signin.tsx

@@ -0,0 +1,55 @@
+import { useNavigate } from "@remix-run/react";
+import type { ReactNode } from "react";
+import { useForm } from "react-hook-form";
+import { getAccountCredentials } from "~/libs/getAccountCredentials";
+import { supabase } from "~/libs/supabase";
+
+type FormValues = {
+	id: string;
+};
+
+export default function Signin(): ReactNode {
+	// ID でサインイン、デバッグ用(そもそもログアウトは想定していない)
+	const navigate = useNavigate();
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<FormValues>({
+		mode: "onBlur",
+	});
+
+	const onSubmit = async ({ id }: FormValues) => {
+		const { error } = await supabase.auth.signInWithPassword(
+			getAccountCredentials(id),
+		);
+
+		if (error) {
+			console.error(error);
+			return;
+		}
+
+		navigate("/");
+	};
+
+	return (
+		<main>
+			<h1 className="p-4 text-center text-4xl">Game</h1>
+			<h2 className="p-4 text-center text-2xl">ID でサインイン</h2>
+			<form onSubmit={handleSubmit(onSubmit)}>
+				<input
+					type="text"
+					className="rounded-lg bg-gray-100 px-4 py-2 text-center font-bold outline-pink-500"
+					placeholder="ID"
+					{...register("id")}
+				/>
+			</form>
+			<button
+				type="submit"
+				className="rounded-lg bg-pink-500 px-4 py-2 text-center font-bold text-white"
+			>
+				サインイン
+			</button>
+		</main>
+	);
+}

app/routes/_noauth.signup.tsx

@@ -0,0 +1,34 @@
+import { useNavigate } from "@remix-run/react";
+import { v4 } from "uuid";
+import { getAccountCredentials } from "~/libs/getAccountCredentials";
+import { supabase } from "~/libs/supabase";
+
+export default function Signup() {
+	const navigate = useNavigate();
+
+	const signUp = async () => {
+		const id = v4();
+		const { error } = await supabase.auth.signUp(getAccountCredentials(id));
+
+		if (error) {
+			console.error("Error signing up:", error.message);
+			return;
+		}
+
+		navigate("/");
+	};
+	return (
+		<main className="grid h-dvh w-dvw grid-rows-2">
+			<h1 className="p-4 text-center text-4xl">Game</h1>
+			<div className="mx-auto flex max-w-96 flex-col gap-2 p-4">
+				<button
+					type="button"
+					className="rounded-lg bg-pink-500 px-4 py-2 text-center font-bold text-white"
+					onClick={signUp}
+				>
+					匿名で登録
+				</button>
+			</div>
+		</main>
+	);
+}

app/routes/_noauth.tsx

@@ -0,0 +1,19 @@
+import { Outlet, useNavigate } from "@remix-run/react";
+import type { ReactNode } from "react";
+import { useLayoutEffect } from "react";
+
+import { useSession } from "~/hooks/useSession";
+
+// _noauth.**.tsx のパスへのアクセスは必ずここで前処理される
+export default function Layout(): ReactNode {
+	const navigate = useNavigate();
+	const session = useSession();
+
+	useLayoutEffect(() => {
+		if (session) {
+			navigate("/");
+		}
+	}, [session, navigate]);
+
+	return <Outlet />;
+}