Bugfix/draw auth

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@auth0/auth0-react": "^2.3.0",
     "@mediapipe/camera_utils": "^0.3.1675466862",
     "@mediapipe/drawing_utils": "^0.3.1675466124",
     "@mediapipe/hands": "^0.4.1675469240",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
+    "@types/node": "^22.13.14",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

frontend/src/App.tsx

@@ -1,12 +1,16 @@
-import React from 'react'
-import Canvas from './components/Canvas'
-import Toolbar from './components/Toolbar'
-import Header from './components/Header'
-import HandDrawing from './components/HandDrawing'
-import { DrawingProvider } from './context/DrawingContext'
-import { HandGestureProvider } from './context/HandGestureContext'
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import { withAuthenticationRequired } from '@auth0/auth0-react';
+import Canvas from './components/Canvas';
+import Toolbar from './components/Toolbar';
+import Header from './components/Header';
+import HandDrawing from './components/HandDrawing';
+import LoginButton from './components/LoginButton';
+import { DrawingProvider } from './context/DrawingContext';
+import { HandGestureProvider } from './context/HandGestureContext';
 
-function App() {
+// Protected component that requires authentication
+const ProtectedApp = () => {
   return (
     <DrawingProvider>
       <HandGestureProvider>
@@ -21,7 +25,57 @@ function App() {
         </div>
       </HandGestureProvider>
     </DrawingProvider>
-  )
+  );
+};
+
+// Wrap the protected component with authentication
+const ProtectedAppWithAuth = withAuthenticationRequired(ProtectedApp);
+
+function App() {
+  const { isAuthenticated } = useAuth0();
+
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <div className="text-center space-y-8">
+          {/* Logo and Title */}
+          <div className="space-y-4">
+            <div className="w-20 h-20 rounded-full bg-purple-600 flex items-center justify-center mx-auto">
+              <span className="text-3xl font-bold text-white">C</span>
+            </div>
+            <h1 className="text-4xl font-bold text-neutral-800">CoCo</h1>
+            <p className="text-lg text-neutral-500">Create, collaborate, and share your drawings</p>
+          </div>
+
+          {/* Login Button */}
+          <div className="pt-4">
+            <LoginButton />
+          </div>
+
+          {/* Feature Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl mx-auto pt-8">
+            <div className="p-4">
+              <div className="text-purple-600 mb-2">🎨</div>
+              <h3 className="font-medium text-neutral-800">Draw Freely</h3>
+              <p className="text-sm text-neutral-500">Express your creativity with our intuitive drawing tools</p>
+            </div>
+            <div className="p-4">
+              <div className="text-purple-600 mb-2">🤝</div>
+              <h3 className="font-medium text-neutral-800">Collaborate</h3>
+              <p className="text-sm text-neutral-500">Work together in real-time with others</p>
+            </div>
+            <div className="p-4">
+              <div className="text-purple-600 mb-2">✨</div>
+              <h3 className="font-medium text-neutral-800">Hand Gestures</h3>
+              <p className="text-sm text-neutral-500">Draw naturally with hand tracking support</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <ProtectedAppWithAuth />;
 }
 
-export default App
+export default App;

frontend/src/components/Header.tsx

@@ -1,9 +1,13 @@
 import React, { useState } from 'react'
 import { useDrawing } from '../context/DrawingContext'
 import { Download, Share2, Clock, User, ChevronDown } from 'lucide-react'
+import LoginButton from './LoginButton'
+import LogoutButton from './LogoutButton'  
+import { useAuth0 } from "@auth0/auth0-react"
 
 const Header: React.FC = () => {
   const { state } = useDrawing()
+  const { isAuthenticated } = useAuth0()
   const [documentName, setDocumentName] = useState('Untitled')
 
   const handleExport = () => {
@@ -92,6 +96,11 @@ const Header: React.FC = () => {
 
       <div className="flex items-center space-x-1">
         <div className="flex items-center bg-neutral-100 rounded-md p-0.5">
+          {isAuthenticated ? (
+            <LogoutButton />
+          ) : (
+            <LoginButton />
+          )}
           <button className="w-7 h-7 flex items-center justify-center rounded-md text-neutral-500 hover:bg-white hover:text-neutral-700 transition-colors">
             <User size={16} />
           </button>

frontend/src/components/LoginButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const LoginButton = () => {
+  const { loginWithRedirect } = useAuth0();
+
+  return (
+    <button 
+      onClick={() => loginWithRedirect()}
+      className="px-8 py-3 bg-purple-600 text-white rounded-full font-medium hover:bg-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105"
+    >
+      Get Started
+    </button>
+  );
+};
+
+export default LoginButton;

frontend/src/components/LogoutButton.tsx

@@ -0,0 +1,13 @@
+import { useAuth0 } from "@auth0/auth0-react";
+
+const LogoutButton = () => {
+  const { logout } = useAuth0();
+
+  return (
+    <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
+      Log Out
+    </button>
+  );
+};
+
+export default LogoutButton;

frontend/src/main.tsx

@@ -2,9 +2,22 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import {Auth0Provider} from "@auth0/auth0-react"
+
+const domain = import.meta.env.VITE_AUTH0_DOMAIN;
+const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <Auth0Provider 
+      domain={domain}
+      clientId={clientId}
+      authorizationParams={{
+        redirect_uri: window.location.origin
+      }}
+    >
+      <App />
+    </Auth0Provider>
   </StrictMode>,
 )
+