Add login logic scaffolding

frontend/.env.development

@@ -1,2 +1,4 @@
 VITE_YORKIE_API_ADDR='https://api.yorkie.dev'
 VITE_YORKIE_API_KEY=''
+VITE_SUPABASE_URL=''
+VITE_SUPABASE_ANON=''

frontend/package.json

@@ -22,6 +22,7 @@
 		"@mui/material": "^5.15.3",
 		"@react-hook/window-size": "^3.1.1",
 		"@reduxjs/toolkit": "^2.0.1",
+		"@supabase/auth-ui-react": "^0.4.7",
 		"@supabase/supabase-js": "^2.39.3",
 		"@swc/helpers": "^0.5.3",
 		"@uiw/codemirror-theme-xcode": "^4.21.21",

frontend/src/App.tsx

@@ -12,12 +12,17 @@ import { useEffect, useMemo } from "react";
 import { selectConfig } from "./store/configSlice";
 import { createClient } from "@supabase/supabase-js";
 import { setClient } from "./store/supabaseSlice";
+import Index from "./pages/Index";
 
 const router = createBrowserRouter([
 	{
 		path: "/",
 		element: <EditorLayout />,
 		children: [
+			{
+				path: "/",
+				element: <Index />,
+			},
 			{
 				path: ":documentId",
 				element: <EditorIndex />,

frontend/src/pages/Index.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { selectSupabase } from "../store/supabaseSlice";
+import { Session } from "@supabase/supabase-js";
+import { Auth } from "@supabase/auth-ui-react";
+import { ThemeSupa } from "@supabase/auth-ui-shared";
+import { Box } from "@mui/material";
+
+function Index() {
+	const supabaseStore = useSelector(selectSupabase);
+	const [session, setSession] = useState<Session | null>(null);
+
+	useEffect(() => {
+		if (!supabaseStore.client) return;
+
+		supabaseStore.client.auth.getSession().then(({ data: { session } }) => {
+			setSession(session);
+		});
+
+		const {
+			data: { subscription },
+		} = supabaseStore.client.auth.onAuthStateChange((_event, session) => {
+			setSession(session);
+		});
+
+		return () => subscription.unsubscribe();
+	}, [supabaseStore.client]);
+
+	if (!session && supabaseStore.client) {
+		return (
+			<Box p={4}>
+				<Auth supabaseClient={supabaseStore.client} appearance={{ theme: ThemeSupa }} />
+			</Box>
+		);
+	} else {
+		return <div>Logged in!</div>;
+	}
+}
+
+export default Index;