@roboticela/devkit 3.0.0 → 4.1.0

package/registry/components/auth/nextjs-compact/v1/files/app/api/auth/[...route]/route.ts

@@ -0,0 +1,140 @@
+import { NextRequest, NextResponse } from "next/server";
+import { signToken, verifyToken } from "@/lib/auth/authService";
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function json(data: unknown, status = 200) {
+  return NextResponse.json(data, { status });
+}
+
+function err(message: string, status = 400) {
+  return json({ message }, status);
+}
+
+// ── Route dispatcher ─────────────────────────────────────────────────────────
+
+export async function POST(req: NextRequest, { params }: { params: Promise<{ route: string[] }> }) {
+  const { route } = await params;
+  const action = route.join("/");
+
+  if (action === "login") return handleLogin(req);
+  if (action === "register") return handleRegister(req);
+  if (action === "logout") return handleLogout();
+  if (action === "refresh") return handleRefresh(req);
+  if (action === "forgot-password") return handleForgotPassword(req);
+  if (action === "reset-password") return handleResetPassword(req);
+
+  return err("Not found", 404);
+}
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ route: string[] }> }) {
+  const { route } = await params;
+  const action = route.join("/");
+
+  if (action === "me") return handleMe(req);
+
+  return err("Not found", 404);
+}
+
+// ── Handlers ─────────────────────────────────────────────────────────────────
+
+async function handleLogin(req: NextRequest) {
+  const { email, password } = await req.json();
+  if (!email || !password) return err("Email and password are required");
+
+  // Replace with your real user lookup + bcrypt.compare
+  const user = await findUserByCredentials(email, password);
+  if (!user) return err("Invalid email or password", 401);
+
+  const token = await signToken({ sub: user.id, email: user.email });
+  return json({ user, token });
+}
+
+async function handleRegister(req: NextRequest) {
+  const { name, email, password } = await req.json();
+  if (!name || !email || !password) return err("Name, email, and password are required");
+  if (password.length < 8) return err("Password must be at least 8 characters");
+
+  // Replace with your real user creation logic
+  const user = await createUser(name, email, password);
+  const token = await signToken({ sub: user.id, email: user.email });
+  return json({ user, token }, 201);
+}
+
+async function handleLogout() {
+  const res = json({ ok: true });
+  res.cookies.delete("refresh_token");
+  return res;
+}
+
+async function handleRefresh(req: NextRequest) {
+  const refreshToken = req.cookies.get("refresh_token")?.value;
+  if (!refreshToken) return err("No refresh token", 401);
+  try {
+    const payload = await verifyToken(refreshToken);
+    const accessToken = await signToken({ sub: payload.sub, email: payload.email });
+    return json({ token: accessToken });
+  } catch {
+    return err("Invalid refresh token", 401);
+  }
+}
+
+async function handleForgotPassword(req: NextRequest) {
+  const { email } = await req.json();
+  if (!email) return err("Email is required");
+  // Replace: look up user, generate reset token, send email
+  await sendPasswordResetEmail(email);
+  return json({ ok: true });
+}
+
+async function handleResetPassword(req: NextRequest) {
+  const { token, password } = await req.json();
+  if (!token || !password) return err("Token and password are required");
+  // Replace: verify token, update user password
+  await resetUserPassword(token, password);
+  return json({ ok: true });
+}
+
+async function handleMe(req: NextRequest) {
+  const authHeader = req.headers.get("authorization");
+  const token = authHeader?.replace("Bearer ", "");
+  if (!token) return err("Unauthorized", 401);
+  try {
+    const payload = await verifyToken(token);
+    const user = await findUserById(payload.sub);
+    if (!user) return err("User not found", 404);
+    return json({ user });
+  } catch {
+    return err("Invalid token", 401);
+  }
+}
+
+// ── Stubs (replace with real DB calls) ───────────────────────────────────────
+
+async function findUserByCredentials(email: string, _password: string) {
+  // TODO: look up user in DB, compare password with bcrypt
+  void email;
+  return null as { id: string; name: string; email: string } | null;
+}
+
+async function createUser(name: string, email: string, _password: string) {
+  // TODO: hash password with bcrypt, insert into DB
+  void name; void email;
+  return { id: "stub", name, email };
+}
+
+async function findUserById(id: string) {
+  // TODO: look up user in DB by id
+  void id;
+  return null as { id: string; name: string; email: string } | null;
+}
+
+async function sendPasswordResetEmail(email: string) {
+  // TODO: generate token, store in DB, send via nodemailer
+  void email;
+}
+
+async function resetUserPassword(token: string, password: string) {
+  // TODO: verify token from DB, hash new password, update user
+  void token; void password;
+}

package/registry/components/auth/nextjs-compact/v1/files/app/auth/forgot-password/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState } from "react";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch("/api/auth/forgot-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+      if (!res.ok) {
+        const d = await res.json();
+        throw new Error(d.message || "Failed to send reset email");
+      }
+      setSubmitted(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--color-bg-subtle)",
+        padding: "var(--space-4)",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: "420px",
+          background: "var(--color-bg)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          padding: "var(--space-8)",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        {submitted ? (
+          <div style={{ textAlign: "center" }}>
+            <div style={{ fontSize: "3rem", marginBottom: "var(--space-4)" }}>📬</div>
+            <h1 style={{ fontSize: "var(--text-xl)", fontWeight: "var(--weight-bold)", color: "var(--color-text)" }}>
+              Check your email
+            </h1>
+            <p style={{ marginTop: "var(--space-2)", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+              We sent a password reset link to <strong>{email}</strong>
+            </p>
+            <a
+              href="/auth/login"
+              style={{
+                display: "inline-block",
+                marginTop: "var(--space-6)",
+                color: "var(--color-primary)",
+                fontSize: "var(--text-sm)",
+              }}
+            >
+              ← Back to sign in
+            </a>
+          </div>
+        ) : (
+          <>
+            <div style={{ textAlign: "center", marginBottom: "var(--space-8)" }}>
+              <h1 style={{ fontSize: "var(--text-2xl)", fontWeight: "var(--weight-bold)", color: "var(--color-text)" }}>
+                Forgot password?
+              </h1>
+              <p style={{ marginTop: "var(--space-2)", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+                Enter your email and we&apos;ll send you a reset link.
+              </p>
+            </div>
+
+            {error && (
+              <div
+                style={{
+                  marginBottom: "var(--space-4)",
+                  padding: "var(--space-3) var(--space-4)",
+                  borderRadius: "var(--radius-md)",
+                  background: "var(--color-error-subtle)",
+                  color: "var(--color-error-text)",
+                  fontSize: "var(--text-sm)",
+                }}
+              >
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
+              <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+                <label htmlFor="email" style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}>
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  style={{
+                    padding: "var(--space-3) var(--space-4)",
+                    borderRadius: "var(--radius-md)",
+                    border: "1px solid var(--color-border)",
+                    background: "var(--color-bg)",
+                    color: "var(--color-text)",
+                    fontSize: "var(--text-base)",
+                  }}
+                />
+              </div>
+              <button
+                type="submit"
+                disabled={loading}
+                style={{
+                  padding: "var(--space-3) var(--space-4)",
+                  borderRadius: "var(--radius-md)",
+                  background: loading ? "var(--color-bg-muted)" : "var(--color-primary)",
+                  color: "var(--color-primary-text)",
+                  fontWeight: "var(--weight-semibold)",
+                  border: "none",
+                  cursor: loading ? "not-allowed" : "pointer",
+                }}
+              >
+                {loading ? "Sending…" : "Send reset link"}
+              </button>
+              <a
+                href="/auth/login"
+                style={{ textAlign: "center", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}
+              >
+                ← Back to sign in
+              </a>
+            </form>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/app/auth/login/page.tsx

@@ -0,0 +1,45 @@
+import { LoginForm } from "@/components/auth/LoginForm";
+
+export default function LoginPage() {
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--color-bg-subtle)",
+        padding: "var(--space-4)",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: "420px",
+          background: "var(--color-bg)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          padding: "var(--space-8)",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        <div style={{ textAlign: "center", marginBottom: "var(--space-8)" }}>
+          <h1
+            style={{
+              fontSize: "var(--text-2xl)",
+              fontWeight: "var(--weight-bold)",
+              color: "var(--color-text)",
+              fontFamily: "var(--font-display)",
+            }}
+          >
+            Welcome back
+          </h1>
+          <p style={{ marginTop: "var(--space-2)", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+            Sign in to your account
+          </p>
+        </div>
+        <LoginForm />
+      </div>
+    </main>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/app/auth/register/page.tsx

@@ -0,0 +1,45 @@
+import { RegisterForm } from "@/components/auth/RegisterForm";
+
+export default function RegisterPage() {
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--color-bg-subtle)",
+        padding: "var(--space-4)",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: "420px",
+          background: "var(--color-bg)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          padding: "var(--space-8)",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        <div style={{ textAlign: "center", marginBottom: "var(--space-8)" }}>
+          <h1
+            style={{
+              fontSize: "var(--text-2xl)",
+              fontWeight: "var(--weight-bold)",
+              color: "var(--color-text)",
+              fontFamily: "var(--font-display)",
+            }}
+          >
+            Create an account
+          </h1>
+          <p style={{ marginTop: "var(--space-2)", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+            Get started for free
+          </p>
+        </div>
+        <RegisterForm />
+      </div>
+    </main>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/app/auth/reset-password/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+function ResetForm() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const token = params.get("token") ?? "";
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (password !== confirm) { setError("Passwords do not match"); return; }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch("/api/auth/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!res.ok) {
+        const d = await res.json();
+        throw new Error(d.message || "Failed to reset password");
+      }
+      router.push("/auth/login?reset=success");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (!token) {
+    return (
+      <p style={{ color: "var(--color-error)", textAlign: "center" }}>
+        Invalid or missing reset token.
+      </p>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
+      {error && (
+        <div
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-error-subtle)",
+            color: "var(--color-error-text)",
+            fontSize: "var(--text-sm)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+      {(["New password", "Confirm password"] as const).map((label) => (
+        <div key={label} style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+          <label style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}>
+            {label}
+          </label>
+          <input
+            type="password"
+            required
+            minLength={8}
+            value={label === "New password" ? password : confirm}
+            onChange={(e) => label === "New password" ? setPassword(e.target.value) : setConfirm(e.target.value)}
+            style={{
+              padding: "var(--space-3) var(--space-4)",
+              borderRadius: "var(--radius-md)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-bg)",
+              color: "var(--color-text)",
+              fontSize: "var(--text-base)",
+            }}
+          />
+        </div>
+      ))}
+      <button
+        type="submit"
+        disabled={loading}
+        style={{
+          padding: "var(--space-3) var(--space-4)",
+          borderRadius: "var(--radius-md)",
+          background: loading ? "var(--color-bg-muted)" : "var(--color-primary)",
+          color: "var(--color-primary-text)",
+          fontWeight: "var(--weight-semibold)",
+          border: "none",
+          cursor: loading ? "not-allowed" : "pointer",
+        }}
+      >
+        {loading ? "Resetting…" : "Reset password"}
+      </button>
+    </form>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--color-bg-subtle)",
+        padding: "var(--space-4)",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: "420px",
+          background: "var(--color-bg)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          padding: "var(--space-8)",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        <div style={{ textAlign: "center", marginBottom: "var(--space-8)" }}>
+          <h1 style={{ fontSize: "var(--text-2xl)", fontWeight: "var(--weight-bold)", color: "var(--color-text)" }}>
+            Reset password
+          </h1>
+          <p style={{ marginTop: "var(--space-2)", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+            Choose a new password for your account.
+          </p>
+        </div>
+        <Suspense fallback={<p>Loading…</p>}>
+          <ResetForm />
+        </Suspense>
+      </div>
+    </main>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/components/auth/AuthProvider.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  avatar?: string;
+}
+
+interface AuthContextValue {
+  user: User | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (name: string, email: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    refresh().finally(() => setLoading(false));
+  }, []);
+
+  async function refresh() {
+    try {
+      const res = await fetch("/api/auth/me");
+      if (res.ok) {
+        const data = await res.json();
+        setUser(data.user);
+      } else {
+        setUser(null);
+      }
+    } catch {
+      setUser(null);
+    }
+  }
+
+  async function login(email: string, password: string) {
+    const res = await fetch("/api/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    if (!res.ok) {
+      const err = await res.json();
+      throw new Error(err.message || "Login failed");
+    }
+    const data = await res.json();
+    setUser(data.user);
+  }
+
+  async function register(name: string, email: string, password: string) {
+    const res = await fetch("/api/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, email, password }),
+    });
+    if (!res.ok) {
+      const err = await res.json();
+      throw new Error(err.message || "Registration failed");
+    }
+    const data = await res.json();
+    setUser(data.user);
+  }
+
+  async function logout() {
+    await fetch("/api/auth/logout", { method: "POST" });
+    setUser(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout, refresh }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used inside <AuthProvider>");
+  return ctx;
+}