helix-lang 11.0.0

package/library/auth-flow/components/auth/AuthMiddleware.tsx

@@ -0,0 +1,139 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export interface AuthenticatedUser {
+    id: string;
+    email: string;
+    name: string | null;
+}
+
+interface SessionRecord {
+    id: string;
+    userId: string;
+    token: string;
+    expiresAt: string;
+    user: AuthenticatedUser;
+}
+
+/**
+ * Extracts the bearer token from an Authorization header.
+ */
+function extractToken(request: NextRequest): string | null {
+    const authHeader = request.headers.get('authorization');
+    if (!authHeader) return null;
+
+    const [scheme, token] = authHeader.split(' ');
+    if (scheme?.toLowerCase() !== 'bearer' || !token) return null;
+
+    return token;
+}
+
+/**
+ * Middleware that validates a session token against the database.
+ * Wrap your API route handler with this to protect it.
+ *
+ * Usage:
+ *   import { withAuth } from '@/components/auth/AuthMiddleware';
+ *
+ *   export const GET = withAuth(async (request, user) => {
+ *       return NextResponse.json({ message: `Hello ${user.email}` });
+ *   });
+ */
+export function withAuth(
+    handler: (request: NextRequest, user: AuthenticatedUser) => Promise<NextResponse>,
+    options: { sessionLookup?: (token: string) => Promise<SessionRecord | null> } = {}
+) {
+    return async (request: NextRequest): Promise<NextResponse> => {
+        const token = extractToken(request);
+
+        if (!token) {
+            return NextResponse.json(
+                { error: 'Authentication required' },
+                { status: 401 }
+            );
+        }
+
+        try {
+            let session: SessionRecord | null = null;
+
+            if (options.sessionLookup) {
+                session = await options.sessionLookup(token);
+            } else {
+                // Default: call internal session validation endpoint
+                const validateRes = await fetch(
+                    new URL('/api/auth/validate', request.url).toString(),
+                    {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ token }),
+                    }
+                );
+
+                if (validateRes.ok) {
+                    const data = await validateRes.json();
+                    session = data.session;
+                }
+            }
+
+            if (!session) {
+                return NextResponse.json(
+                    { error: 'Invalid or expired session' },
+                    { status: 401 }
+                );
+            }
+
+            // Check expiry
+            if (new Date(session.expiresAt) < new Date()) {
+                return NextResponse.json(
+                    { error: 'Session expired' },
+                    { status: 401 }
+                );
+            }
+
+            return handler(request, session.user);
+        } catch {
+            return NextResponse.json(
+                { error: 'Authentication failed' },
+                { status: 500 }
+            );
+        }
+    };
+}
+
+/**
+ * Next.js middleware config helper for protecting routes at the edge.
+ * Add to middleware.ts:
+ *
+ *   import { authMiddlewareConfig } from '@/components/auth/AuthMiddleware';
+ *   export const config = authMiddlewareConfig(['/dashboard', '/settings']);
+ */
+export function authMiddlewareConfig(protectedPaths: string[]) {
+    return {
+        matcher: protectedPaths.map((p) => `${p}/:path*`),
+    };
+}
+
+/**
+ * Edge middleware handler for Next.js middleware.ts
+ */
+export function createAuthMiddleware(protectedPaths: string[]) {
+    return async function middleware(request: NextRequest) {
+        const { pathname } = request.nextUrl;
+        const isProtected = protectedPaths.some((p) => pathname.startsWith(p));
+
+        if (!isProtected) {
+            return NextResponse.next();
+        }
+
+        const token =
+            request.cookies.get('authToken')?.value ||
+            extractToken(request);
+
+        if (!token) {
+            const loginUrl = new URL('/login', request.url);
+            loginUrl.searchParams.set('callbackUrl', pathname);
+            return NextResponse.redirect(loginUrl);
+        }
+
+        return NextResponse.next();
+    };
+}

package/library/auth-flow/components/auth/LoginForm.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+
+interface LoginFormProps {
+    onSuccess?: (user: { id: string; email: string; name: string | null }) => void;
+    onRegisterClick?: () => void;
+    redirectTo?: string;
+}
+
+export default function LoginForm({ onSuccess, onRegisterClick, redirectTo = '/dashboard' }: LoginFormProps) {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            const response = await fetch('/api/auth/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                setError(data.error || 'Login failed');
+                return;
+            }
+
+            localStorage.setItem('authToken', data.token);
+
+            if (onSuccess) {
+                onSuccess(data.user);
+            } else {
+                window.location.href = redirectTo;
+            }
+        } catch (err: unknown) {
+            const message = err instanceof Error ? err.message : 'An unexpected error occurred';
+            setError(message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="w-full max-w-md mx-auto">
+            <div className="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 shadow-2xl">
+                <h2 className="text-2xl font-bold text-white mb-2">Welcome back</h2>
+                <p className="text-white/50 mb-6">Sign in to your account</p>
+
+                {error && (
+                    <div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg text-sm">
+                        {error}
+                    </div>
+                )}
+
+                <form onSubmit={handleSubmit} className="space-y-5">
+                    <div>
+                        <label className="block text-sm font-medium text-white/70 mb-1.5">
+                            Email
+                        </label>
+                        <input
+                            type="email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
+                            placeholder="you@example.com"
+                            required
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-white/70 mb-1.5">
+                            Password
+                        </label>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
+                            placeholder="Enter your password"
+                            required
+                        />
+                    </div>
+
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full py-2.5 px-4 bg-cyan-500 text-white font-medium rounded-lg hover:bg-cyan-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-lg shadow-cyan-500/25"
+                    >
+                        {loading ? (
+                            <span className="flex items-center justify-center gap-2">
+                                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                                </svg>
+                                Signing in...
+                            </span>
+                        ) : (
+                            'Sign in'
+                        )}
+                    </button>
+                </form>
+
+                {onRegisterClick && (
+                    <p className="mt-6 text-center text-sm text-white/50">
+                        Don&apos;t have an account?{' '}
+                        <button
+                            onClick={onRegisterClick}
+                            className="text-cyan-400 hover:text-cyan-300 font-medium transition-colors"
+                        >
+                            Create one
+                        </button>
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}

package/library/auth-flow/components/auth/RegisterForm.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+
+interface RegisterFormProps {
+    onSuccess?: (user: { id: string; email: string; name: string }) => void;
+    onLoginClick?: () => void;
+    redirectTo?: string;
+}
+
+export default function RegisterForm({ onSuccess, onLoginClick, redirectTo = '/dashboard' }: RegisterFormProps) {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        setError('');
+
+        if (password !== confirmPassword) {
+            setError('Passwords do not match');
+            return;
+        }
+
+        if (password.length < 8) {
+            setError('Password must be at least 8 characters');
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            const response = await fetch('/api/auth/register', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, email, password }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                setError(data.error || 'Registration failed');
+                return;
+            }
+
+            localStorage.setItem('authToken', data.token);
+
+            if (onSuccess) {
+                onSuccess(data.user);
+            } else {
+                window.location.href = redirectTo;
+            }
+        } catch (err: unknown) {
+            const message = err instanceof Error ? err.message : 'An unexpected error occurred';
+            setError(message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="w-full max-w-md mx-auto">
+            <div className="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl p-8 shadow-2xl">
+                <h2 className="text-2xl font-bold text-white mb-2">Create account</h2>
+                <p className="text-white/50 mb-6">Get started with your new account</p>
+
+                {error && (
+                    <div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg text-sm">
+                        {error}
+                    </div>
+                )}
+
+                <form onSubmit={handleSubmit} className="space-y-5">
+                    <div>
+                        <label className="block text-sm font-medium text-white/70 mb-1.5">
+                            Full name
+                        </label>
+                        <input
+                            type="text"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
+                            placeholder="John Doe"
+                            required
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-white/70 mb-1.5">
+                            Email
+                        </label>
+                        <input
+                            type="email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
+                            placeholder="you@example.com"
+                            required
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-white/70 mb-1.5">
+                            Password
+                        </label>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
+                            placeholder="Min. 8 characters"
+                            minLength={8}
+                            required
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-white/70 mb-1.5">
+                            Confirm password
+                        </label>
+                        <input
+                            type="password"
+                            value={confirmPassword}
+                            onChange={(e) => setConfirmPassword(e.target.value)}
+                            className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
+                            placeholder="Re-enter your password"
+                            minLength={8}
+                            required
+                        />
+                    </div>
+
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full py-2.5 px-4 bg-cyan-500 text-white font-medium rounded-lg hover:bg-cyan-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-lg shadow-cyan-500/25"
+                    >
+                        {loading ? (
+                            <span className="flex items-center justify-center gap-2">
+                                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                                </svg>
+                                Creating account...
+                            </span>
+                        ) : (
+                            'Create account'
+                        )}
+                    </button>
+                </form>
+
+                {onLoginClick && (
+                    <p className="mt-6 text-center text-sm text-white/50">
+                        Already have an account?{' '}
+                        <button
+                            onClick={onLoginClick}
+                            className="text-cyan-400 hover:text-cyan-300 font-medium transition-colors"
+                        >
+                            Sign in
+                        </button>
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}

package/library/auth-flow/components/auth/nextauth-config.ts

@@ -0,0 +1,99 @@
+/**
+ * NextAuth.js configuration boilerplate for Helix projects.
+ *
+ * Usage:
+ *   1. Copy this file to src/lib/auth.ts
+ *   2. Create app/api/auth/[...nextauth]/route.ts with:
+ *        import NextAuth from 'next-auth';
+ *        import { authOptions } from '@/lib/auth';
+ *        const handler = NextAuth(authOptions);
+ *        export { handler as GET, handler as POST };
+ *   3. Set NEXTAUTH_SECRET and NEXTAUTH_URL in .env
+ */
+
+import type { NextAuthOptions, Session, User } from 'next-auth';
+import type { JWT } from 'next-auth/jwt';
+import CredentialsProvider from 'next-auth/providers/credentials';
+
+/**
+ * Stub for password verification -- replace with your actual bcrypt compare.
+ */
+async function verifyPassword(_plain: string, _hash: string): Promise<boolean> {
+    // Replace with: return bcrypt.compare(plain, hash);
+    return false;
+}
+
+/**
+ * Stub for user lookup -- replace with your Prisma/DB query.
+ */
+async function findUserByEmail(_email: string): Promise<{
+    id: string;
+    email: string;
+    name: string | null;
+    passwordHash: string;
+} | null> {
+    // Replace with: return prisma.user.findUnique({ where: { email } });
+    return null;
+}
+
+export const authOptions: NextAuthOptions = {
+    providers: [
+        CredentialsProvider({
+            name: 'Credentials',
+            credentials: {
+                email: { label: 'Email', type: 'email', placeholder: 'you@example.com' },
+                password: { label: 'Password', type: 'password' },
+            },
+            async authorize(credentials) {
+                if (!credentials?.email || !credentials?.password) {
+                    throw new Error('Email and password are required');
+                }
+
+                const user = await findUserByEmail(credentials.email);
+
+                if (!user) {
+                    throw new Error('Invalid credentials');
+                }
+
+                const isValid = await verifyPassword(credentials.password, user.passwordHash);
+
+                if (!isValid) {
+                    throw new Error('Invalid credentials');
+                }
+
+                return {
+                    id: user.id,
+                    email: user.email,
+                    name: user.name,
+                };
+            },
+        }),
+    ],
+
+    session: {
+        strategy: 'jwt',
+        maxAge: 7 * 24 * 60 * 60, // 7 days
+    },
+
+    pages: {
+        signIn: '/login',
+        error: '/login',
+    },
+
+    callbacks: {
+        async jwt({ token, user }: { token: JWT; user?: User }) {
+            if (user) {
+                token.id = user.id;
+            }
+            return token;
+        },
+        async session({ session, token }: { session: Session; token: JWT }) {
+            if (session.user && token.id) {
+                (session.user as Record<string, unknown>).id = token.id;
+            }
+            return session;
+        },
+    },
+
+    secret: process.env.NEXTAUTH_SECRET,
+};

package/library/auth-flow/manifest.json

@@ -0,0 +1,29 @@
+{
+    "name": "auth-flow",
+    "version": "1.0.0",
+    "description": "Complete authentication flow with login, registration, session middleware, and NextAuth configuration",
+    "author": "AD AI Engine",
+    "category": "auth",
+    "dependencies": [
+        "next-auth",
+        "@prisma/client",
+        "bcrypt",
+        "zod"
+    ],
+    "files": {
+        "schema": "schema.prisma",
+        "api": [
+            "app/api/auth/login/route.ts",
+            "app/api/auth/register/route.ts",
+            "app/api/auth/[...nextauth]/route.ts"
+        ],
+        "components": [
+            "components/auth/LoginForm.tsx",
+            "components/auth/RegisterForm.tsx",
+            "components/auth/AuthMiddleware.tsx",
+            "components/auth/nextauth-config.ts"
+        ]
+    },
+    "schema": "schema.prisma",
+    "instructions": "1. Install dependencies: npm install next-auth @prisma/client bcrypt zod\n2. Add NEXTAUTH_SECRET and NEXTAUTH_URL to .env\n3. Run npx prisma db push to create User/Session tables\n4. Wrap your app with SessionProvider from next-auth/react\n5. Use AuthMiddleware in API routes to protect endpoints"
+}

package/library/auth-flow/schema.prisma

@@ -0,0 +1,45 @@
+// Prisma Schema additions for auth-flow component
+// Merge into your existing schema.prisma
+
+model User {
+    id            String    @id @default(uuid())
+    email         String    @unique
+    passwordHash  String
+    name          String?
+    image         String?
+    emailVerified DateTime?
+    createdAt     DateTime  @default(now())
+    updatedAt     DateTime  @updatedAt
+    sessions      Session[]
+    accounts      Account[]
+}
+
+model Session {
+    id           String   @id @default(uuid())
+    userId       String
+    token        String   @unique
+    expiresAt    DateTime
+    createdAt    DateTime @default(now())
+    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+    @@index([token])
+    @@index([userId])
+}
+
+model Account {
+    id                String  @id @default(uuid())
+    userId            String
+    type              String
+    provider          String
+    providerAccountId String
+    refresh_token     String?
+    access_token      String?
+    expires_at        Int?
+    token_type        String?
+    scope             String?
+    id_token          String?
+    user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+    @@unique([provider, providerAccountId])
+    @@index([userId])
+}