@rblez/authly 0.1.0

package/src/generators/ui.js

@@ -0,0 +1,619 @@
+/**
+ * Scaffolds auth UI components for Next.js app router.
+ * Generates TSX pages that use the authly SDK (not Supabase auth)
+ * for email/password and OAuth login.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+// ── Icon map for providers (SimpleIcons CDN) ──────────
+const PROVIDER_ICON = {
+  google: "https://cdn.simpleicons.org/google",
+  github: "https://cdn.simpleicons.org/github",
+  discord: "https://cdn.simpleicons.org/discord",
+};
+
+// ── proxy.ts (replaces deprecated middleware.ts) ────
+const proxyTS = (opts = {}) => {
+  const authlyUrl = opts.authlyUrl || "http://localhost:1284";
+  const origin = opts.origin || "http://localhost:3000";
+  return `'use strict';
+
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+const AUTHLY_URL = '${authlyUrl}';
+
+// Routes that require a valid session
+const protectedPaths = ['/dashboard', '/profile', '/settings'];
+
+// Routes that redirect away if already logged in
+const authPaths = ['/auth/login', '/auth/signup'];
+
+async function verifySession(token: string): Promise<object | null> {
+  try {
+    const res = await fetch(\`\${AUTHLY_URL}/api/auth/me\`, {
+      headers: { Authorization: \`Bearer \${token}\` },
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    return data.success ? data.session : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function middleware(req: NextRequest) {
+  const token = req.nextUrl.searchParams.get('token') ?? req.cookies.get('authly_session')?.value;
+  const session = token ? await verifySession(token) : null;
+
+  const path = req.nextUrl.pathname;
+
+  // Protected: redirect to login if no session
+  if (!session && protectedPaths.some(p => path.startsWith(p))) {
+    return NextResponse.redirect(new URL('/auth/login', req.url));
+  }
+
+  // Auth pages: redirect to dashboard if already logged in
+  if (session && authPaths.some(p => path === p)) {
+    return NextResponse.redirect(new URL('/dashboard', req.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/((?!_next|api|static|favicon|.*\\\\..*).*)'],
+};
+`;
+};
+
+// ── Login page (uses authly API, not Supabase auth) ────
+// Fetches enabled providers dynamically, shows only enabled ones with SimpleIcons
+const loginTSX = (opts = {}) => {
+  const authlyUrl = opts.authlyUrl || "http://localhost:1284";
+  const origin = opts.origin || "http://localhost:3000";
+  return `'use client';
+
+import React, { useState, useEffect, FormEvent } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+interface Provider {
+  name: string;
+  enabled: boolean;
+  scopes: string;
+}
+
+export default function LoginPage() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [providers, setProviders] = useState<Provider[]>([]);
+
+  useEffect(() => {
+    // Fetch enabled providers from authly API
+    fetch('/api/auth/providers')
+      .then(res => res.ok ? res.json() : null)
+      .then(data => {
+        if (data?.providers) setProviders(data.providers.filter((p: Provider) => p.enabled));
+      })
+      .catch(() => {});
+  }, []);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const res = await fetch('/auth/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await res.json();
+      setLoading(false);
+
+      if (!res.ok) { setError(data.error || 'Login failed'); return; }
+
+      const next = params.get('next') || '/dashboard';
+      router.push(next);
+      router.refresh();
+    } catch {
+      setLoading(false);
+      setError('Network error');
+    }
+  };
+
+  const handleProvider = (provider: string) => {
+    window.location.href = \`/auth/api/\${provider}/login\`;
+  };
+
+  const enabledProviders = providers.length > 0 ? providers : [];
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <h1>Welcome back</h1>
+        <p className="text-muted">Sign in to your account</p>
+
+        {enabledProviders.length > 0 && (
+          <div className="auth-providers">
+            {enabledProviders.map((provider) => (
+              <button
+                key={provider.name}
+                type="button"
+                onClick={() => handleProvider(provider.name)}
+                className={\`provider-btn provider-\${provider.name}\`}
+              >
+                <img
+                  src={\`https://cdn.simpleicons.org/\${provider.name}\`}
+                  alt={provider.name}
+                  width="18"
+                  height="18"
+                  className="provider-icon"
+                />
+                Continue with {provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {enabledProviders.length > 0 && <div className="auth-divider"><span>or</span></div>}
+
+        <form onSubmit={handleSubmit} className="auth-form">
+          <label htmlFor="email">Email</label>
+          <input
+            id="email" type="email" value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@example.com" required
+          />
+          <label htmlFor="password">Password</label>
+          <input
+            id="password" type="password" value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="········" required
+          />
+          {error && <p className="error">{error}</p>}
+          <button type="submit" disabled={loading}>
+            {loading ? 'Signing in…' : 'Sign in'}
+          </button>
+        </form>
+
+        <p className="auth-link">
+          Don&apos;t have an account?{' '}
+          <a href="/auth/signup">Create one</a>
+        </p>
+      </div>
+
+      <style jsx>{\`
+        .auth-page {
+          display: flex; align-items: center; justify-content: center;
+          min-height: 100vh; background: #000;
+          font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+        }
+        .auth-card {
+          background: #111; border: 1px solid #222; border-radius: 12px;
+          padding: 32px; width: 100%; max-width: 400px;
+        }
+        .auth-card h1 { font-size: 1.5rem; color: #fff; margin: 0 0 4px; }
+        .text-muted { color: #888; margin: 0 0 20px; font-size: 0.875rem; }
+        .auth-providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
+        .provider-btn {
+          background: #1a1a1a; color: #fff; border: 1px solid #333;
+          border-radius: 6px; padding: 10px 12px; font-size: 0.875rem;
+          cursor: pointer; transition: background 0.15s;
+          display: flex; align-items: center; gap: 10px;
+        }
+        .provider-btn:hover { background: #2a2a2a; }
+        .provider-icon { flex-shrink: 0; }
+        .auth-divider {
+          display: flex; align-items: center; gap: 12px;
+          color: #555; font-size: 0.75rem; margin: 16px 0;
+        }
+        .auth-divider::before, .auth-divider::after {
+          content: ""; flex: 1; height: 1px; background: #222;
+        }
+        .auth-form { display: flex; flex-direction: column; gap: 8px; }
+        .auth-form label { color: #ccc; font-size: 0.8rem; font-weight: 500; }
+        .auth-form input {
+          background: #000; border: 1px solid #333; border-radius: 6px;
+          padding: 10px 12px; color: #fff; font-size: 0.875rem; outline: none;
+        }
+        .auth-form input:focus { border-color: #555; }
+        .error { color: #f87171; font-size: 0.8rem; margin: 4px 0; }
+        .auth-form button[type="submit"] {
+          background: #fff; color: #000; border: none; border-radius: 6px;
+          padding: 10px; font-weight: 600; font-size: 0.875rem;
+          cursor: pointer; margin-top: 8px;
+        }
+        .auth-form button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
+        .auth-link { color: #888; font-size: 0.8rem; text-align: center; margin-top: 20px; }
+        .auth-link a { color: #fff; text-decoration: underline; }
+      \`}</style>
+    </div>
+  );
+}
+`;
+};
+
+// ── Signup page ──────────────────────────────────────
+const signupTSX = () =>
+`'use client';
+
+import React, { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const res = await fetch('/auth/api/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, name }),
+      });
+      const data = await res.json();
+      setLoading(false);
+
+      if (!res.ok) { setError(data.error || 'Signup failed'); return; }
+      setSuccess(true);
+    } catch {
+      setLoading(false);
+      setError('Network error');
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="auth-page">
+        <div className="auth-card">
+          <h1>Account created</h1>
+          <p className="text-muted">Check your email to verify your account.</p>
+          <a href="/auth/login" className="auth-link">Back to login</a>
+        </div>
+        <style jsx>{\`
+          .auth-page {
+            display: flex; align-items: center; justify-content: center;
+            min-height: 100vh; background: #000;
+            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+          }
+          .auth-card {
+            background: #111; border: 1px solid #222; border-radius: 12px;
+            padding: 32px; width: 100%; max-width: 400px; text-align: center;
+          }
+          .auth-card h1 { font-size: 1.5rem; color: #fff; margin: 0 0 4px; }
+          .text-muted { color: #888; font-size: 0.875rem; }
+          .auth-link { color: #fff; font-size: 0.875rem; }
+        \`}</style>
+      </div>
+    );
+  }
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <h1>Create account</h1>
+        <p className="text-muted">Sign up to get started</p>
+        <form onSubmit={handleSubmit} className="auth-form">
+          <label htmlFor="name">Full name</label>
+          <input
+            id="name" type="text" value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Jane Doe"
+          />
+          <label htmlFor="email">Email</label>
+          <input
+            id="email" type="email" value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@example.com" required
+          />
+          <label htmlFor="password">Password</label>
+          <input
+            id="password" type="password" value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Min. 8 characters" minLength={8} required
+          />
+          {error && <p className="error">{error}</p>}
+          <button type="submit" disabled={loading}>
+            {loading ? 'Creating account…' : 'Create account'}
+          </button>
+        </form>
+        <p className="auth-link">
+          Already have an account?{' '}
+          <a href="/auth/login">Sign in</a>
+        </p>
+      </div>
+      <style jsx>{\`
+        .auth-page {
+          display: flex; align-items: center; justify-content: center;
+          min-height: 100vh; background: #000;
+          font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+        }
+        .auth-card {
+          background: #111; border: 1px solid #222; border-radius: 12px;
+          padding: 32px; width: 100%; max-width: 400px;
+        }
+        .auth-card h1 { font-size: 1.5rem; color: #fff; margin: 0 0 4px; }
+        .text-muted { color: #888; margin: 0 0 24px; font-size: 0.875rem; }
+        .auth-form { display: flex; flex-direction: column; gap: 8px; }
+        .auth-form label { color: #ccc; font-size: 0.8rem; font-weight: 500; }
+        .auth-form input {
+          background: #000; border: 1px solid #333; border-radius: 6px;
+          padding: 10px 12px; color: #fff; font-size: 0.875rem; outline: none;
+        }
+        .auth-form input:focus { border-color: #555; }
+        .error { color: #f87171; font-size: 0.8rem; margin: 4px 0; }
+        .auth-form button[type="submit"] {
+          background: #fff; color: #000; border: none; border-radius: 6px;
+          padding: 10px; font-weight: 600; font-size: 0.875rem;
+          cursor: pointer; margin-top: 8px;
+        }
+        .auth-form button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
+        .auth-link { color: #888; font-size: 0.8rem; text-align: center; margin-top: 20px; }
+        .auth-link a { color: #fff; text-decoration: underline; }
+      \`}</style>
+    </div>
+  );
+}
+`;
+
+// ── OAuth callback route ────────────────────────────
+const oauthCallbackTSX = (provider) =>
+`import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(req: NextRequest) {
+  const code = req.nextUrl.searchParams.get('code');
+  const state = req.nextUrl.searchParams.get('state');
+  const error = req.nextUrl.searchParams.get('error');
+
+  if (error) {
+    return NextResponse.redirect(
+      new URL(\`/auth/login?error=\${encodeURIComponent(error)}\`, req.url)
+    );
+  }
+
+  if (!code) {
+    return new NextResponse('Missing authorization code', { status: 400 });
+  }
+
+  // Exchange the code via authly
+  const authlyUrl = process.env.AUTHLY_URL || 'http://localhost:1284';
+  const res = await fetch(\`\${authlyUrl}/api/auth/${provider}/callback\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      code,
+      state,
+      redirectUri: \`\${req.nextUrl.origin}/auth/api/${provider}/callback\`,
+    }),
+  });
+
+  const data = await res.json();
+
+  if (!res.ok) {
+    return NextResponse.redirect(
+      new URL(\`/auth/login?error=\${encodeURIComponent(data.error || 'OAuth failed')}\`, req.url)
+    );
+  }
+
+  // Set session cookie and redirect
+  const response = NextResponse.redirect(new URL('/dashboard', req.url));
+  response.cookies.set('authly_session', data.token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 60 * 60 * 24, // 24h
+    path: '/',
+  });
+
+  return response;
+}
+`;
+
+// ── Login API route (password-based) ─────────────────
+const loginApiTSX = () =>
+`import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const { email, password } = await req.json();
+
+  const authlyUrl = process.env.AUTHLY_URL || 'http://localhost:1284';
+  const res = await fetch(\`\${authlyUrl}/api/auth/login\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  });
+
+  const data = await res.json();
+  if (!res.ok) {
+    return NextResponse.json({ error: data.error }, { status: res.status });
+  }
+
+  const response = NextResponse.json({ success: true });
+  response.cookies.set('authly_session', data.token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 60 * 60 * 24,
+    path: '/',
+  });
+
+  return response;
+}
+`;
+
+// ── Signup API route ─────────────────────────────────
+const signupApiTSX = () =>
+`import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const { email, password, name } = await req.json();
+
+  const authlyUrl = process.env.AUTHLY_URL || 'http://localhost:1284';
+  const res = await fetch(\`\${authlyUrl}/api/auth/register\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password, name }),
+  });
+
+  const data = await res.json();
+  if (!res.ok) {
+    return NextResponse.json({ error: data.error }, { status: res.status });
+  }
+
+  return NextResponse.json({ success: true });
+}
+`;
+
+// ── Providers API route (returns enabled providers for login) ─────
+const providersApiTSX = () =>
+`import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET() {
+  const authlyUrl = process.env.AUTHLY_URL || 'http://localhost:1284';
+  const res = await fetch(\`\${authlyUrl}/api/auth/providers\`);
+
+  if (!res.ok) {
+    return NextResponse.json({ providers: [] });
+  }
+
+  const data = await res.json();
+  return NextResponse.json(data);
+}
+`;
+
+// ── OAuth login redirect route ──────────────────────
+const oauthRedirectTSX = (provider) =>
+`import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET() {
+  const authlyUrl = process.env.AUTHLY_URL || 'http://localhost:1284';
+  const origin = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
+
+  const res = await fetch(\`\${authlyUrl}/api/auth/${provider}/authorize\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      redirectUri: \`\${origin}/auth/api/${provider}/callback\`,
+    }),
+  });
+
+  const data = await res.json();
+  if (!res.ok) {
+    return NextResponse.json({ error: data.error }, { status: res.status });
+  }
+
+  return NextResponse.redirect(data.url);
+}
+`;
+
+// ── Public API ───────────────────────────────────────
+
+/**
+ * Generate all auth UI files into a Next.js project.
+ *
+ * @param {string} targetDir - Project root (where src/app lives)
+ * @param {{ proxy?: boolean; apiRoutes?: boolean }} opts
+ * @returns {{ files: string[] }}
+ */
+export async function scaffoldAuth(targetDir, opts = {}) {
+  const appDir = path.join(targetDir, 'src', 'app', 'auth');
+  const apiDir = path.join(appDir, 'api', 'auth');
+  const files = [];
+
+  fs.mkdirSync(appDir, { recursive: true });
+
+  // Login page (with dynamic SimpleIcon provider buttons)
+  const loginPath = path.join(appDir, 'login', 'page.tsx');
+  fs.mkdirSync(path.dirname(loginPath), { recursive: true });
+  fs.writeFileSync(loginPath, loginTSX(opts), 'utf-8');
+  files.push(loginPath);
+
+  // Signup page
+  const signupPath = path.join(appDir, 'signup', 'page.tsx');
+  fs.mkdirSync(path.dirname(signupPath), { recursive: true });
+  fs.writeFileSync(signupPath, signupTSX(), 'utf-8');
+  files.push(signupPath);
+
+  // proxy.ts (replaces deprecated middleware.ts)
+  if (opts.proxy !== false) {
+    const proxyPath = path.join(targetDir, 'proxy.ts');
+    fs.writeFileSync(proxyPath, proxyTS(opts), 'utf-8');
+    files.push(proxyPath);
+  }
+
+  // API routes
+  if (opts.apiRoutes) {
+    fs.mkdirSync(path.join(apiDir, 'login'), { recursive: true });
+    fs.mkdirSync(path.join(apiDir, 'signup'), { recursive: true });
+    fs.mkdirSync(path.join(apiDir, 'providers'), { recursive: true });
+    fs.mkdirSync(path.join(apiDir, 'github', 'callback'), { recursive: true });
+    fs.mkdirSync(path.join(apiDir, 'google', 'callback'), { recursive: true });
+
+    // Login/Signup API proxies
+    const loginApi = path.join(apiDir, 'login', 'route.ts');
+    fs.writeFileSync(loginApi, loginApiTSX(), 'utf-8');
+    files.push(loginApi);
+
+    const signupApi = path.join(apiDir, 'signup', 'route.ts');
+    fs.writeFileSync(signupApi, signupApiTSX(), 'utf-8');
+    files.push(signupApi);
+
+    // Providers list (returns enabled providers for login page)
+    // URL: /api/auth/providers → src/app/api/auth/providers/route.ts
+    // Note: this is OUTSIDE the auth/ scaffold directory
+    const providersDir = path.join(targetDir, 'src', 'app', 'api', 'auth', 'providers');
+    fs.mkdirSync(providersDir, { recursive: true });
+    const providersApi = path.join(providersDir, 'route.ts');
+    fs.writeFileSync(providersApi, providersApiTSX(), 'utf-8');
+    files.push(providersApi);
+
+    // OAuth redirects + callbacks
+    for (const provider of ['github', 'google']) {
+      const redirect = path.join(apiDir, provider, 'login', 'route.ts');
+      fs.mkdirSync(path.dirname(redirect), { recursive: true });
+      fs.writeFileSync(redirect, oauthRedirectTSX(provider), 'utf-8');
+      files.push(redirect);
+
+      const callback = path.join(apiDir, provider, 'callback', 'route.ts');
+      fs.mkdirSync(path.dirname(callback), { recursive: true });
+      fs.writeFileSync(callback, oauthCallbackTSX(provider), 'utf-8');
+      files.push(callback);
+    }
+  }
+
+  return { files };
+}
+
+/**
+ * Preview generated code without writing to disk.
+ *
+ * @param {'login' | 'signup' | 'proxy' | 'oauth-login' | 'oauth-callback'} type
+ * @returns {string}
+ */
+export function previewGenerated(type, opts = {}) {
+  switch (type) {
+    case 'login':       return loginTSX(opts);
+    case 'signup':      return signupTSX();
+    case 'proxy':       return proxyTS(opts);
+    case 'oauth-login': return loginApiTSX();
+    case 'oauth-callback': return oauthCallbackTSX('provider');
+    default:            return '';
+  }
+}

package/src/lib/framework.js

@@ -0,0 +1,29 @@
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+
+/**
+ * Detect the framework of the current working directory.
+ * Currently supports Next.js detection.
+ *
+ * @returns {{ name: string, version: string } | null}
+ */
+export function detectFramework() {
+  // Next.js: check for next.config.{js,ts,mjs} and package.json with next dep
+  const nextConfigs = ["next.config.js", "next.config.ts", "next.config.mjs"];
+  const hasNextConfig = nextConfigs.some((f) => existsSync(f));
+
+  if (hasNextConfig) {
+    try {
+      const pkg = JSON.parse(readFileSync("package.json", "utf-8"));
+      const nextVersion =
+        pkg.dependencies?.next ||
+        pkg.devDependencies?.next ||
+        "unknown";
+      return { name: "Next.js", version: nextVersion };
+    } catch {
+      return { name: "Next.js", version: "unknown" };
+    }
+  }
+
+  return null;
+}