create-solostack 1.0.0

package/src/generators/auth.js

@@ -0,0 +1,595 @@
+import path from 'path';
+import { writeFile, ensureDir } from '../utils/files.js';
+
+/**
+ * Generates NextAuth.js authentication configuration
+ * @param {string} projectPath - Path where the project is located
+ * @param {string} authProvider - Auth provider type
+ */
+export async function generateAuth(projectPath, authProvider) {
+  // Create auth directory
+  await ensureDir(path.join(projectPath, 'src/app/api/auth/[...nextauth]'));
+  await ensureDir(path.join(projectPath, 'src/app/(auth)/login'));
+  await ensureDir(path.join(projectPath, 'src/app/(auth)/signup'));
+
+  // Generate auth.config.ts
+  const authConfig = `import type { NextAuthConfig } from 'next-auth';
+import Credentials from 'next-auth/providers/credentials';
+import Google from 'next-auth/providers/google';
+import GitHub from 'next-auth/providers/github';
+import { db } from '@/lib/db';
+import bcrypt from 'bcryptjs';
+
+export const authConfig = {
+  providers: [
+    Google({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+    }),
+    GitHub({
+      clientId: process.env.GITHUB_CLIENT_ID,
+      clientSecret: process.env.GITHUB_CLIENT_SECRET,
+    }),
+    Credentials({
+      credentials: {
+        email: { label: 'Email', type: 'email' },
+        password: { label: 'Password', type: 'password' },
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials?.password) {
+          throw new Error('Missing credentials');
+        }
+
+        const user = await db.user.findUnique({
+          where: { email: credentials.email as string },
+        });
+
+        if (!user || !user.password) {
+          throw new Error('Invalid credentials');
+        }
+
+        const isValid = await bcrypt.compare(
+          credentials.password as string,
+          user.password
+        );
+
+        if (!isValid) {
+          throw new Error('Invalid credentials');
+        }
+
+        return {
+          id: user.id,
+          email: user.email,
+          name: user.name,
+          image: user.image,
+        };
+      },
+    }),
+  ],
+  pages: {
+    signIn: '/login',
+    signOut: '/login',
+    error: '/login',
+  },
+  callbacks: {
+    async session({ session, token }) {
+      if (token) {
+        session.user.id = token.id as string;
+        session.user.role = token.role as string;
+      }
+      return session;
+    },
+    async jwt({ token, user }) {
+      if (user) {
+        const dbUser = await db.user.findUnique({
+          where: { email: user.email! },
+        });
+        
+        if (dbUser) {
+          token.id = dbUser.id;
+          token.role = dbUser.role;
+        }
+      }
+      return token;
+    },
+  },
+  session: {
+    strategy: 'jwt',
+  },
+} satisfies NextAuthConfig;
+`;
+
+  await writeFile(path.join(projectPath, 'src/lib/auth.config.ts'), authConfig);
+
+  // Generate auth.ts
+  const auth = `import NextAuth from 'next-auth';
+import { PrismaAdapter } from '@auth/prisma-adapter';
+import { authConfig } from './auth.config';
+import { db } from './db';
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  adapter: PrismaAdapter(db),
+  ...authConfig,
+});
+`;
+
+  await writeFile(path.join(projectPath, 'src/lib/auth.ts'), auth);
+
+  // Generate API route handler
+  const apiRoute = `import { handlers } from '@/lib/auth';
+
+export const { GET, POST } = handlers;
+`;
+
+  await writeFile(
+    path.join(projectPath, 'src/app/api/auth/[...nextauth]/route.ts'),
+    apiRoute
+  );
+
+  // Generate middleware.ts
+  const middleware = `import { auth } from '@/lib/auth';
+import { NextResponse } from 'next/server';
+
+export default auth((req) => {
+  const isLoggedIn = !!req.auth;
+  const isOnDashboard = req.nextUrl.pathname.startsWith('/dashboard');
+  const isOnAuth = req.nextUrl.pathname.startsWith('/login') || 
+                   req.nextUrl.pathname.startsWith('/signup');
+
+  if (isOnDashboard && !isLoggedIn) {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  if (isOnAuth && isLoggedIn) {
+    return NextResponse.redirect(new URL('/dashboard', req.url));
+  }
+
+  return NextResponse.next();
+});
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+};
+`;
+
+  await writeFile(path.join(projectPath, 'middleware.ts'), middleware);
+
+  // Generate login page
+  const loginPage = `'use client';
+
+import { useState } from 'react';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const result = await signIn('credentials', {
+        email,
+        password,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        setError('Invalid email or password');
+      } else {
+        router.push('/dashboard');
+        router.refresh();
+      }
+    } catch (error) {
+      setError('An error occurred. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+            Sign in to your account
+          </h2>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="rounded-md bg-red-50 p-4">
+              <p className="text-sm text-red-800">{error}</p>
+            </div>
+          )}
+          <div className="-space-y-px rounded-md shadow-sm">
+            <div>
+              <label htmlFor="email" className="sr-only">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
+                placeholder="Email address"
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="sr-only">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
+                placeholder="Password"
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="group relative flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50"
+            >
+              {loading ? 'Signing in...' : 'Sign in'}
+            </button>
+          </div>
+
+          <div className="flex flex-col space-y-4">
+            <button
+              type="button"
+              onClick={() => signIn('google', { callbackUrl: '/dashboard' })}
+              className="flex w-full items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-50"
+            >
+              Continue with Google
+            </button>
+            <button
+              type="button"
+              onClick={() => signIn('github', { callbackUrl: '/dashboard' })}
+              className="flex w-full items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-50"
+            >
+              Continue with GitHub
+            </button>
+          </div>
+
+          <div className="text-center text-sm">
+            <span className="text-gray-600">Don't have an account? </span>
+            <Link href="/signup" className="font-semibold text-indigo-600 hover:text-indigo-500">
+              Sign up
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/(auth)/login/page.tsx'), loginPage);
+
+  // Generate signup page
+  const signupPage = `'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { signIn } from 'next-auth/react';
+import Link from 'next/link';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const res = await fetch('/api/auth/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, email, password }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || 'Something went wrong');
+        setLoading(false);
+        return;
+      }
+
+      // Sign in after successful signup
+      await signIn('credentials', {
+        email,
+        password,
+        redirect: false,
+      });
+
+      router.push('/dashboard');
+      router.refresh();
+    } catch (error) {
+      setError('An error occurred. Please try again.');
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+            Create your account
+          </h2>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="rounded-md bg-red-50 p-4">
+              <p className="text-sm text-red-800">{error}</p>
+            </div>
+          )}
+          <div className="-space-y-px rounded-md shadow-sm">
+            <div>
+              <label htmlFor="name" className="sr-only">
+                Full name
+              </label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
+                placeholder="Full name"
+              />
+            </div>
+            <div>
+              <label htmlFor="email" className="sr-only">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="relative block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
+                placeholder="Email address"
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="sr-only">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
+                placeholder="Password"
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="group relative flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50"
+            >
+              {loading ? 'Creating account...' : 'Sign up'}
+            </button>
+          </div>
+
+          <div className="flex flex-col space-y-4">
+            <button
+              type="button"
+              onClick={() => signIn('google', { callbackUrl: '/dashboard' })}
+              className="flex w-full items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-50"
+            >
+              Continue with Google
+            </button>
+            <button
+              type="button"
+              onClick={() => signIn('github', { callbackUrl: '/dashboard' })}
+              className="flex w-full items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-50"
+            >
+              Continue with GitHub
+            </button>
+          </div>
+
+          <div className="text-center text-sm">
+            <span className="text-gray-600">Already have an account? </span>
+            <Link href="/login" className="font-semibold text-indigo-600 hover:text-indigo-500">
+              Sign in
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/(auth)/signup/page.tsx'), signupPage);
+
+  // Generate signup API route
+  await ensureDir(path.join(projectPath, 'src/app/api/auth/signup'));
+
+  const signupApi = `import { NextRequest, NextResponse } from 'next/server';
+import { db } from '@/lib/db';
+import { stripe } from '@/lib/stripe';
+import bcrypt from 'bcryptjs';
+import { generateVerificationToken } from '@/lib/tokens';
+import { sendVerificationEmail } from '@/lib/email';
+
+export async function POST(req: NextRequest) {
+  try {
+    const { name, email, password } = await req.json();
+
+    if (!email || !password) {
+      return NextResponse.json(
+        { error: 'Email and password are required' },
+        { status: 400 }
+      );
+    }
+
+    // Check if user already exists
+    const existingUser = await db.user.findUnique({
+      where: { email },
+    });
+
+    if (existingUser) {
+      return NextResponse.json(
+        { error: 'User already exists' },
+        { status: 400 }
+      );
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(password, 10);
+
+    // Create Stripe customer
+    const customer = await stripe.customers.create({
+      email,
+      name: name || undefined,
+      metadata: {
+        source: 'signup',
+      },
+    });
+
+    // Create user with Stripe customer ID
+    const user = await db.user.create({
+      data: {
+        name,
+        email,
+        password: hashedPassword,
+        stripeCustomerId: customer.id,
+      },
+    });
+
+    // Generate verification token and send email (optional)
+    try {
+      const token = await generateVerificationToken(email);
+      const verificationUrl = \`\${process.env.NEXTAUTH_URL}/api/auth/verify?token=\${token}\`;
+      await sendVerificationEmail(email, verificationUrl);
+    } catch (emailError) {
+      console.error('Failed to send verification email:', emailError);
+      // Don't fail signup if email fails
+    }
+
+    return NextResponse.json(
+      { message: 'User created successfully', userId: user.id },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error('Signup error:', error);
+    return NextResponse.json(
+      { error: 'An error occurred during signup' },
+      { status: 500 }
+    );
+  }
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/api/auth/signup/route.ts'), signupApi);
+
+  // Generate token utility
+  const tokenUtility = `import crypto from 'crypto';
+import { db } from './db';
+
+export async function generateVerificationToken(email: string): Promise<string> {
+  const token = crypto.randomBytes(32).toString('hex');
+  const expires = new Date(Date.now() + 24 * 60 * 60 * 1000);
+  
+  await db.verificationToken.deleteMany({ where: { identifier: email } });
+  await db.verificationToken.create({ data: { identifier: email, token, expires } });
+  
+  return token;
+}
+
+export async function verifyToken(token: string): Promise<{ success: boolean; email?: string }> {
+  const verificationToken = await db.verificationToken.findUnique({ where: { token } });
+  if (!verificationToken || verificationToken.expires < new Date()) {
+    if (verificationToken) await db.verificationToken.delete({ where: { token } });
+    return { success: false };
+  }
+  
+  await db.user.update({
+    where: { email: verificationToken.identifier },
+    data: { emailVerified: new Date() },
+  });
+  await db.verificationToken.delete({ where: { token } });
+  
+  return { success: true, email: verificationToken.identifier };
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/lib/tokens.ts'), tokenUtility);
+
+  // Generate email verification API route
+  await ensureDir(path.join(projectPath, 'src/app/api/auth/verify'));
+
+  const verifyApi = `import { NextRequest, NextResponse } from 'next/server';
+import { verifyToken } from '@/lib/tokens';
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const token = searchParams.get('token');
+  if (!token) return NextResponse.json({ error: 'Token required' }, { status: 400 });
+  
+  const result = await verifyToken(token);
+  if (!result.success) return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
+  
+  return NextResponse.redirect(new URL('/login?verified=true', req.url));
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/api/auth/verify/route.ts'), verifyApi);
+
+  // Generate verify page
+  await ensureDir(path.join(projectPath, 'src/app/(auth)/verify'));
+  const verifyPage = `export default function VerifyPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12">
+      <div className="w-full max-w-md text-center">
+        <h2 className="text-3xl font-bold text-gray-900">Check Your Email</h2>
+        <p className="mt-2 text-sm text-gray-600">
+          We've sent you a verification link. Click it to verify your account.
+        </p>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/(auth)/verify/page.tsx'), verifyPage);
+}