From d8d2eb9243838cafe97995bf54fe198711c1751e Mon Sep 17 00:00:00 2001
From: devleejb <devleejb@gmail.com>
Date: Tue, 16 Jan 2024 15:26:17 +0900
Subject: [PATCH] Add login logic scaffolding

---
 frontend/.env.development    |  2 ++
 frontend/package-lock.json   | 29 ++++++++++++++++++++++++++
 frontend/package.json        |  1 +
 frontend/src/App.tsx         |  5 +++++
 frontend/src/pages/Index.tsx | 40 ++++++++++++++++++++++++++++++++++++
 5 files changed, 77 insertions(+)
 create mode 100644 frontend/src/pages/Index.tsx

diff --git a/frontend/.env.development b/frontend/.env.development
index a0ab89a2..8e6b9e24 100644
--- a/frontend/.env.development
+++ b/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=''
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2bcd577d..9d5604a3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,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",
@@ -1903,6 +1904,34 @@
 				"win32"
 			]
 		},
+		"node_modules/@stitches/core": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz",
+			"integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg=="
+		},
+		"node_modules/@supabase/auth-ui-react": {
+			"version": "0.4.7",
+			"resolved": "https://registry.npmjs.org/@supabase/auth-ui-react/-/auth-ui-react-0.4.7.tgz",
+			"integrity": "sha512-Lp4FQGFh7BMX1Y/BFaUKidbryL7eskj1fl6Lby7BeHrTctbdvDbCMjVKS8wZ2rxuI8FtPS2iU900fSb70FHknQ==",
+			"dependencies": {
+				"@stitches/core": "^1.2.8",
+				"@supabase/auth-ui-shared": "0.1.8",
+				"prop-types": "^15.7.2",
+				"react": "^18.2.0",
+				"react-dom": "^18.2.0"
+			},
+			"peerDependencies": {
+				"@supabase/supabase-js": "^2.21.0"
+			}
+		},
+		"node_modules/@supabase/auth-ui-shared": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/@supabase/auth-ui-shared/-/auth-ui-shared-0.1.8.tgz",
+			"integrity": "sha512-ouQ0DjKcEFg+0gZigFIEgu01V3e6riGZPzgVD0MJsCBNsMsiDT74+GgCEIElMUpTGkwSja3xLwdFRFgMNFKcjg==",
+			"peerDependencies": {
+				"@supabase/supabase-js": "^2.21.0"
+			}
+		},
 		"node_modules/@supabase/functions-js": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f03dbd5f..b872ff69 100755
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6fb8b1a3..1992ac5c 100755
--- a/frontend/src/App.tsx
+++ b/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 />,
diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx
new file mode 100644
index 00000000..e012389a
--- /dev/null
+++ b/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;