@liedsonc/core-auth-kit 0.1.0 → 0.2.1

package/auth-ui/pages/reset-password/index.tsx

@@ -1,133 +1,133 @@
-"use client";
-
-import Link from "next/link";
-import { useAuth } from "../../hooks/use-auth";
-import { useSearchParams } from "next/navigation";
-import { AuthCard } from "../../components/auth-card";
-import { AuthForm } from "../../components/auth-form";
-import { FormField } from "../../components/form-field";
-import { PasswordInput } from "../../components/password-input";
-import { Button } from "../../components/ui/button";
-import { useState, Suspense } from "react";
-
-const genericError = "Something went wrong. Please request a new reset link.";
-
-function ResetPasswordForm() {
-  const searchParams = useSearchParams();
-  const token = searchParams.get("token") ?? "";
-  const { resetPassword, loading, error, clearError } = useAuth();
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [fieldErrors, setFieldErrors] = useState<{ password?: string; confirm?: string }>({});
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    clearError();
-    setFieldErrors({});
-    const err: { password?: string; confirm?: string } = {};
-    if (!token) err.password = "Invalid or missing reset link.";
-    if (!password) err.password = "Password is required.";
-    if (password.length < 8) err.password = "Password must be at least 8 characters.";
-    if (password !== confirmPassword) err.confirm = "Passwords do not match.";
-    if (Object.keys(err).length) {
-      setFieldErrors(err);
-      return;
-    }
-    const result = await resetPassword(token, password);
-    if (!result.success) setFieldErrors({ password: genericError });
-  };
-
-  if (!token) {
-    return (
-      <div className="flex min-h-screen flex-col items-center justify-center p-4">
-        <AuthCard
-          title="Reset password"
-          subtitle="Invalid or expired link"
-          footer={
-            <Link
-              href="/forgot-password"
-              className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
-            >
-              Request a new reset link
-            </Link>
-          }
-        >
-          <p className="text-sm text-muted-foreground">
-            This reset link is invalid or has expired. Please request a new one.
-          </p>
-        </AuthCard>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center p-4">
-      <AuthCard
-        title="Reset password"
-        subtitle="Enter your new password"
-        footer={
-          <div className="flex w-full justify-center text-sm text-muted-foreground">
-            <Link
-              href="/login"
-              className="underline underline-offset-4 hover:text-foreground"
-            >
-              Back to sign in
-            </Link>
-          </div>
-        }
-      >
-        <AuthForm onSubmit={handleSubmit} loading={loading} error={error ? genericError : undefined}>
-          <FormField label="New password" htmlFor="reset-password" error={fieldErrors.password} required>
-            <PasswordInput
-              id="reset-password"
-              placeholder="••••••••"
-              autoComplete="new-password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              disabled={loading}
-              showStrength
-              aria-invalid={!!fieldErrors.password}
-            />
-          </FormField>
-          <FormField
-            label="Confirm password"
-            htmlFor="reset-confirm"
-            error={fieldErrors.confirm}
-            required
-          >
-            <PasswordInput
-              id="reset-confirm"
-              placeholder="••••••••"
-              autoComplete="new-password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              disabled={loading}
-              aria-invalid={!!fieldErrors.confirm}
-            />
-          </FormField>
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? (
-              <span className="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-            ) : (
-              "Reset password"
-            )}
-          </Button>
-        </AuthForm>
-      </AuthCard>
-    </div>
-  );
-}
-
-export function ResetPasswordPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-screen items-center justify-center">
-          <span className="inline-block size-8 animate-spin rounded-full border-2 border-current border-t-transparent" />
-        </div>
-      }
-    >
-      <ResetPasswordForm />
-    </Suspense>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { useAuth } from "../../hooks/use-auth";
+import { useSearchParams } from "next/navigation";
+import { AuthCard } from "../../components/auth-card";
+import { AuthForm } from "../../components/auth-form";
+import { FormField } from "../../components/form-field";
+import { PasswordInput } from "../../components/password-input";
+import { Button } from "../../components/ui/button";
+import { useState, Suspense } from "react";
+
+const genericError = "Something went wrong. Please request a new reset link.";
+
+function ResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") ?? "";
+  const { resetPassword, loading, error, clearError } = useAuth();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [fieldErrors, setFieldErrors] = useState<{ password?: string; confirm?: string }>({});
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    clearError();
+    setFieldErrors({});
+    const err: { password?: string; confirm?: string } = {};
+    if (!token) err.password = "Invalid or missing reset link.";
+    if (!password) err.password = "Password is required.";
+    if (password.length < 8) err.password = "Password must be at least 8 characters.";
+    if (password !== confirmPassword) err.confirm = "Passwords do not match.";
+    if (Object.keys(err).length) {
+      setFieldErrors(err);
+      return;
+    }
+    const result = await resetPassword(token, password);
+    if (!result.success) setFieldErrors({ password: genericError });
+  };
+
+  if (!token) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center p-4">
+        <AuthCard
+          title="Reset password"
+          subtitle="Invalid or expired link"
+          footer={
+            <Link
+              href="/forgot-password"
+              className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
+            >
+              Request a new reset link
+            </Link>
+          }
+        >
+          <p className="text-sm text-muted-foreground">
+            This reset link is invalid or has expired. Please request a new one.
+          </p>
+        </AuthCard>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <AuthCard
+        title="Reset password"
+        subtitle="Enter your new password"
+        footer={
+          <div className="flex w-full justify-center text-sm text-muted-foreground">
+            <Link
+              href="/login"
+              className="underline underline-offset-4 hover:text-foreground"
+            >
+              Back to sign in
+            </Link>
+          </div>
+        }
+      >
+        <AuthForm onSubmit={handleSubmit} loading={loading} error={error ? genericError : undefined}>
+          <FormField label="New password" htmlFor="reset-password" error={fieldErrors.password} required>
+            <PasswordInput
+              id="reset-password"
+              placeholder="••••••••"
+              autoComplete="new-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={loading}
+              showStrength
+              aria-invalid={!!fieldErrors.password}
+            />
+          </FormField>
+          <FormField
+            label="Confirm password"
+            htmlFor="reset-confirm"
+            error={fieldErrors.confirm}
+            required
+          >
+            <PasswordInput
+              id="reset-confirm"
+              placeholder="••••••••"
+              autoComplete="new-password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={loading}
+              aria-invalid={!!fieldErrors.confirm}
+            />
+          </FormField>
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? (
+              <span className="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+            ) : (
+              "Reset password"
+            )}
+          </Button>
+        </AuthForm>
+      </AuthCard>
+    </div>
+  );
+}
+
+export function ResetPasswordPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center">
+          <span className="inline-block size-8 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        </div>
+      }
+    >
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}

package/auth-ui/pages/verify-email/index.tsx

@@ -1,143 +1,143 @@
-"use client";
-
-import Link from "next/link";
-import { useAuth } from "../../hooks/use-auth";
-import { useSearchParams } from "next/navigation";
-import { AuthCard } from "../../components/auth-card";
-import { SuccessMessage } from "../../components/success-message";
-import { ErrorMessage } from "../../components/error-message";
-import { Button } from "../../components/ui/button";
-import { useEffect, useState, Suspense } from "react";
-
-type VerifyState = "idle" | "loading" | "success" | "expired" | "invalid";
-
-function VerifyEmailContent() {
-  const searchParams = useSearchParams();
-  const token = searchParams.get("token") ?? "";
-  const { verifyEmail, loading } = useAuth();
-  const [state, setState] = useState<VerifyState>("idle");
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    if (!token || checked) return;
-    setChecked(true);
-    setState("loading");
-    verifyEmail(token).then((result) => {
-      if (result.success) setState("success");
-      else if (result.error.code === "EXPIRED" || result.error.code === "TOKEN_EXPIRED")
-        setState("expired");
-      else setState("invalid");
-    });
-  }, [token, checked, verifyEmail]);
-
-  if (!token) {
-    return (
-      <div className="flex min-h-screen flex-col items-center justify-center p-4">
-        <AuthCard
-          title="Verify email"
-          subtitle="Invalid verification link"
-          footer={
-            <Link
-              href="/login"
-              className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
-            >
-              Go to sign in
-            </Link>
-          }
-        >
-          <ErrorMessage>This verification link is invalid.</ErrorMessage>
-        </AuthCard>
-      </div>
-    );
-  }
-
-  if (state === "loading" || (state === "idle" && loading)) {
-    return (
-      <div className="flex min-h-screen flex-col items-center justify-center p-4">
-        <AuthCard title="Verify email" subtitle="Verifying your email...">
-          <div className="flex justify-center py-4">
-            <span
-              role="status"
-              aria-label="Verifying"
-              className="inline-block size-8 animate-spin rounded-full border-2 border-current border-t-transparent"
-            />
-          </div>
-        </AuthCard>
-      </div>
-    );
-  }
-
-  if (state === "success") {
-    return (
-      <div className="flex min-h-screen flex-col items-center justify-center p-4">
-        <AuthCard
-          title="Email verified"
-          subtitle="Your account is ready"
-          footer={
-            <Button asChild className="w-full">
-              <Link href="/login">Sign in</Link>
-            </Button>
-          }
-        >
-          <SuccessMessage>Your email has been verified. You can now sign in.</SuccessMessage>
-        </AuthCard>
-      </div>
-    );
-  }
-
-  if (state === "expired") {
-    return (
-      <div className="flex min-h-screen flex-col items-center justify-center p-4">
-        <AuthCard
-          title="Link expired"
-          subtitle="This verification link has expired"
-          footer={
-            <Link
-              href="/login"
-              className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
-            >
-              Go to sign in
-            </Link>
-          }
-        >
-          <ErrorMessage>
-            This verification link has expired. Please sign in to request a new one.
-          </ErrorMessage>
-        </AuthCard>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center p-4">
-      <AuthCard
-        title="Verification failed"
-        subtitle="We couldn't verify your email"
-        footer={
-          <Link
-            href="/login"
-            className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
-          >
-            Go to sign in
-          </Link>
-        }
-      >
-        <ErrorMessage>This verification link is invalid or has already been used.</ErrorMessage>
-      </AuthCard>
-    </div>
-  );
-}
-
-export function VerifyEmailPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-screen items-center justify-center">
-          <span className="inline-block size-8 animate-spin rounded-full border-2 border-current border-t-transparent" />
-        </div>
-      }
-    >
-      <VerifyEmailContent />
-    </Suspense>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { useAuth } from "../../hooks/use-auth";
+import { useSearchParams } from "next/navigation";
+import { AuthCard } from "../../components/auth-card";
+import { SuccessMessage } from "../../components/success-message";
+import { ErrorMessage } from "../../components/error-message";
+import { Button } from "../../components/ui/button";
+import { useEffect, useState, Suspense } from "react";
+
+type VerifyState = "idle" | "loading" | "success" | "expired" | "invalid";
+
+function VerifyEmailContent() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") ?? "";
+  const { verifyEmail, loading } = useAuth();
+  const [state, setState] = useState<VerifyState>("idle");
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    if (!token || checked) return;
+    setChecked(true);
+    setState("loading");
+    verifyEmail(token).then((result) => {
+      if (result.success) setState("success");
+      else if (result.error.code === "EXPIRED" || result.error.code === "TOKEN_EXPIRED")
+        setState("expired");
+      else setState("invalid");
+    });
+  }, [token, checked, verifyEmail]);
+
+  if (!token) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center p-4">
+        <AuthCard
+          title="Verify email"
+          subtitle="Invalid verification link"
+          footer={
+            <Link
+              href="/login"
+              className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
+            >
+              Go to sign in
+            </Link>
+          }
+        >
+          <ErrorMessage>This verification link is invalid.</ErrorMessage>
+        </AuthCard>
+      </div>
+    );
+  }
+
+  if (state === "loading" || (state === "idle" && loading)) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center p-4">
+        <AuthCard title="Verify email" subtitle="Verifying your email...">
+          <div className="flex justify-center py-4">
+            <span
+              role="status"
+              aria-label="Verifying"
+              className="inline-block size-8 animate-spin rounded-full border-2 border-current border-t-transparent"
+            />
+          </div>
+        </AuthCard>
+      </div>
+    );
+  }
+
+  if (state === "success") {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center p-4">
+        <AuthCard
+          title="Email verified"
+          subtitle="Your account is ready"
+          footer={
+            <Button asChild className="w-full">
+              <Link href="/login">Sign in</Link>
+            </Button>
+          }
+        >
+          <SuccessMessage>Your email has been verified. You can now sign in.</SuccessMessage>
+        </AuthCard>
+      </div>
+    );
+  }
+
+  if (state === "expired") {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center p-4">
+        <AuthCard
+          title="Link expired"
+          subtitle="This verification link has expired"
+          footer={
+            <Link
+              href="/login"
+              className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
+            >
+              Go to sign in
+            </Link>
+          }
+        >
+          <ErrorMessage>
+            This verification link has expired. Please sign in to request a new one.
+          </ErrorMessage>
+        </AuthCard>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <AuthCard
+        title="Verification failed"
+        subtitle="We couldn't verify your email"
+        footer={
+          <Link
+            href="/login"
+            className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
+          >
+            Go to sign in
+          </Link>
+        }
+      >
+        <ErrorMessage>This verification link is invalid or has already been used.</ErrorMessage>
+      </AuthCard>
+    </div>
+  );
+}
+
+export function VerifyEmailPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center">
+          <span className="inline-block size-8 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        </div>
+      }
+    >
+      <VerifyEmailContent />
+    </Suspense>
+  );
+}

package/auth-ui/templates/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,5 @@
+import { ForgotPasswordPage } from "@liedsonc/core-auth-kit";
+
+export default function ForgotPassword() {
+  return <ForgotPasswordPage />;
+}

package/auth-ui/templates/app/(auth)/layout.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { AuthUIProvider } from "@liedsonc/core-auth-kit";
+import { getAuthUIConfig } from "@/lib/auth-config";
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthUIProvider config={getAuthUIConfig()}>
+      {children}
+    </AuthUIProvider>
+  );
+}

package/auth-ui/templates/app/(auth)/login/page.tsx

@@ -0,0 +1,5 @@
+import { LoginPage } from "@liedsonc/core-auth-kit";
+
+export default function Login() {
+  return <LoginPage />;
+}

package/auth-ui/templates/app/(auth)/register/page.tsx

@@ -0,0 +1,5 @@
+import { RegisterPage } from "@liedsonc/core-auth-kit";
+
+export default function Register() {
+  return <RegisterPage />;
+}

package/auth-ui/templates/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,5 @@
+import { ResetPasswordPage } from "@liedsonc/core-auth-kit";
+
+export default function ResetPassword() {
+  return <ResetPasswordPage />;
+}

package/auth-ui/templates/app/(auth)/verify-email/page.tsx

@@ -0,0 +1,5 @@
+import { VerifyEmailPage } from "@liedsonc/core-auth-kit";
+
+export default function VerifyEmail() {
+  return <VerifyEmailPage />;
+}

package/auth-ui/templates/app/api/auth/forgot-password/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  const body = await request.json().catch(() => ({}));
+  const { email } = body as { email?: string };
+  if (!email) {
+    return NextResponse.json(
+      { error: "Missing email" },
+      { status: 400 }
+    );
+  }
+  return NextResponse.json(
+    { error: "Implement this route: create reset token, store it, and send reset email (e.g. via Resend)." },
+    { status: 501 }
+  );
+}

package/auth-ui/templates/app/api/auth/login/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  const body = await request.json().catch(() => ({}));
+  const { email, password } = body as { email?: string; password?: string };
+  if (!email || !password) {
+    return NextResponse.json(
+      { error: "Missing email or password" },
+      { status: 400 }
+    );
+  }
+  return NextResponse.json(
+    { error: "Implement this route: call your auth backend (e.g. Supabase, custom API) and set session." },
+    { status: 501 }
+  );
+}

package/auth-ui/templates/app/api/auth/logout/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  return NextResponse.json(
+    { error: "Implement this route: clear the session (e.g. delete cookie or revoke token)." },
+    { status: 501 }
+  );
+}

package/auth-ui/templates/app/api/auth/register/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  const body = await request.json().catch(() => ({}));
+  const { email, password } = body as { email?: string; password?: string };
+  if (!email || !password) {
+    return NextResponse.json(
+      { error: "Missing email or password" },
+      { status: 400 }
+    );
+  }
+  return NextResponse.json(
+    { error: "Implement this route: call your auth backend to create the user and optionally send verification email." },
+    { status: 501 }
+  );
+}