create-solostack 1.3.4 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-solostack",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "The complete SaaS boilerplate for indie hackers - Next.js 15 with auth, payments, database, and email",
   "type": "module",
   "bin": {

package/src/generators/auth.js

@@ -21,6 +21,7 @@ async function generateSupabaseAuth(projectPath) {
   // Create auth directories
   await ensureDir(path.join(projectPath, 'src/app/auth/callback'));
   await ensureDir(path.join(projectPath, 'src/app/login'));
+  await ensureDir(path.join(projectPath, 'src/app/signup'));
   await ensureDir(path.join(projectPath, 'src/app/private'));
 
   // 1. Client Utility
@@ -35,35 +36,29 @@ export function createClient() {
 `;
   await writeFile(path.join(projectPath, 'src/utils/supabase/client.ts'), clientUtil);
 
-  // 2. Server Utility
-  const serverUtil = `import { createServerClient, type CookieOptions } from '@supabase/ssr'
+  // 2. Server Utility (Next.js 15 compatible - async cookies)
+  const serverUtil = `import { createServerClient } from '@supabase/ssr'
 import { cookies } from 'next/headers'
 
-export function createClient(cookieStore: ReturnType<typeof cookies>) {
+export async function createClient() {
+  const cookieStore = await cookies()
+  
   return createServerClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
     {
       cookies: {
-        get(name: string) {
-          return cookieStore.get(name)?.value
-        },
-        set(name: string, value: string, options: CookieOptions) {
-          try {
-            cookieStore.set({ name, value, ...options })
-          } catch (error) {
-            // The \`set\` method was called from a Server Component.
-            // This can be ignored if you have middleware refreshing
-            // user sessions.
-          }
+        getAll() {
+          return cookieStore.getAll()
         },
-        remove(name: string, options: CookieOptions) {
+        setAll(cookiesToSet) {
           try {
-            cookieStore.set({ name, value: '', ...options })
-          } catch (error) {
-            // The \`delete\` method was called from a Server Component.
-            // This can be ignored if you have middleware refreshing
-            // user sessions.
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            )
+          } catch {
+            // The \`setAll\` method was called from a Server Component.
+            // This can be ignored if you have middleware refreshing user sessions.
           }
         },
       },
@@ -73,7 +68,7 @@ export function createClient(cookieStore: ReturnType<typeof cookies>) {
 `;
   await writeFile(path.join(projectPath, 'src/utils/supabase/server.ts'), serverUtil);
 
-  // 3. MacOS/Middleware Utility
+  // 3. Middleware Utility
   const middlewareUtil = `import { createServerClient, type CookieOptions } from '@supabase/ssr'
 import { NextResponse, type NextRequest } from 'next/server'
 
@@ -162,7 +157,6 @@ export const config = {
 
   // 5. Auth Callback Route
   const routeCallback = `import { NextResponse } from 'next/server'
-import { cookies } from 'next/headers'
 import { createClient } from '@/utils/supabase/server'
 
 export async function GET(request: Request) {
@@ -171,8 +165,7 @@ export async function GET(request: Request) {
   const next = searchParams.get('next') ?? '/'
 
   if (code) {
-    const cookieStore = cookies()
-    const supabase = createClient(cookieStore)
+    const supabase = await createClient()
     const { error } = await supabase.auth.exchangeCodeForSession(code)
     if (!error) {
       return NextResponse.redirect(new URL(next, request.url))
@@ -191,6 +184,7 @@ import { createClient } from '@/utils/supabase/client';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { Rocket } from 'lucide-react';
+import Link from 'next/link';
 
 export default function LoginPage() {
   const router = useRouter();
@@ -301,6 +295,13 @@ export default function LoginPage() {
             {loading ? 'Signing in...' : 'Sign In'}
           </button>
         </form>
+
+        <div className="text-center text-sm">
+          <span className="text-zinc-500">Don't have an account? </span>
+          <Link href="/signup" className="font-medium text-indigo-400 hover:text-indigo-300">
+            Sign up
+          </Link>
+        </div>
       </div>
     </div>
   );
@@ -308,6 +309,215 @@ export default function LoginPage() {
 `;
 
   await writeFile(path.join(projectPath, 'src/app/login/page.tsx'), loginPage);
+
+  // 7. Signup Page (Supabase)
+  const signupPage = `'use client';
+import { createClient } from '@/utils/supabase/client';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { Rocket } from 'lucide-react';
+import Link from 'next/link';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const supabase = createClient();
+
+  const handleEmailSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage('');
+    
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        emailRedirectTo: \`\${location.origin}/auth/callback\`,
+      },
+    });
+    
+    if (error) {
+      setMessage(error.message);
+    } else {
+      setMessage('Check your email for the confirmation link!');
+    }
+    setLoading(false);
+  };
+
+  const handleGitHubLogin = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'github',
+      options: {
+        redirectTo: \`\${location.origin}/auth/callback\`,
+      },
+    });
+  };
+
+  const handleGoogleLogin = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: \`\${location.origin}/auth/callback\`,
+      },
+    });
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-zinc-950 p-4 text-white">
+      <div className="w-full max-w-sm space-y-8 rounded-xl border border-zinc-800 bg-zinc-900/50 p-8 shadow-xl backdrop-blur-xl">
+        <div className="text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-600">
+            <Rocket className="h-6 w-6 text-white" />
+          </div>
+          <h2 className="text-2xl font-bold tracking-tight">Create account</h2>
+          <p className="mt-2 text-sm text-zinc-400">Sign up to get started</p>
+        </div>
+
+        <div className="space-y-4">
+          <button 
+             onClick={handleGitHubLogin}
+             className="w-full rounded-md border border-zinc-700 bg-zinc-800 py-2 text-sm font-medium hover:bg-zinc-700 transition-colors"
+          >
+            Continue with GitHub
+          </button>
+          <button 
+             onClick={handleGoogleLogin}
+             className="w-full rounded-md border border-zinc-700 bg-zinc-800 py-2 text-sm font-medium hover:bg-zinc-700 transition-colors"
+          >
+            Continue with Google
+          </button>
+        </div>
+
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-zinc-800" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-zinc-900 px-2 text-zinc-500">Or continue with</span>
+          </div>
+        </div>
+
+        <form onSubmit={handleEmailSignup} className="space-y-4">
+          <div>
+            <label className="mb-2 block text-sm font-medium text-zinc-400">Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm placeholder:text-zinc-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              required
+            />
+          </div>
+          <div>
+            <label className="mb-2 block text-sm font-medium text-zinc-400">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm placeholder:text-zinc-600 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              placeholder="Min 6 characters"
+              minLength={6}
+              required
+            />
+          </div>
+          
+          {message && (
+            <p className={message.includes('Check') ? 'text-sm text-green-400' : 'text-sm text-red-400'}>
+              {message}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-md bg-indigo-600 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50"
+          >
+            {loading ? 'Creating account...' : 'Sign Up'}
+          </button>
+        </form>
+
+        <div className="text-center text-sm">
+          <span className="text-zinc-500">Already have an account? </span>
+          <Link href="/login" className="font-medium text-indigo-400 hover:text-indigo-300">
+            Sign in
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/signup/page.tsx'), signupPage);
+
+  // 8. Dashboard Layout (Supabase)
+  await ensureDir(path.join(projectPath, 'src/app/dashboard'));
+
+  const dashboardLayout = `import { redirect } from 'next/navigation';
+import Link from 'next/link';
+import { createClient } from '@/utils/supabase/server';
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect('/login');
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="bg-white border-b">
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/dashboard" className="text-xl font-bold">
+              Dashboard
+            </Link>
+            <div className="flex items-center gap-6">
+              <Link href="/dashboard" className="text-sm hover:text-indigo-600">
+                Home
+              </Link>
+              <Link href="/dashboard/billing" className="text-sm hover:text-indigo-600">
+                Billing
+              </Link>
+              <Link href="/dashboard/settings" className="text-sm hover:text-indigo-600">
+                Settings
+              </Link>
+              <Link href="/api/auth/signout" className="text-sm text-red-600 hover:text-red-700">
+                Sign Out
+              </Link>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <main>{children}</main>
+    </div>
+  );
+}
+`;
+  await writeFile(path.join(projectPath, 'src/app/dashboard/layout.tsx'), dashboardLayout);
+
+  // 9. Signout Route (Supabase)
+  await ensureDir(path.join(projectPath, 'src/app/api/auth/signout'));
+
+  const signoutRoute = `import { NextResponse } from 'next/server';
+import { createClient } from '@/utils/supabase/server';
+
+export async function GET() {
+  const supabase = await createClient();
+  await supabase.auth.signOut();
+  return NextResponse.redirect(new URL('/login', process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'));
+}
+`;
+  await writeFile(path.join(projectPath, 'src/app/api/auth/signout/route.ts'), signoutRoute);
 }
 
 async function generateNextAuth(projectPath) {

package/src/index.js

@@ -53,7 +53,7 @@ export async function main() {
   ╚════════════════════════════════════════════════════════════════╝
     `));
 
-    console.log(chalk.gray(`    Version ${orangeBright('1.3.4')} • Built by ${orangeBright('Danish Akhtar')} • ${orangeBright('github.com/danish296')}\n`));
+    console.log(chalk.gray(`    Version ${orangeBright('1.3.6')} • Built by ${orangeBright('Danish Akhtar')} • ${orangeBright('github.com/danish296')}\n`));
 
     // Parse command line arguments
     program