added auth

finic-ai · Aug 7, 2024 · be363d8 · be363d8
1 parent a9f381c
commit be363d8
Show file tree

Hide file tree

Showing 8 changed files with 384 additions and 151 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,11 +10,15 @@
   },
   "dependencies": {
     "@subframe/core": "1.119.0",
+    "@supabase/auth-ui-react": "^0.4.7",
+    "@supabase/auth-ui-shared": "^0.1.8",
+    "@supabase/supabase-js": "^2.45.1",
     "@xyflow/react": "^12.0.4",
     "classnames": "2.3.2",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/node": "22.1.0",

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -3,29 +3,66 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
 import {ReactFlowProvider} from "@xyflow/react"
-import React from "react";
+import React, { useEffect } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { Auth } from "@supabase/auth-ui-react";
+import { ThemeSupa } from "@supabase/auth-ui-shared";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  const { useLocalStorage, UserStateProvider, supabase } = useAuth();
+  const [session, setSession] = useLocalStorage("session", null);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }: any) => {
+      setSession(session);
+    });
+
+    // const {
+    //   data: { subscription }
+    // } = supabase.auth.onAuthStateChange((_event: any, session: any) => {
+    //   setSession(session);
+    // });
+
+    // return () => subscription.unsubscribe();
+  }, []);
+
+  const renderAuth = () => {
+    return (
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+        <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-md">
+          <Auth
+            supabaseClient={supabase}
+            providers={["google"]}
+            appearance={{ theme: ThemeSupa }}
+            redirectTo={"http://localhost:3000/workflow/123"}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const renderApp = () => {
+    return (
+      <UserStateProvider session={session}>
+        <ReactFlowProvider>
+          {children}
+        </ReactFlowProvider>
+      </UserStateProvider>
+    );
+  }
+
   return (
     <html lang="en">
       <head>
-        <head>
-          <link rel="preconnect" href="https://fonts.googleapis.com"/>
-          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
-          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
-        </head>
+        <link rel="preconnect" href="https://fonts.googleapis.com"/>
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
       </head>
-      <ReactFlowProvider>
-        <body className={inter.className}>
-          {children}
-        </body>
-      </ReactFlowProvider>
+      <body>
+        {session ? renderApp() : renderAuth()}
+      </body>
     </html>
   );
 }
diff --git a/frontend/src/context/UserStateContext.tsx b/frontend/src/context/UserStateContext.tsx