@liedsonc/core-auth-kit 2.1.3 → 2.1.6

package/context.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import * as React from "react";
-import type { AuthUIConfig } from "./types";
-
-const AuthUIConfigContext = React.createContext<AuthUIConfig | null>(null);
-
-export function AuthUIProvider({
-  config,
-  children,
-}: {
-  config: AuthUIConfig;
-  children: React.ReactNode;
-}) {
-  return (
-    <AuthUIConfigContext.Provider value={config}>
-      {children}
-    </AuthUIConfigContext.Provider>
-  );
-}
-
-export function useAuthUIConfig(): AuthUIConfig {
-  const ctx = React.useContext(AuthUIConfigContext);
-  if (!ctx) throw new Error("useAuthUIConfig must be used within AuthUIProvider");
-  return ctx;
-}

package/hooks/use-auth.ts

@@ -1,131 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { useAuthUIConfig } from "../context";
-import type { AuthError, AuthSession } from "../types";
-
-type AuthResult = { success: true } | { success: false; error: AuthError };
-
-export function useAuth() {
-  const { authClient, redirectAfterLogin, redirectAfterRegister, redirectAfterReset } =
-    useAuthUIConfig();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<AuthError | null>(null);
-  const [session, setSession] = useState<AuthSession | null>(null);
-
-  const login = useCallback(
-    async (email: string, password: string): Promise<AuthResult> => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await authClient.login(email, password);
-        if (result.success) {
-          if (redirectAfterLogin && typeof window !== "undefined") {
-            window.location.href = redirectAfterLogin;
-          }
-          return result;
-        }
-        setError(result.error);
-        return result;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [authClient, redirectAfterLogin]
-  );
-
-  const register = useCallback(
-    async (email: string, password: string): Promise<AuthResult> => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await authClient.register(email, password);
-        if (result.success && redirectAfterRegister && typeof window !== "undefined") {
-          window.location.href = redirectAfterRegister;
-        }
-        if (!result.success) setError(result.error);
-        return result;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [authClient, redirectAfterRegister]
-  );
-
-  const logout = useCallback(async () => {
-    setLoading(true);
-    try {
-      await authClient.logout();
-      setSession(null);
-    } finally {
-      setLoading(false);
-    }
-  }, [authClient]);
-
-  const forgotPassword = useCallback(
-    async (email: string): Promise<AuthResult> => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await authClient.forgotPassword(email);
-        if (!result.success) setError(result.error);
-        return result;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [authClient]
-  );
-
-  const resetPassword = useCallback(
-    async (token: string, newPassword: string): Promise<AuthResult> => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await authClient.resetPassword(token, newPassword);
-        if (result.success && redirectAfterReset && typeof window !== "undefined") {
-          window.location.href = redirectAfterReset;
-        }
-        if (!result.success) setError(result.error);
-        return result;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [authClient, redirectAfterReset]
-  );
-
-  const verifyEmail = useCallback(
-    async (token: string): Promise<AuthResult> => {
-      setLoading(true);
-      setError(null);
-      try {
-        return await authClient.verifyEmail(token);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [authClient]
-  );
-
-  const loadSession = useCallback(async () => {
-    if (!authClient.getSession) return null;
-    const s = await authClient.getSession();
-    setSession(s);
-    return s;
-  }, [authClient]);
-
-  return {
-    login,
-    register,
-    logout,
-    forgotPassword,
-    resetPassword,
-    verifyEmail,
-    session,
-    loadSession,
-    loading,
-    error,
-    clearError: () => setError(null),
-  };
-}

package/hooks/use-oauth.ts

@@ -1,25 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import type { OAuthProvider } from "../types";
-
-export function useOAuth(onRedirect: (provider: OAuthProvider) => string | Promise<string>) {
-  const [loadingProvider, setLoadingProvider] = useState<OAuthProvider | null>(null);
-
-  const signIn = useCallback(
-    async (provider: OAuthProvider) => {
-      setLoadingProvider(provider);
-      try {
-        const url = await onRedirect(provider);
-        if (typeof window !== "undefined" && url) {
-          window.location.href = url;
-        }
-      } finally {
-        setLoadingProvider(null);
-      }
-    },
-    [onRedirect]
-  );
-
-  return { signIn, loadingProvider };
-}

package/index.ts

@@ -1,28 +0,0 @@
-export { AuthUIProvider, useAuthUIConfig } from "./context";
-export {
-  AuthCard,
-  AuthForm,
-  ErrorMessage,
-  FormField,
-  LoadingSpinner,
-  OAuthButtons,
-  PasswordInput,
-  SuccessMessage,
-} from "./components";
-export { useAuth } from "./hooks/use-auth";
-export { useOAuth } from "./hooks/use-oauth";
-export {
-  LoginPage,
-  RegisterPage,
-  ForgotPasswordPage,
-  ResetPasswordPage,
-  VerifyEmailPage,
-} from "./pages";
-export type {
-  AuthClient,
-  AuthError,
-  AuthFormState,
-  AuthSession,
-  AuthUIConfig,
-  OAuthProvider,
-} from "./types";

package/pages/forgot-password/index.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useAuth } from "../../hooks/use-auth";
-import { AuthCard } from "../../components/auth-card";
-import { AuthForm } from "../../components/auth-form";
-import { FormField } from "../../components/form-field";
-import { SuccessMessage } from "../../components/success-message";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import { useState } from "react";
-
-const successMessage =
-  "If an account exists for this email, you will receive a link to reset your password.";
-
-export function ForgotPasswordPage() {
-  const { forgotPassword, loading, error, clearError } = useAuth();
-  const [email, setEmail] = useState("");
-  const [submitted, setSubmitted] = useState(false);
-  const [fieldError, setFieldError] = useState<string | undefined>();
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    clearError();
-    setFieldError(undefined);
-    if (!email.trim()) {
-      setFieldError("Email is required.");
-      return;
-    }
-    await forgotPassword(email.trim());
-    setSubmitted(true);
-  };
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center p-4">
-      <AuthCard
-        title="Forgot password"
-        subtitle="Enter your email and we'll send you a reset link"
-        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>
-        }
-      >
-        {submitted ? (
-          <SuccessMessage>{successMessage}</SuccessMessage>
-        ) : (
-          <AuthForm onSubmit={handleSubmit} loading={loading}>
-            {error && (
-              <p role="alert" className="text-sm text-destructive">
-                Something went wrong. Please try again later.
-              </p>
-            )}
-            <FormField label="Email" htmlFor="forgot-email" error={fieldError} required>
-              <Input
-                id="forgot-email"
-                type="email"
-                autoComplete="email"
-                placeholder="you@example.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                disabled={loading}
-                aria-invalid={!!fieldError}
-              />
-            </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" />
-              ) : (
-                "Send reset link"
-              )}
-            </Button>
-          </AuthForm>
-        )}
-      </AuthCard>
-    </div>
-  );
-}

package/pages/login/index.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useAuth } from "../../hooks/use-auth";
-import { useOAuth } from "../../hooks/use-oauth";
-import { useAuthUIConfig } from "../../context";
-import { AuthCard } from "../../components/auth-card";
-import { AuthForm } from "../../components/auth-form";
-import { FormField } from "../../components/form-field";
-import { OAuthButtons } from "../../components/oauth-buttons";
-import { PasswordInput } from "../../components/password-input";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import { useCallback, useState } from "react";
-
-const genericError = "Invalid email or password. Please try again.";
-
-export function LoginPage() {
-  const config = useAuthUIConfig();
-  const { login, loading, error, clearError } = useAuth();
-  const oauthProviders = config.oauthProviders ?? [];
-  const { signIn, loadingProvider } = useOAuth(
-    useCallback(
-      (provider) => {
-        const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
-        return Promise.resolve(`${baseUrl}/api/auth/${provider}`);
-      },
-      []
-    )
-  );
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    clearError();
-    setFieldErrors({});
-    const err: { email?: string; password?: string } = {};
-    if (!email.trim()) err.email = "Email is required.";
-    if (!password) err.password = "Password is required.";
-    if (Object.keys(err).length) {
-      setFieldErrors(err);
-      return;
-    }
-    const result = await login(email.trim(), password);
-    if (!result.success) setFieldErrors({ password: genericError });
-  };
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center p-4">
-      <AuthCard
-        title="Sign in"
-        subtitle="Enter your credentials to continue"
-        footer={
-          <div className="flex w-full flex-col items-center gap-2 text-center text-sm text-muted-foreground">
-            <Link
-              href="/register"
-              className="underline underline-offset-4 hover:text-foreground"
-            >
-              Create an account
-            </Link>
-            <Link
-              href="/forgot-password"
-              className="underline underline-offset-4 hover:text-foreground"
-            >
-              Forgot password?
-            </Link>
-          </div>
-        }
-      >
-        <AuthForm onSubmit={handleSubmit} loading={loading} error={error ? genericError : undefined}>
-          <OAuthButtons
-            providers={oauthProviders}
-            loadingProvider={loadingProvider}
-            onSignIn={signIn}
-          />
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <span className="w-full border-t border-border" />
-            </div>
-            <div className="relative flex justify-center text-xs uppercase">
-              <span className="bg-card px-2 text-muted-foreground">Or continue with email</span>
-            </div>
-          </div>
-          <FormField label="Email" htmlFor="login-email" error={fieldErrors.email} required>
-            <Input
-              id="login-email"
-              type="email"
-              autoComplete="email"
-              placeholder="you@example.com"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              disabled={loading}
-              aria-invalid={!!fieldErrors.email}
-            />
-          </FormField>
-          <FormField label="Password" htmlFor="login-password" error={fieldErrors.password} required>
-            <PasswordInput
-              id="login-password"
-              placeholder="••••••••"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              disabled={loading}
-              aria-invalid={!!fieldErrors.password}
-            />
-          </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" />
-            ) : (
-              "Sign in"
-            )}
-          </Button>
-        </AuthForm>
-      </AuthCard>
-    </div>
-  );
-}

package/pages/register/index.tsx

@@ -1,149 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useAuth } from "../../hooks/use-auth";
-import { useOAuth } from "../../hooks/use-oauth";
-import { useAuthUIConfig } from "../../context";
-import { AuthCard } from "../../components/auth-card";
-import { AuthForm } from "../../components/auth-form";
-import { FormField } from "../../components/form-field";
-import { OAuthButtons } from "../../components/oauth-buttons";
-import { PasswordInput } from "../../components/password-input";
-import { SuccessMessage } from "../../components/success-message";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import { useCallback, useState } from "react";
-
-const genericError = "Something went wrong. Please try again.";
-const duplicateError = "An account with this email already exists.";
-
-export function RegisterPage() {
-  const config = useAuthUIConfig();
-  const { register, loading, error, clearError } = useAuth();
-  const oauthProviders = config.oauthProviders ?? [];
-  const { signIn, loadingProvider } = useOAuth(
-    useCallback((provider) => {
-      const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
-      return Promise.resolve(`${baseUrl}/api/auth/${provider}`);
-    }, [])
-  );
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [fieldErrors, setFieldErrors] = useState<{
-    email?: string;
-    password?: string;
-    confirm?: string;
-  }>({});
-  const [showVerificationMessage, setShowVerificationMessage] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    clearError();
-    setFieldErrors({});
-    setShowVerificationMessage(false);
-    const err: { email?: string; password?: string; confirm?: string } = {};
-    if (!email.trim()) err.email = "Email is required.";
-    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 register(email.trim(), password);
-    if (result.success) {
-      setShowVerificationMessage(true);
-    } else {
-      const isDuplicate = result.error.code === "DUPLICATE_EMAIL" || result.error.code === "EMAIL_TAKEN";
-      setFieldErrors({ email: isDuplicate ? duplicateError : genericError });
-    }
-  };
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center p-4">
-      <AuthCard
-        title="Create an account"
-        subtitle="Enter your details to get started"
-        footer={
-          <div className="flex w-full justify-center text-sm text-muted-foreground">
-            <Link
-              href="/login"
-              className="underline underline-offset-4 hover:text-foreground"
-            >
-              Already have an account? Sign in
-            </Link>
-          </div>
-        }
-      >
-        {showVerificationMessage ? (
-          <SuccessMessage>
-            Check your email to verify your account. You can sign in after verification.
-          </SuccessMessage>
-        ) : (
-          <AuthForm onSubmit={handleSubmit} loading={loading} error={error ? genericError : undefined}>
-            <OAuthButtons
-              providers={oauthProviders}
-              loadingProvider={loadingProvider}
-              onSignIn={signIn}
-            />
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <span className="w-full border-t border-border" />
-              </div>
-              <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-card px-2 text-muted-foreground">Or continue with email</span>
-              </div>
-            </div>
-            <FormField label="Email" htmlFor="register-email" error={fieldErrors.email} required>
-              <Input
-                id="register-email"
-                type="email"
-                autoComplete="email"
-                placeholder="you@example.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                disabled={loading}
-                aria-invalid={!!fieldErrors.email}
-              />
-            </FormField>
-            <FormField label="Password" htmlFor="register-password" error={fieldErrors.password} required>
-              <PasswordInput
-                id="register-password"
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                disabled={loading}
-                showStrength
-                aria-invalid={!!fieldErrors.password}
-              />
-            </FormField>
-            <FormField
-              label="Confirm password"
-              htmlFor="register-confirm"
-              error={fieldErrors.confirm}
-              required
-            >
-              <PasswordInput
-                id="register-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" />
-              ) : (
-                "Create account"
-              )}
-            </Button>
-          </AuthForm>
-        )}
-      </AuthCard>
-    </div>
-  );
-}