@liedsonc/core-auth-kit 0.1.0

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +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>
+  );
+}

package/auth-ui/styles/index.css

@@ -0,0 +1,7 @@
+@layer auth-ui {
+  .auth-ui-card {
+    min-width: 0;
+    width: 100%;
+    max-width: 24rem;
+  }
+}

package/auth-ui/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/auth-ui/types/index.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+
+export type OAuthProvider = "google" | "apple";
+
+export interface AuthError {
+  code: string;
+  message: string;
+}
+
+export interface AuthSession {
+  user: { id: string; email?: string };
+  expiresAt?: number;
+}
+
+export interface AuthClient {
+  login: (email: string, password: string) => Promise<{ success: true } | { success: false; error: AuthError }>;
+  register: (email: string, password: string) => Promise<{ success: true } | { success: false; error: AuthError }>;
+  logout: () => Promise<void>;
+  forgotPassword: (email: string) => Promise<{ success: true } | { success: false; error: AuthError }>;
+  resetPassword: (token: string, newPassword: string) => Promise<{ success: true } | { success: false; error: AuthError }>;
+  verifyEmail: (token: string) => Promise<{ success: true } | { success: false; error: AuthError }>;
+  getSession?: () => Promise<AuthSession | null>;
+}
+
+export type AuthFormState = "idle" | "loading" | "success" | "error";
+
+export interface AuthUIConfig {
+  authClient: AuthClient;
+  oauthProviders?: { provider: OAuthProvider; enabled: boolean }[];
+  logo?: ReactNode;
+  redirectAfterLogin?: string;
+  redirectAfterRegister?: string;
+  redirectAfterReset?: string;
+}

package/auth-ui/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@liedsonc/core-auth-kit",
+  "version": "0.1.0",
+  "description": "Production-ready authentication UI package for Next.js App Router",
+  "scripts": {
+    "build": "cd auth-ui && npm run build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "nextjs",
+    "auth",
+    "authentication",
+    "ui",
+    "shadcn",
+    "react",
+    "typescript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "workspaces": [
+    "auth-ui"
+  ],
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.0"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/tailwind.config.ts

@@ -0,0 +1,41 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: "class",
+  content: [
+    "./auth-ui/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: "hsl(var(--card))",
+        "card-foreground": "hsl(var(--card-foreground))",
+        popover: "hsl(var(--popover))",
+        "popover-foreground": "hsl(var(--popover-foreground))",
+        primary: "hsl(var(--primary))",
+        "primary-foreground": "hsl(var(--primary-foreground))",
+        secondary: "hsl(var(--secondary))",
+        "secondary-foreground": "hsl(var(--secondary-foreground))",
+        muted: "hsl(var(--muted))",
+        "muted-foreground": "hsl(var(--muted-foreground))",
+        accent: "hsl(var(--accent))",
+        "accent-foreground": "hsl(var(--accent-foreground))",
+        destructive: "hsl(var(--destructive))",
+        "destructive-foreground": "hsl(var(--destructive-foreground))",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "incremental": true
+  },
+  "include": [
+    "auth-ui/**/*.ts",
+    "auth-ui/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}