@liedsonc/core-auth-kit 0.1.0 → 0.2.0

package/auth-ui/bin/init.js

@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const PKG_NAME = "@liedsonc/core-auth-kit";
+const PKG_ROOT = path.resolve(__dirname, "..");
+const TEMPLATES_DIR = path.join(PKG_ROOT, "templates");
+
+const TEMPLATE_MAP = [
+  { template: "app/(auth)/layout.tsx", target: "app/(auth)/layout.tsx" },
+  { template: "app/(auth)/login/page.tsx", target: "app/(auth)/login/page.tsx" },
+  { template: "app/(auth)/register/page.tsx", target: "app/(auth)/register/page.tsx" },
+  { template: "app/(auth)/forgot-password/page.tsx", target: "app/(auth)/forgot-password/page.tsx" },
+  { template: "app/(auth)/reset-password/page.tsx", target: "app/(auth)/reset-password/page.tsx" },
+  { template: "app/(auth)/verify-email/page.tsx", target: "app/(auth)/verify-email/page.tsx" },
+  { template: "lib/auth-config.ts", target: "lib/auth-config.ts" },
+  { template: "lib/auth-client.ts", target: "lib/auth-client.ts" },
+  { template: "env.example", target: ".env.example" },
+  { template: "app/api/auth/login/route.ts", target: "app/api/auth/login/route.ts" },
+  { template: "app/api/auth/register/route.ts", target: "app/api/auth/register/route.ts" },
+  { template: "app/api/auth/logout/route.ts", target: "app/api/auth/logout/route.ts" },
+  { template: "app/api/auth/forgot-password/route.ts", target: "app/api/auth/forgot-password/route.ts" },
+  { template: "app/api/auth/reset-password/route.ts", target: "app/api/auth/reset-password/route.ts" },
+  { template: "app/api/auth/verify-email/route.ts", target: "app/api/auth/verify-email/route.ts" },
+  { template: "app/api/auth/session/route.ts", target: "app/api/auth/session/route.ts" },
+];
+
+function findProjectRoot(cwd) {
+  let dir = path.resolve(cwd);
+  for (let i = 0; i < 20; i++) {
+    const pkg = path.join(dir, "package.json");
+    const nextConfig =
+      fs.existsSync(path.join(dir, "next.config.js")) ||
+      fs.existsSync(path.join(dir, "next.config.mjs")) ||
+      fs.existsSync(path.join(dir, "next.config.ts"));
+    if (fs.existsSync(pkg) && nextConfig) return dir;
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}
+
+function detectAppDir(root) {
+  if (fs.existsSync(path.join(root, "src", "app"))) return "src/app";
+  return "app";
+}
+
+function detectLibDir(root) {
+  if (fs.existsSync(path.join(root, "src", "lib"))) return "src/lib";
+  if (fs.existsSync(path.join(root, "src", "app"))) return "src/lib";
+  return "lib";
+}
+
+function isPackageInstalled(root) {
+  const pkgDir = path.join(root, "node_modules", PKG_NAME);
+  return fs.existsSync(path.join(pkgDir, "package.json"));
+}
+
+function installPackage(root) {
+  console.log("Installing %s...", PKG_NAME);
+  execSync("npm install " + PKG_NAME, { cwd: root, stdio: "inherit" });
+  console.log("");
+}
+
+function run() {
+  const force = process.argv.includes("--force");
+  const cwd = process.cwd();
+  const root = findProjectRoot(cwd);
+
+  if (!root) {
+    console.error(
+      "Could not find a Next.js project (package.json + next.config). Run this from your app root."
+    );
+    process.exit(1);
+  }
+
+  if (!isPackageInstalled(root)) {
+    installPackage(root);
+  }
+
+  const appDir = detectAppDir(root);
+  const libDir = detectLibDir(root);
+
+  let created = 0;
+  let skipped = 0;
+
+  for (const { template, target } of TEMPLATE_MAP) {
+    const targetPath = target.startsWith("app/")
+      ? path.join(root, appDir, target.slice("app/".length))
+      : target.startsWith("lib/")
+        ? path.join(root, libDir, target.slice("lib/".length))
+        : target === ".env.example"
+          ? path.join(root, ".env.example")
+          : path.join(root, target);
+
+    const templatePath = path.join(TEMPLATES_DIR, template);
+    if (!fs.existsSync(templatePath)) {
+      console.warn("Template not found:", template);
+      continue;
+    }
+
+    if (fs.existsSync(targetPath) && !force) {
+      console.log("Skip (exists):", path.relative(root, targetPath));
+      skipped++;
+      continue;
+    }
+
+    const content = fs.readFileSync(templatePath, "utf8");
+    const dir = path.dirname(targetPath);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+    fs.writeFileSync(targetPath, content, "utf8");
+    console.log("Created:", path.relative(root, targetPath));
+    created++;
+  }
+
+  console.log("");
+  console.log("Done. Created %d file(s), skipped %d (use --force to overwrite).", created, skipped);
+  console.log("Next: implement lib/auth-client.ts (or src/lib/auth-client.ts) with your backend.");
+}
+
+run();

package/auth-ui/components/auth-card.tsx

@@ -1,49 +1,49 @@
-"use client";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "./ui/card";
-import { useAuthUIConfig } from "../context";
-import { cn } from "../utils";
-import "../styles/index.css";
-
-export interface AuthCardProps {
-  title: string;
-  subtitle?: string;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  className?: string;
-}
-
-export function AuthCard({
-  title,
-  subtitle,
-  children,
-  footer,
-  className,
-}: AuthCardProps) {
-  const config = useAuthUIConfig();
-
-  return (
-    <Card className={cn("auth-ui-card", className)}>
-      <CardHeader className="space-y-1">
-        {config.logo && (
-          <div className="flex justify-center mb-2" aria-hidden="true">
-            {config.logo}
-          </div>
-        )}
-        <CardTitle className="text-center">{title}</CardTitle>
-        {subtitle && (
-          <CardDescription className="text-center">{subtitle}</CardDescription>
-        )}
-      </CardHeader>
-      <CardContent>{children}</CardContent>
-      {footer && <CardFooter className="flex flex-col gap-2">{footer}</CardFooter>}
-    </Card>
-  );
-}
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { useAuthUIConfig } from "../context";
+import { cn } from "../utils";
+import "../styles/index.css";
+
+export interface AuthCardProps {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export function AuthCard({
+  title,
+  subtitle,
+  children,
+  footer,
+  className,
+}: AuthCardProps) {
+  const config = useAuthUIConfig();
+
+  return (
+    <Card className={cn("auth-ui-card", className)}>
+      <CardHeader className="space-y-1">
+        {config.logo && (
+          <div className="flex justify-center mb-2" aria-hidden="true">
+            {config.logo}
+          </div>
+        )}
+        <CardTitle className="text-center">{title}</CardTitle>
+        {subtitle && (
+          <CardDescription className="text-center">{subtitle}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+      {footer && <CardFooter className="flex flex-col gap-2">{footer}</CardFooter>}
+    </Card>
+  );
+}

package/auth-ui/components/auth-form.tsx

@@ -1,53 +1,53 @@
-"use client";
-
-import * as React from "react";
-import { cn } from "../utils";
-
-export interface AuthFormProps
-  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
-  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
-  loading?: boolean;
-  error?: string;
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function AuthForm({
-  onSubmit,
-  loading = false,
-  error,
-  children,
-  className,
-  ...props
-}: AuthFormProps) {
-  const [submitting, setSubmitting] = React.useState(false);
-  const isDisabled = loading || submitting;
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (isDisabled) return;
-    setSubmitting(true);
-    try {
-      await onSubmit(e);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      noValidate
-      className={cn("space-y-4", className)}
-      aria-busy={isDisabled}
-      {...props}
-    >
-      {error && (
-        <p role="alert" className="text-sm text-destructive">
-          {error}
-        </p>
-      )}
-      {children}
-    </form>
-  );
-}
+"use client";
+
+import * as React from "react";
+import { cn } from "../utils";
+
+export interface AuthFormProps
+  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+  loading?: boolean;
+  error?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function AuthForm({
+  onSubmit,
+  loading = false,
+  error,
+  children,
+  className,
+  ...props
+}: AuthFormProps) {
+  const [submitting, setSubmitting] = React.useState(false);
+  const isDisabled = loading || submitting;
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (isDisabled) return;
+    setSubmitting(true);
+    try {
+      await onSubmit(e);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      noValidate
+      className={cn("space-y-4", className)}
+      aria-busy={isDisabled}
+      {...props}
+    >
+      {error && (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+      {children}
+    </form>
+  );
+}

package/auth-ui/components/error-message.tsx

@@ -1,24 +1,24 @@
-"use client";
-
-import { cn } from "../utils";
-
-export function ErrorMessage({
-  children,
-  className,
-  id,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  id?: string;
-}) {
-  if (!children) return null;
-  return (
-    <p
-      id={id}
-      role="alert"
-      className={cn("text-sm text-destructive", className)}
-    >
-      {children}
-    </p>
-  );
-}
+"use client";
+
+import { cn } from "../utils";
+
+export function ErrorMessage({
+  children,
+  className,
+  id,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  id?: string;
+}) {
+  if (!children) return null;
+  return (
+    <p
+      id={id}
+      role="alert"
+      className={cn("text-sm text-destructive", className)}
+    >
+      {children}
+    </p>
+  );
+}

package/auth-ui/components/form-field.tsx

@@ -1,39 +1,39 @@
-"use client";
-
-import { Label } from "./ui/label";
-import { cn } from "../utils";
-
-export function FormField({
-  label,
-  htmlFor,
-  error,
-  children,
-  required,
-  className,
-}: {
-  label: string;
-  htmlFor: string;
-  error?: string;
-  children: React.ReactNode;
-  required?: boolean;
-  className?: string;
-}) {
-  return (
-    <div className={cn("space-y-2", className)}>
-      <Label htmlFor={htmlFor}>
-        {label}
-        {required && (
-          <span className="text-destructive ml-0.5" aria-hidden="true">
-            *
-          </span>
-        )}
-      </Label>
-      {children}
-      {error && (
-        <p id={`${htmlFor}-error`} role="alert" className="text-sm text-destructive">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}
+"use client";
+
+import { Label } from "./ui/label";
+import { cn } from "../utils";
+
+export function FormField({
+  label,
+  htmlFor,
+  error,
+  children,
+  required,
+  className,
+}: {
+  label: string;
+  htmlFor: string;
+  error?: string;
+  children: React.ReactNode;
+  required?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-2", className)}>
+      <Label htmlFor={htmlFor}>
+        {label}
+        {required && (
+          <span className="text-destructive ml-0.5" aria-hidden="true">
+            *
+          </span>
+        )}
+      </Label>
+      {children}
+      {error && (
+        <p id={`${htmlFor}-error`} role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/auth-ui/components/loading-spinner.tsx

@@ -1,19 +1,19 @@
-"use client";
-
-import { cn } from "../utils";
-
-export function LoadingSpinner({
-  className,
-  "aria-label": ariaLabel = "Loading",
-}: {
-  className?: string;
-  "aria-label"?: string;
-}) {
-  return (
-    <span
-      role="status"
-      aria-label={ariaLabel}
-      className={cn("inline-block size-5 animate-spin rounded-full border-2 border-current border-t-transparent", className)}
-    />
-  );
-}
+"use client";
+
+import { cn } from "../utils";
+
+export function LoadingSpinner({
+  className,
+  "aria-label": ariaLabel = "Loading",
+}: {
+  className?: string;
+  "aria-label"?: string;
+}) {
+  return (
+    <span
+      role="status"
+      aria-label={ariaLabel}
+      className={cn("inline-block size-5 animate-spin rounded-full border-2 border-current border-t-transparent", className)}
+    />
+  );
+}

package/auth-ui/components/oauth-buttons.tsx

@@ -1,49 +1,49 @@
-"use client";
-
-import { Button } from "./ui/button";
-import { useOAuth } from "../hooks/use-oauth";
-import { cn } from "../utils";
-import type { OAuthProvider } from "../types";
-
-const providerLabels: Record<OAuthProvider, string> = {
-  google: "Continue with Google",
-  apple: "Continue with Apple",
-};
-
-export function OAuthButtons({
-  providers,
-  loadingProvider,
-  onSignIn,
-  className,
-}: {
-  providers: { provider: OAuthProvider; enabled: boolean }[];
-  loadingProvider: OAuthProvider | null;
-  onSignIn: (provider: OAuthProvider) => void | Promise<void>;
-  className?: string;
-}) {
-  const enabled = providers.filter((p) => p.enabled);
-
-  if (enabled.length === 0) return null;
-
-  return (
-    <div className={cn("space-y-2", className)}>
-      {enabled.map(({ provider }) => (
-        <Button
-          key={provider}
-          type="button"
-          variant="outline"
-          className="w-full"
-          disabled={!!loadingProvider}
-          onClick={() => onSignIn(provider)}
-          aria-busy={loadingProvider === provider}
-        >
-          {loadingProvider === provider ? (
-            <span className="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-          ) : (
-            providerLabels[provider]
-          )}
-        </Button>
-      ))}
-    </div>
-  );
-}
+"use client";
+
+import { Button } from "./ui/button";
+import { useOAuth } from "../hooks/use-oauth";
+import { cn } from "../utils";
+import type { OAuthProvider } from "../types";
+
+const providerLabels: Record<OAuthProvider, string> = {
+  google: "Continue with Google",
+  apple: "Continue with Apple",
+};
+
+export function OAuthButtons({
+  providers,
+  loadingProvider,
+  onSignIn,
+  className,
+}: {
+  providers: { provider: OAuthProvider; enabled: boolean }[];
+  loadingProvider: OAuthProvider | null;
+  onSignIn: (provider: OAuthProvider) => void | Promise<void>;
+  className?: string;
+}) {
+  const enabled = providers.filter((p) => p.enabled);
+
+  if (enabled.length === 0) return null;
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {enabled.map(({ provider }) => (
+        <Button
+          key={provider}
+          type="button"
+          variant="outline"
+          className="w-full"
+          disabled={!!loadingProvider}
+          onClick={() => onSignIn(provider)}
+          aria-busy={loadingProvider === provider}
+        >
+          {loadingProvider === provider ? (
+            <span className="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          ) : (
+            providerLabels[provider]
+          )}
+        </Button>
+      ))}
+    </div>
+  );
+}