add sign in/sign up page along with supabase connection and reusable components for further development

Author: minhazzz

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1 +1,51 @@
-"# flow-builder" 
+"Flow Builder 
+
+A simple app built with Next.js 14, TypeScript, Tailwind CSS, and Supabase.
+
+## Features
+
+- ✅ User Sign Up
+- ✅ User Sign In
+- ✅ User Sign Out
+- ✅ Supabase for authentication backend
+
+## Tech Stack
+
+- **Frontend Framework**: Next.js 14 (App Router)
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS
+- **Authentication**: Supabase Auth
+- **Package Manager**: npm
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ installed
+- A Supabase account (free tier works fine)
+
+### 1. Clone and Install
+
+```bash
+# Install dependencies
+npm install
+```
+
+### 4. Run the Development Server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+For my cute devs: 
+By default, Supabase requires email confirmation. To disable this for development:
+
+1. Go to your Supabase project
+2. Navigate to Authentication → Settings
+3. Disable "Enable email confirmations"
+
+## License
+
+MIT" 

app/api/health/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * Example API route
+ * GET /api/health - Check if the API is running
+ */
+export async function GET(request: NextRequest) {
+  return NextResponse.json({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+    message: 'API is running',
+  });
+}

app/api/user/profile/route.ts

@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { supabase } from '@/lib/supabase';
+
+/**
+ * Example protected API route
+ * GET /api/user/profile - Get current user profile
+ */
+export async function GET(request: NextRequest) {
+  try {
+    // Get the authorization header
+    const token = request.headers.get('authorization')?.replace('Bearer ', '');
+    
+    if (!token) {
+      return NextResponse.json(
+        { error: 'No authorization token provided' },
+        { status: 401 }
+      );
+    }
+
+    // Verify the user with Supabase
+    const { data: { user }, error } = await supabase.auth.getUser(token);
+
+    if (error || !user) {
+      return NextResponse.json(
+        { error: 'Invalid or expired token' },
+        { status: 401 }
+      );
+    }
+
+    // Return user data
+    return NextResponse.json({
+      id: user.id,
+      email: user.email,
+      created_at: user.created_at,
+    });
+  } catch (error) {
+    console.error('Profile API error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * PATCH /api/user/profile - Update user profile
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const token = request.headers.get('authorization')?.replace('Bearer ', '');
+    
+    if (!token) {
+      return NextResponse.json(
+        { error: 'No authorization token provided' },
+        { status: 401 }
+      );
+    }
+
+    const { data: { user }, error: authError } = await supabase.auth.getUser(token);
+
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Invalid or expired token' },
+        { status: 401 }
+      );
+    }
+
+    // Get the update data from request body
+    const updates = await request.json();
+
+    // Update user metadata (example)
+    const { data, error } = await supabase.auth.updateUser({
+      data: updates,
+    });
+
+    if (error) {
+      return NextResponse.json(
+        { error: error.message },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json({
+      message: 'Profile updated successfully',
+      user: data.user,
+    });
+  } catch (error) {
+    console.error('Profile update error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

app/auth/signin/page.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/contexts';
+import { Button, Input, Card, CardHeader, CardContent, CardTitle } from '@/components/ui';
+import { Alert } from '@/components/ui/Alert';
+import Link from 'next/link';
+
+export default function SignIn() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [localError, setLocalError] = useState('');
+  const router = useRouter();
+  const { signIn } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSignIn = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLocalError('');
+    setIsLoading(true);
+
+    try {
+      await signIn(email, password);
+      router.push('/dashboard');
+    } catch (error: any) {
+      setLocalError(error.message || 'An error occurred during sign in');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Sign In</CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          {localError && <Alert variant="error" message={localError} />}
+
+          <form onSubmit={handleSignIn} className="space-y-4">
+            <Input
+              id="email"
+              type="email"
+              label="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="[email protected]"
+              required
+            />
+
+            <Input
+              id="password"
+              type="password"
+              label="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+            />
+
+            <Button
+              type="submit"
+              variant="primary"
+              className="w-full"
+              isLoading={isLoading}
+            >
+              Sign In
+            </Button>
+          </form>
+
+          <p className="mt-6 text-center text-gray-600">
+            Don't have an account?{' '}
+            <Link href="/auth/signup" className="text-indigo-600 hover:text-indigo-800 font-medium">
+              Sign Up
+            </Link>
+          </p>
+
+          <p className="mt-2 text-center">
+            <Link href="/" className="text-sm text-gray-500 hover:text-gray-700">
+              ← Back to home
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}