feat: Added a Basic Authentication System #123

coderabbitai · 2025-09-08T09:23:40Z

🛠️ Refactor suggestion

Simplify subscription handling and make cleanup safe.

Current cleanup may throw if subscription is undefined; also double “subscription.subscription” is awkward.

- const { data: subscription } = supabase.auth.onAuthStateChange( + const { data: { subscription } } = supabase.auth.onAuthStateChange( (event, session) => { // ... } ); - return () => { - subscription.subscription.unsubscribe(); - }; + return () => subscription.unsubscribe();

Also applies to: 66-68

🤖 Prompt for AI Agents

In frontend/src/App.tsx around lines 38-39 (and similarly 66-68), the code assigns const { data: subscription } = supabase.auth.onAuthStateChange(...) then later calls subscription.subscription which is awkward and the cleanup can throw if subscription is undefined; change to capture the return value directly (e.g., const subscription = supabase.auth.onAuthStateChange(...)) and in the cleanup use optional chaining or a null-check to call subscription.unsubscribe() only if the subscription exists (or return a cleanup function that calls subscription?.unsubscribe()). This removes the double “subscription.subscription” and makes teardown safe.

coderabbitai · 2025-09-08T09:23:40Z

⚠️ Potential issue

Do not log the full session object (risk of token leakage).

Access/refresh tokens can end up in browser logs. Log the event only (or at most session?.user.id).

- console.log("Auth event:", event, session); + console.log("Auth event:", event);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

console.log("Auth event:", event, session);

console.log("Auth event:", event);

🤖 Prompt for AI Agents

In frontend/src/App.tsx around line 40, the current console.log prints the full session object which may expose tokens; remove or replace that log so it does not emit the session contents. Log only the event (e.g., console.log("Auth event:", event)) or, if you need an identifier, log session?.user?.id or other non-sensitive fields; ensure you do not include session.access_token, session.refresh_token, or any token-like fields in logs.

coderabbitai · 2025-09-08T09:32:33Z

🛠️ Refactor suggestion

Pass auth token, add timeout, and route 401s to login

Improves security, resilience, and UX.

- const response = await axios.post('http://localhost:8000/api/repo-stats', { repo_url: repoUrl }); + const { data: { session } } = await supabase.auth.getSession(); + const response = await axios.post( + `${API_BASE}/api/repo-stats`, + { repo_url: repoUrl }, + { + headers: session?.access_token ? { Authorization: `Bearer ${session.access_token}` } : undefined, + timeout: 15000, + } + ); setRepoData(response.data); // Pass fetched data to parent toast.success('Repository stats fetched successfully!'); navigate('/dashboard'); // Navigate to dashboard - } catch (error) { - toast.error('Failed to fetch repository stats. Please check the URL or backend server.'); + } catch (error) { + if (axios.isAxiosError(error)) { + if (error.response?.status === 401) { + toast.error('Please log in to analyze repositories.'); + navigate('/login'); + return; + } + const msg = error.response?.data?.message ?? error.message; + toast.error(`Failed to fetch repository stats: ${msg}`); + } else { + toast.error('Failed to fetch repository stats. Please check the URL or backend server.'); + } } finally { setLoading(false); }

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents

In frontend/src/components/landing/LandingPage.tsx around lines 23 to 29, the axios POST call should include the user's auth token, a request timeout, and explicit handling of 401 responses; change the request to send headers: { Authorization: `Bearer ${token}` } (obtain token from localStorage or auth context) and add a timeout option (e.g., 10000 ms), then in the catch block inspect the error response status: if 401 navigate('/login') and show an appropriate toast, otherwise show the existing generic failure toast; keep finally behavior unchanged.

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		syntax-highlighting=True

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    VITE_SUPABASE_URL=YOUR SUPABASE URL
+    VITE_BASE_URL = http://localhost:5173/
+    VITE_SUPABASE_KEY=YOUR SUPABASE ANON KEY

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,10 +10,9 @@ @@
         "preview": "vite preview"
       },
       "dependencies": {
+        "@supabase/supabase-js": "^2.53.0",
         "axios": "^1.8.3",
         "date-fns": "^4.1.0",
         "framer-motion": "^12.5.0",
         "lucide-react": "^0.344.0",
         "react": "^18.3.1",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,16 +2,16 @@ import React, { useState } from 'react'; @@
     import { motion } from 'framer-motion';
     import axios from 'axios';
     import { toast } from 'react-hot-toast';
+    import { useNavigate } from 'react-router-dom';
     interface Props {
       setRepoData: (data: any) => void; // Function to pass data to parent
-      setActivePage: (page: string) => void; // Function to navigate to other pages
     }
-    const LandingPage: React.FC<Props> = ({ setRepoData, setActivePage }) => {
+    const LandingPage: React.FC<Props> = ({ setRepoData }) => {
       const [repoUrl, setRepoUrl] = useState('');
       const [loading, setLoading] = useState(false);
+      const navigate = useNavigate();
       const fetchRepoStats = async () => {
         if (!repoUrl) {
           toast.error('Please enter a valid GitHub repository URL.');
@@ Expand All @@
           const response = await axios.post('http://localhost:8000/api/repo-stats', { repo_url: repoUrl });
           setRepoData(response.data); // Pass fetched data to parent
           toast.success('Repository stats fetched successfully!');
-          setActivePage('dashboard'); // Navigate to dashboard
+          navigate('/dashboard'); // Navigate to dashboard
         } catch (error) {
           toast.error('Failed to fetch repository stats. Please check the URL or backend server.');
         } finally {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,153 @@
+    import { useState, ReactNode, FormEvent } from "react";
+    import { motion } from "framer-motion";
+    import { useNavigate } from 'react-router-dom';
+    import { toast} from "react-hot-toast";
+    import { supabase } from "../../lib/supabaseClient";
+    import {
+      Settings,
+      Mail,
+      Lock,
+    } from 'lucide-react';
+    interface AuthLayoutProps {
+      children: ReactNode;
+    }
+    interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+      icon: React.ElementType;
+    }
+    const AuthLayout = ({ children }: AuthLayoutProps) => (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          className="w-full max-w-md"
+        >
+          {children}
+        </motion.div>
+      </div>
+    );
+    const InputField = ({ icon: Icon, ...props }: InputFieldProps) => (
+      <div className="relative">
+        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <Icon className="h-5 w-5 text-gray-400" />
+        </div>
+        <input
+          {...props}
+          className="block w-full pl-10 pr-3 py-2 border border-gray-800 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+        />
+      </div>
+    );
+    export default function ForgotPasswrdPage() {
+      const navigate = useNavigate();
+      const [isLoading, setIsLoading] = useState<boolean>(false);
+      const [mailPage, setMailPage] = useState<boolean>(false);
+      const handleAuth = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const email = String(formData.get('email') || '').trim();
+        if (!email) {
+          toast.error("Please enter your email address.");
+          return;
+        }
+        setIsLoading(true);
+        try {
+          const base = import.meta.env.VITE_BASE_URL || window.location.origin;
+          const redirectTo = new URL('/reset-password', base).toString();
+          const { error } = await supabase.auth.resetPasswordForEmail(email, { redirectTo });
+          if (error) {
+            console.error('resetPasswordForEmail failed', error);
+          }
+          setMailPage(true);
+        } catch (err) {
+          console.error('resetPasswordForEmail unexpected error', err);
+          toast.error("Something went wrong. Please try again.");
+        } finally {
+          setIsLoading(false);
+        }
+      };
+      return (
+        <AuthLayout>
+          <div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
+            {!mailPage ? (
+              <>
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className="text-center mb-8"
+                >
+                  <h1 className="text-3xl font-bold text-white mb-2">Account Recovery</h1>
+                  <p className="text-gray-400">Reset your password</p>
+                </motion.div>
+                <form onSubmit={handleAuth} className="space-y-6">
+                  <InputField
+                    icon={Mail}
+                    type="email"
+                    name="email"
+                    className="mb-7"
+                    placeholder="Email address"
+                    required
+                  />
+                  <motion.button
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    type="submit"
+                    disabled={isLoading}
+                    className="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center"
+                  >
+                    {isLoading ? (
+                      <motion.div
+                        animate={{ rotate: 360 }}
+                        transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                      >
+                        <Settings size={20} />
+                      </motion.div>
+                    ) : (
+                        <>
+                        <Lock size={20} className="mr-2" />
+                        Reset Password
+                        </>
+                    )}
+                  </motion.button>
+                  <p className="text-center text-gray-400 text-sm">
+                    <button
+                      type="button"
+                      onClick={() => navigate('/login')}
+                      className="text-gray-400 hover:text-gray-300 font-medium"
+                    >
+                      Back to Sign In
+                    </button>
+                  </p>
+                </form>
+              </>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12">
+                <Mail className="w-16 h-16 text-green-500 mb-4" />
+                <h2 className="text-2xl font-bold text-white mb-2">Check your inbox</h2>
+                <p className="text-gray-400 mb-4 text-center">
+                  We've sent a password reset email to this address. Please check your inbox and follow the instructions to reset your password.
+                </p>
+                <button
+                  type="button"
+                  onClick={() => { setMailPage(false); navigate('/login') }}
+                  className="mt-4 px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors"
+                >
+                  Back to Sign In
+                </button>
+              </div>
+            )}
+          </div>
+        </AuthLayout>
+      );
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Added a Basic Authentication System #123

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

coderabbitai bot Sep 8, 2025

Uh oh!

coderabbitai bot Sep 8, 2025

Uh oh!

coderabbitai bot Sep 8, 2025

Uh oh!

Uh oh!

Uh oh!

feat: Added a Basic Authentication System #123

Uh oh!

feat: Added a Basic Authentication System #123

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

coderabbitai bot Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!