From dd120f17b906083acfe13fc533410f3e3907b416 Mon Sep 17 00:00:00 2001
From: Mehak <mehakgoyal1307@gmail.com>
Date: Sun, 24 Aug 2025 10:27:57 +0530
Subject: [PATCH] Feat: authentication and validation

---
 README.md                                  |  11 +-
 thunder/frontend/.env.example              |   2 +
 thunder/frontend/package-lock.json         | 133 +++++++++++++++++++++
 thunder/frontend/package.json              |   1 +
 thunder/frontend/src/App.tsx               |  22 ++--
 thunder/frontend/src/components/SignIn.tsx |  86 +++++++++++++
 thunder/frontend/src/components/SignUp.tsx |  91 ++++++++++++++
 thunder/frontend/src/lib/supabaseClient.ts |  14 +++
 thunder/frontend/src/main.tsx              |  13 +-
 thunder/frontend/src/pages/Auth.tsx        |  11 ++
 thunder/package-lock.json                  |   6 +
 11 files changed, 377 insertions(+), 13 deletions(-)
 create mode 100644 thunder/frontend/.env.example
 create mode 100644 thunder/frontend/src/components/SignIn.tsx
 create mode 100644 thunder/frontend/src/components/SignUp.tsx
 create mode 100644 thunder/frontend/src/lib/supabaseClient.ts
 create mode 100644 thunder/frontend/src/pages/Auth.tsx
 create mode 100644 thunder/package-lock.json

diff --git a/README.md b/README.md
index 47bceb6..c09ced9 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,8 @@
 |--------------------|---------------------------------------|  
 | **Frontend**       | React + Vite, TypeScript, TailwindCSS |  
 | **Backend**        | Node.js, Express, Socket.IO           |  
-| **Authentication** | Clerk                                 |  
+| **Authentication** | Supabase                              |  
+
 | **Deployment**     | Vercel, Render                        |  
 | **Testing**        | Jest, Cypress, Postman                |  
 
@@ -109,9 +110,15 @@ For detailed setup instructions, see our **[Development Setup Guide](DEVELOPMENT
 git clone https://github.com/subh37106/thunder.git
 
 cd thunder
+```
+
+2. **Set up Environment Variables**
+
+Create a `.env.local` file based on `.env.example` and add Supabase credentials provided by the maintainer.
 
 ## 📜 License  
 
+
 This project is distributed under the **MIT License**.  
 See [LICENSE](LICENSE) for details.  
 
@@ -129,4 +136,4 @@ For help, suggestions, or issues:
 👨‍💻 Crafted with ❤️ by **Muneer Ali**  
 
 📖 Docs: thunder-docs.vercel.app
-🐞 Report Bug: [Issues](https://github.com/Muneerali199/thunder/issues)  
+🐞 Report Bug: [Issues](https://github.com/Muneerali199/thunder/issues)
diff --git a/thunder/frontend/.env.example b/thunder/frontend/.env.example
new file mode 100644
index 0000000..2171e84
--- /dev/null
+++ b/thunder/frontend/.env.example
@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=your-project-url
+VITE_SUPABASE_ANON_KEY=your-anon-key
diff --git a/thunder/frontend/package-lock.json b/thunder/frontend/package-lock.json
index d0f7868..5485b6f 100644
--- a/thunder/frontend/package-lock.json
+++ b/thunder/frontend/package-lock.json
@@ -14,6 +14,7 @@
                 "@octokit/core": "^6.1.5",
                 "@react-three/drei": "^9.122.0",
                 "@react-three/fiber": "8.15.14",
+                "@supabase/supabase-js": "^2.56.0",
                 "@types/xml2js": "^0.4.14",
                 "@webcontainer/api": "^1.6.1",
                 "axios": "^1.7.8",
@@ -1838,6 +1839,80 @@
                 "win32"
             ]
         },
+        "node_modules/@supabase/auth-js": {
+            "version": "2.71.1",
+            "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.71.1.tgz",
+            "integrity": "sha512-mMIQHBRc+SKpZFRB2qtupuzulaUhFYupNyxqDj5Jp/LyPvcWvjaJzZzObv6URtL/O6lPxkanASnotGtNpS3H2Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@supabase/node-fetch": "^2.6.14"
+            }
+        },
+        "node_modules/@supabase/functions-js": {
+            "version": "2.4.5",
+            "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.5.tgz",
+            "integrity": "sha512-v5GSqb9zbosquTo6gBwIiq7W9eQ7rE5QazsK/ezNiQXdCbY+bH8D9qEaBIkhVvX4ZRW5rP03gEfw5yw9tiq4EQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@supabase/node-fetch": "^2.6.14"
+            }
+        },
+        "node_modules/@supabase/node-fetch": {
+            "version": "2.6.15",
+            "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+            "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+            "license": "MIT",
+            "dependencies": {
+                "whatwg-url": "^5.0.0"
+            },
+            "engines": {
+                "node": "4.x || >=6.0.0"
+            }
+        },
+        "node_modules/@supabase/postgrest-js": {
+            "version": "1.21.3",
+            "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.21.3.tgz",
+            "integrity": "sha512-rg3DmmZQKEVCreXq6Am29hMVe1CzemXyIWVYyyua69y6XubfP+DzGfLxME/1uvdgwqdoaPbtjBDpEBhqxq1ZwA==",
+            "license": "MIT",
+            "dependencies": {
+                "@supabase/node-fetch": "^2.6.14"
+            }
+        },
+        "node_modules/@supabase/realtime-js": {
+            "version": "2.15.1",
+            "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.15.1.tgz",
+            "integrity": "sha512-edRFa2IrQw50kNntvUyS38hsL7t2d/psah6om6aNTLLcWem0R6bOUq7sk7DsGeSlNfuwEwWn57FdYSva6VddYw==",
+            "license": "MIT",
+            "dependencies": {
+                "@supabase/node-fetch": "^2.6.13",
+                "@types/phoenix": "^1.6.6",
+                "@types/ws": "^8.18.1",
+                "ws": "^8.18.2"
+            }
+        },
+        "node_modules/@supabase/storage-js": {
+            "version": "2.11.0",
+            "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.11.0.tgz",
+            "integrity": "sha512-Y+kx/wDgd4oasAgoAq0bsbQojwQ+ejIif8uczZ9qufRHWFLMU5cODT+ApHsSrDufqUcVKt+eyxtOXSkeh2v9ww==",
+            "license": "MIT",
+            "dependencies": {
+                "@supabase/node-fetch": "^2.6.14"
+            }
+        },
+        "node_modules/@supabase/supabase-js": {
+            "version": "2.56.0",
+            "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.56.0.tgz",
+            "integrity": "sha512-XqwhHSyVnkjdliPN61CmXsmFGnFHTX2WDdwjG3Ukvdzuu3Trix+dXupYOQ3BueIyYp7B6t0yYpdQtJP2hIInyg==",
+            "license": "MIT",
+            "dependencies": {
+                "@supabase/auth-js": "2.71.1",
+                "@supabase/functions-js": "2.4.5",
+                "@supabase/node-fetch": "2.6.15",
+                "@supabase/postgrest-js": "1.21.3",
+                "@supabase/realtime-js": "2.15.1",
+                "@supabase/storage-js": "^2.10.4"
+            }
+        },
         "node_modules/@tweenjs/tween.js": {
             "version": "23.1.3",
             "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
@@ -1938,6 +2013,12 @@
             "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
             "license": "MIT"
         },
+        "node_modules/@types/phoenix": {
+            "version": "1.6.6",
+            "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+            "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+            "license": "MIT"
+        },
         "node_modules/@types/prop-types": {
             "version": "15.7.15",
             "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -2000,6 +2081,15 @@
             "integrity": "sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==",
             "license": "MIT"
         },
+        "node_modules/@types/ws": {
+            "version": "8.18.1",
+            "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+            "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
         "node_modules/@types/xml2js": {
             "version": "0.4.14",
             "resolved": "https://registry.npmjs.org/@types/xml2js/-/xml2js-0.4.14.tgz",
@@ -5572,6 +5662,12 @@
                 "node": ">=8.0"
             }
         },
+        "node_modules/tr46": {
+            "version": "0.0.3",
+            "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+            "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+            "license": "MIT"
+        },
         "node_modules/troika-three-text": {
             "version": "0.52.4",
             "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
@@ -5955,6 +6051,22 @@
             "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
             "license": "MIT"
         },
+        "node_modules/webidl-conversions": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+            "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/whatwg-url": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+            "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+            "license": "MIT",
+            "dependencies": {
+                "tr46": "~0.0.3",
+                "webidl-conversions": "^3.0.0"
+            }
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6075,6 +6187,27 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/ws": {
+            "version": "8.18.3",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+            "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "peerDependencies": {
+                "bufferutil": "^4.0.1",
+                "utf-8-validate": ">=5.0.2"
+            },
+            "peerDependenciesMeta": {
+                "bufferutil": {
+                    "optional": true
+                },
+                "utf-8-validate": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/xml2js": {
             "version": "0.6.2",
             "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
diff --git a/thunder/frontend/package.json b/thunder/frontend/package.json
index 43fd19a..e005fb2 100644
--- a/thunder/frontend/package.json
+++ b/thunder/frontend/package.json
@@ -16,6 +16,7 @@
         "@octokit/core": "^6.1.5",
         "@react-three/drei": "^9.122.0",
         "@react-three/fiber": "8.15.14",
+        "@supabase/supabase-js": "^2.56.0",
         "@types/xml2js": "^0.4.14",
         "@webcontainer/api": "^1.6.1",
         "axios": "^1.7.8",
diff --git a/thunder/frontend/src/App.tsx b/thunder/frontend/src/App.tsx
index 407e33d..2ac682c 100644
--- a/thunder/frontend/src/App.tsx
+++ b/thunder/frontend/src/App.tsx
@@ -5,7 +5,8 @@ import { Builder } from './pages/Builder';
 import { Pricing } from './components/Pricing';
 import { Checkout } from './components/checkout';
 import Footer from './components/Footer';
-import { ClerkProvider } from '@clerk/clerk-react';
+import Auth from './pages/Auth';
+
 
 // Declare gtag to avoid TS errors
 declare global {
@@ -38,23 +39,24 @@ function AppRoutes() {
       <Route path="/pricing" element={<Pricing />} />
       <Route path="/checkout" element={<Checkout />} />
       <Route path="/github-callback" element={<Builder />} />
+      <Route path="/auth" element={<Auth />} />
     </Routes>
+
   );
 }
 
 function App() {
   return (
-    <ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
-      <BrowserRouter>
-        <div className="min-h-screen flex flex-col">
-          <div className="flex-1">
-            <AppRoutes />
-          </div>
-          <Footer />
+    <BrowserRouter>
+      <div className="min-h-screen flex flex-col">
+        <div className="flex-1">
+          <AppRoutes />
         </div>
-      </BrowserRouter>
-    </ClerkProvider>
+        <Footer />
+      </div>
+    </BrowserRouter>
   );
 }
 
+
 export default App;
diff --git a/thunder/frontend/src/components/SignIn.tsx b/thunder/frontend/src/components/SignIn.tsx
new file mode 100644
index 0000000..6798cfd
--- /dev/null
+++ b/thunder/frontend/src/components/SignIn.tsx
@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+
+import { supabase } from '../lib/supabaseClient';
+
+export default function SignIn() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [validationErrors, setValidationErrors] = useState({
+    email: '',
+    password: '',
+  });
+
+  useEffect(() => {
+    const errors = { email: '', password: '' };
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if (email && !emailRegex.test(email)) {
+      errors.email = 'Invalid email address.';
+    }
+
+    if (password && password.length < 6) {
+      errors.password = 'Password must be at least 6 characters.';
+    }
+
+    setValidationErrors(errors);
+  }, [email, password]);
+
+  const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
+
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    if (!supabase) {
+      setError('Supabase is not initialized.');
+      setLoading(false);
+      return;
+    }
+
+    const { error } = await supabase.auth.signInWithPassword({ email, password });
+
+
+    if (error) {
+      setError(error.message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div>
+      <h2>Sign In</h2>
+      <form onSubmit={handleSignIn}>
+        <input
+          type="email"
+          placeholder="Your email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        {validationErrors.email && <p style={{ color: 'red' }}>{validationErrors.email}</p>}
+        <input
+          type="password"
+          placeholder="Your password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        {validationErrors.password && <p style={{ color: 'red' }}>{validationErrors.password}</p>}
+        <button
+          type="submit"
+          disabled={
+            loading ||
+            !email ||
+            !password ||
+            !!validationErrors.email ||
+            !!validationErrors.password
+          }
+        >
+          {loading ? 'Loading...' : 'Sign In'}
+        </button>
+
+      </form>
+      {error && <p>{error}</p>}
+    </div>
+  );
+}
diff --git a/thunder/frontend/src/components/SignUp.tsx b/thunder/frontend/src/components/SignUp.tsx
new file mode 100644
index 0000000..c56f5fb
--- /dev/null
+++ b/thunder/frontend/src/components/SignUp.tsx
@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+
+import { supabase } from '../lib/supabaseClient';
+
+export default function SignUp() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [validationErrors, setValidationErrors] = useState({
+    email: '',
+    password: '',
+  });
+
+  useEffect(() => {
+    const errors = { email: '', password: '' };
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if (email && !emailRegex.test(email)) {
+      errors.email = 'Invalid email address.';
+    }
+
+    if (password && password.length < 6) {
+      errors.password = 'Password must be at least 6 characters.';
+    }
+
+    setValidationErrors(errors);
+  }, [email, password]);
+
+  const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
+
+    e.preventDefault();
+    setError('');
+    setMessage('');
+    setLoading(true);
+
+    if (!supabase) {
+      setError('Supabase is not initialized.');
+      setLoading(false);
+      return;
+    }
+
+    const { error } = await supabase.auth.signUp({ email, password });
+
+
+    if (error) {
+      setError(error.message);
+    } else {
+      setMessage('Check your email for the verification link.');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div>
+      <h2>Sign Up</h2>
+      <form onSubmit={handleSignUp}>
+        <input
+          type="email"
+          placeholder="Your email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        {validationErrors.email && <p style={{ color: 'red' }}>{validationErrors.email}</p>}
+        <input
+          type="password"
+          placeholder="Your password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        {validationErrors.password && <p style={{ color: 'red' }}>{validationErrors.password}</p>}
+        <button
+          type="submit"
+          disabled={
+            loading ||
+            !email ||
+            !password ||
+            !!validationErrors.email ||
+            !!validationErrors.password
+          }
+        >
+          {loading ? 'Loading...' : 'Sign Up'}
+        </button>
+
+      </form>
+      {error && <p>{error}</p>}
+      {message && <p>{message}</p>}
+    </div>
+  );
+}
diff --git a/thunder/frontend/src/lib/supabaseClient.ts b/thunder/frontend/src/lib/supabaseClient.ts
new file mode 100644
index 0000000..c066b26
--- /dev/null
+++ b/thunder/frontend/src/lib/supabaseClient.ts
@@ -0,0 +1,14 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+const createSupabaseClient = () => {
+    if (supabaseUrl && supabaseAnonKey) {
+        return createClient(supabaseUrl, supabaseAnonKey);
+    }
+    console.error("Supabase URL and/or Anon Key are missing. Please check your .env.local file.");
+    return null;
+}
+
+export const supabase = createSupabaseClient();
diff --git a/thunder/frontend/src/main.tsx b/thunder/frontend/src/main.tsx
index 20e5519..cbf6006 100644
--- a/thunder/frontend/src/main.tsx
+++ b/thunder/frontend/src/main.tsx
@@ -2,7 +2,18 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import { ClerkProvider } from '@clerk/clerk-react';
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+if (!PUBLISHABLE_KEY) {
+  throw new Error("Missing Publishable Key");
+}
 
 createRoot(document.getElementById('root')!).render(
-  <App />
+  <StrictMode>
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
+      <App />
+    </ClerkProvider>
+  </StrictMode>
 );
diff --git a/thunder/frontend/src/pages/Auth.tsx b/thunder/frontend/src/pages/Auth.tsx
new file mode 100644
index 0000000..469996d
--- /dev/null
+++ b/thunder/frontend/src/pages/Auth.tsx
@@ -0,0 +1,11 @@
+import SignIn from '../components/SignIn';
+import SignUp from '../components/SignUp';
+
+export default function Auth() {
+  return (
+    <div>
+      <SignIn />
+      <SignUp />
+    </div>
+  );
+}
diff --git a/thunder/package-lock.json b/thunder/package-lock.json
new file mode 100644
index 0000000..eb4d72e
--- /dev/null
+++ b/thunder/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "thunder",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}