diff --git a/app/auth/page.tsx b/app/auth/page.tsx
index dfe81e0f..5b5bb58d 100644
--- a/app/auth/page.tsx
+++ b/app/auth/page.tsx
@@ -94,7 +94,7 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key`}
try {
await signInWithGitHub();
} catch (error) {
- errorLogger.error(ErrorCategory.AUTH, 'GitHub auth failed:', error);
+ errorLogger.error(ErrorCategory.AUTH, 'GitHub auth failed', error);
setError('GitHub authentication failed. Please try again.');
setIsLoading(false);
}
diff --git a/app/layout.tsx b/app/layout.tsx
index f8a1fdf4..339b56fe 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata, Viewport } from 'next';
import { Inter } from 'next/font/google';
import { ThemeProvider } from '@/components/theme-provider';
-import { AuthProvider } from '@/providers/AuthProvider';
+import SupabaseProvider from '@/components/SupabaseProvider';
import { RealtimeProvider } from '@/providers/RealtimeProvider';
import { SentryProvider } from '@/components/sentry-provider';
import { VersionCheck } from '@/components/version-check';
@@ -124,7 +124,7 @@ export default function RootLayout({
disableTransitionOnChange
>
-
+
{children}
@@ -132,7 +132,7 @@ export default function RootLayout({
-
+
diff --git a/app/page.tsx b/app/page.tsx
index 39665f5e..8011b936 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,8 +11,6 @@ import PublicPlayground from '@/components/public-playground';
import ExampleGallery from '@/components/example-gallery';
import CompetitiveEdge from '@/components/competitive-edge';
import { useSupabase } from '@/components/SupabaseProvider';
-import { AuthButtons } from '@/components/auth-buttons';
-import { CrossBrowserButton } from '@/components/ui/cross-browser-button';
const FeaturesShowcase = dynamic(() => import('@/components/features-showcase'), {
loading: () => (
@@ -59,6 +57,7 @@ export default function Home() {
const [showFloatingCTA, setShowFloatingCTA] = useState(false);
const [mounted, setMounted] = useState(false);
const { scrollY } = useScroll();
+ const { user, loading } = useSupabase();
// Ensure component is mounted before complex interactions
useEffect(() => {
@@ -92,6 +91,101 @@ export default function Home() {
return () => unsubscribe();
}, [scrollY, showFloatingCTA, mounted]);
+ // Simple auth buttons that don't cause re-renders
+ const AuthButtons = () => {
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (user) {
+ return (
+
+
+ Chat
+
+
+ Subscribe
+
+
+ );
+ }
+
+ return (
+
+
+ Sign In
+
+
+ Sign Up
+
+
+ );
+ };
+
+ // Simplified floating CTA
+ const FloatingCTA = () => {
+ const buttonText = user ? 'Go to Chat' : 'Sign In';
+ const targetRoute = user ? '/chat' : '/auth';
+
+ return (
+ router.push(targetRoute)}
+ className="flex items-center gap-2 rounded-full bg-gradient-to-r from-[#6C52A0] to-[#A0527C] px-6 py-3 font-medium text-white shadow-lg shadow-purple-900/20 hover:from-[#7C62B0] hover:to-[#B0627C]"
+ whileHover={{ scale: 1.05 }}
+ whileTap={{ scale: 0.95 }}
+ >
+ {buttonText}
+
+
+ );
+ };
+
// Don't render complex interactions until mounted
if (!mounted) {
return (
@@ -102,51 +196,63 @@ export default function Home() {
}
return (
-
-
+ {/* Auth buttons */}
+
-
- {/* Debug: Simple static buttons to confirm they show */}
-
-
-
-
- {/* Uncomment this after we confirm the basic buttons work */}
- {/* */}
-
-
+
+
- {/* Floating CTA */}
+ {/* Main CTA button */}
-
+ {/* Floating CTA for subscribing */}
+ {showFloatingCTA && (
+
+
+ {user ? 'Subscribe' : 'Sign Up'}
+
+
+
+ )}
+
+ {/* Main content */}
+
@@ -155,53 +261,10 @@ export default function Home() {
-
+
+
-
Start building amazing websites today
diff --git a/package.json b/package.json
index f9c1cd21..815fadcb 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
"format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
"check-env": "node scripts/check-env.js",
+ "verify-deployment": "node scripts/verify-deployment.js",
"fix-chat": "node scripts/fix-chat-api.js",
"fix-db": "node scripts/auto-fix-database.js",
"optimize-bundle": "node scripts/optimize-bundle.js",
diff --git a/scripts/verify-deployment.js b/scripts/verify-deployment.js
new file mode 100644
index 00000000..979e6937
--- /dev/null
+++ b/scripts/verify-deployment.js
@@ -0,0 +1,210 @@
+#!/usr/bin/env node
+
+/**
+ * Deployment Verification Script
+ *
+ * This script verifies that all environment variables are properly configured
+ * for Vercel deployment and tests authentication flow.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Color codes for terminal output
+const colors = {
+ reset: '\x1b[0m',
+ red: '\x1b[31m',
+ green: '\x1b[32m',
+ yellow: '\x1b[33m',
+ blue: '\x1b[34m',
+ gray: '\x1b[90m',
+};
+
+console.log(`${colors.blue}đ ZapDev Deployment Verification${colors.reset}\n`);
+
+// Load environment variables from .env.local if it exists
+const envPath = path.join(process.cwd(), '.env.local');
+if (fs.existsSync(envPath)) {
+ require('dotenv').config({ path: envPath });
+ console.log(`${colors.green}â
Found .env.local file${colors.reset}`);
+} else {
+ console.log(`${colors.yellow}â ī¸ No .env.local file found - checking system environment${colors.reset}`);
+}
+
+// Critical environment variables for deployment
+const criticalVars = [
+ {
+ key: 'NEXT_PUBLIC_SUPABASE_URL',
+ description: 'Supabase project URL',
+ required: true,
+ validate: (value) => value && value.includes('.supabase.co') && !value.includes('placeholder')
+ },
+ {
+ key: 'NEXT_PUBLIC_SUPABASE_ANON_KEY',
+ description: 'Supabase anonymous key',
+ required: true,
+ validate: (value) => value && value.length > 50 && !value.includes('placeholder')
+ },
+ {
+ key: 'GROQ_API_KEY',
+ description: 'Groq AI API key',
+ required: true,
+ validate: (value) => value && value.startsWith('gsk_')
+ }
+];
+
+// Optional but recommended variables
+const optionalVars = [
+ {
+ key: 'SUPABASE_SERVICE_ROLE_KEY',
+ description: 'Supabase service role key (for admin operations)',
+ validate: (value) => !value || value.length > 50
+ },
+ {
+ key: 'NODE_ENV',
+ description: 'Node environment',
+ validate: (value) => !value || ['development', 'production', 'test'].includes(value)
+ }
+];
+
+let hasErrors = false;
+let hasWarnings = false;
+
+console.log(`${colors.blue}Checking Critical Environment Variables:${colors.reset}`);
+console.log(`${colors.gray}${'â'.repeat(60)}${colors.reset}`);
+
+// Check critical variables
+criticalVars.forEach(({ key, description, required, validate }) => {
+ const value = process.env[key];
+
+ if (!value) {
+ console.log(`${colors.red}â ${key}: Missing${colors.reset}`);
+ console.log(`${colors.gray} ${description}${colors.reset}`);
+ hasErrors = true;
+ } else if (validate && !validate(value)) {
+ console.log(`${colors.red}â ${key}: Invalid format${colors.reset}`);
+ console.log(`${colors.gray} ${description}${colors.reset}`);
+ hasErrors = true;
+ } else {
+ console.log(`${colors.green}â
${key}: Configured${colors.reset}`);
+ }
+});
+
+console.log(`\n${colors.blue}Checking Optional Environment Variables:${colors.reset}`);
+console.log(`${colors.gray}${'â'.repeat(60)}${colors.reset}`);
+
+// Check optional variables
+optionalVars.forEach(({ key, description, validate }) => {
+ const value = process.env[key];
+
+ if (!value) {
+ console.log(`${colors.yellow}â ī¸ ${key}: Not set${colors.reset}`);
+ console.log(`${colors.gray} ${description}${colors.reset}`);
+ hasWarnings = true;
+ } else if (validate && !validate(value)) {
+ console.log(`${colors.yellow}â ī¸ ${key}: Invalid format${colors.reset}`);
+ console.log(`${colors.gray} ${description}${colors.reset}`);
+ hasWarnings = true;
+ } else {
+ console.log(`${colors.green}â
${key}: Configured${colors.reset}`);
+ }
+});
+
+// Environment-specific checks
+console.log(`\n${colors.blue}Environment-Specific Checks:${colors.reset}`);
+console.log(`${colors.gray}${'â'.repeat(60)}${colors.reset}`);
+
+// Check if we're in production mode
+const isProduction = process.env.NODE_ENV === 'production';
+if (isProduction) {
+ console.log(`${colors.green}â
Running in production mode${colors.reset}`);
+
+ // Additional production checks
+ const appUrl = process.env.NEXT_PUBLIC_APP_URL;
+ if (!appUrl || appUrl.includes('localhost')) {
+ console.log(`${colors.yellow}â ī¸ NEXT_PUBLIC_APP_URL should be set to your domain in production${colors.reset}`);
+ hasWarnings = true;
+ } else {
+ console.log(`${colors.green}â
App URL configured for production${colors.reset}`);
+ }
+} else {
+ console.log(`${colors.blue}âšī¸ Running in development mode${colors.reset}`);
+}
+
+// Check Vercel-specific configuration
+if (process.env.VERCEL) {
+ console.log(`${colors.green}â
Running on Vercel${colors.reset}`);
+ console.log(`${colors.gray} Region: ${process.env.VERCEL_REGION || 'unknown'}${colors.reset}`);
+ console.log(`${colors.gray} Environment: ${process.env.VERCEL_ENV || 'unknown'}${colors.reset}`);
+} else {
+ console.log(`${colors.blue}âšī¸ Not running on Vercel (local development)${colors.reset}`);
+}
+
+// Authentication test
+console.log(`\n${colors.blue}Testing Authentication Configuration:${colors.reset}`);
+console.log(`${colors.gray}${'â'.repeat(60)}${colors.reset}`);
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+if (supabaseUrl && supabaseKey &&
+ !supabaseUrl.includes('placeholder') &&
+ !supabaseKey.includes('placeholder')) {
+ console.log(`${colors.green}â
Supabase configuration looks valid${colors.reset}`);
+ console.log(`${colors.gray} URL: ${supabaseUrl}${colors.reset}`);
+ console.log(`${colors.gray} Key: ${supabaseKey.substring(0, 20)}...${colors.reset}`);
+
+ // Try to validate the URL format
+ try {
+ const url = new URL(supabaseUrl);
+ if (url.hostname.endsWith('.supabase.co')) {
+ console.log(`${colors.green}â
Supabase URL format is correct${colors.reset}`);
+ } else {
+ console.log(`${colors.yellow}â ī¸ Supabase URL doesn't appear to be a valid Supabase URL${colors.reset}`);
+ hasWarnings = true;
+ }
+ } catch (error) {
+ console.log(`${colors.red}â Supabase URL is not a valid URL${colors.reset}`);
+ hasErrors = true;
+ }
+} else {
+ console.log(`${colors.red}â Supabase configuration is missing or using placeholders${colors.reset}`);
+ hasErrors = true;
+}
+
+// Final summary
+console.log(`\n${colors.blue}Deployment Summary:${colors.reset}`);
+console.log(`${colors.gray}${'â'.repeat(60)}${colors.reset}`);
+
+if (hasErrors) {
+ console.log(`${colors.red}â Deployment verification failed!${colors.reset}`);
+ console.log(`${colors.gray} Please fix the critical errors above before deploying.${colors.reset}`);
+
+ console.log(`\n${colors.blue}Quick Fix Instructions:${colors.reset}`);
+ console.log(`${colors.gray}1. Go to your Vercel dashboard${colors.reset}`);
+ console.log(`${colors.gray}2. Navigate to your project settings${colors.reset}`);
+ console.log(`${colors.gray}3. Go to Environment Variables${colors.reset}`);
+ console.log(`${colors.gray}4. Add the missing variables listed above${colors.reset}`);
+ console.log(`${colors.gray}5. Redeploy your application${colors.reset}`);
+
+ process.exit(1);
+} else if (hasWarnings) {
+ console.log(`${colors.yellow}â ī¸ Deployment verification passed with warnings${colors.reset}`);
+ console.log(`${colors.gray} Your app should work, but consider fixing the warnings for optimal performance.${colors.reset}`);
+} else {
+ console.log(`${colors.green}â
Deployment verification passed!${colors.reset}`);
+ console.log(`${colors.gray} Your app is ready for deployment.${colors.reset}`);
+}
+
+console.log(`\n${colors.blue}Next Steps:${colors.reset}`);
+if (process.env.VERCEL) {
+ console.log(`${colors.gray}âĸ Your app is running on Vercel - check the live URL${colors.reset}`);
+ console.log(`${colors.gray}âĸ Test authentication by signing in${colors.reset}`);
+ console.log(`${colors.gray}âĸ Check browser console for any errors${colors.reset}`);
+} else {
+ console.log(`${colors.gray}âĸ Run 'bun run build' to test production build${colors.reset}`);
+ console.log(`${colors.gray}âĸ Deploy to Vercel when ready${colors.reset}`);
+ console.log(`${colors.gray}âĸ Test authentication after deployment${colors.reset}`);
+}
+
+console.log(`\n${colors.gray}For more help, check the README.md file${colors.reset}`);
\ No newline at end of file