aspireauth
v1.0.4
Published
A reusable Next.js authentication client library featuring ready-to-use login, signup, and reset forms, a React AuthProvider context, and a secure Axios client with automatic token refresh interceptors.
Downloads
763
Readme
AspireAuth
aspireauth is a reusable Next.js authentication client library featuring ready-to-use forms, a React context provider, and a secure Axios client with automatic session restoration and token refresh interceptors.
Features
- Ready-to-use Form Components:
LoginForm,SignUpForm,ForgotPasswordForm,ResetPasswordForm,VerifyEmailForm - React Context Provider:
AuthProvideranduseAuthhook for managing user sessions and authentication states. - Secure Axios Client: Automatic interceptors to handle token expiration and refresh token exchanges seamlessly.
- Styled UI components included: Native Tailwind CSS integration.
Installation
Install aspireauth along with its peer dependencies:
npm install aspireauth radix-ui class-variance-authority lucide-react tailwind-merge clsx react-hook-form @hookform/resolvers zod axios input-otpQuick Start
1. Configure the Provider
Wrap your root layout with AuthProvider:
import { AuthProvider } from "aspireauth";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<AuthProvider>{children}</AuthProvider>
</body>
</html>
);
}2. Add Login Form
Import and render the built-in form component:
import { LoginForm } from "aspireauth";
export default function LoginPage() {
return (
<div className="flex min-h-screen items-center justify-center">
<LoginForm className="w-full max-w-md" />
</div>
);
}3. Consume Authentication Context
Use the useAuth hook in any client component to access user profile and token status:
"use client";
import { useAuth } from "aspireauth";
export default function Dashboard() {
const { user, isAuthenticated, logout } = useAuth();
if (!isAuthenticated) return <p>Access Denied</p>;
return (
<div>
<p>Welcome, {user.username}!</p>
<button onClick={logout}>Logout</button>
</div>
);
}4. Customizing Toast Notifications
All form components (LoginForm, SignUpForm, ForgotPasswordForm, ResetPasswordForm, VerifyEmailForm) support an optional toast callback prop. You can pass a custom toast library function (e.g., from sonner or react-hot-toast):
import { LoginForm } from "aspireauth";
import { toast } from "sonner";
export default function LoginPage() {
return (
<LoginForm
toast={(message, type) => {
if (type === "success") {
toast.success(message);
} else {
toast.error(message);
}
}}
/>
);
}Styling & Tailwind CSS Setup
To ensure the built-in components render with your app's styles and custom colors, add the package's components directory to your tailwind.config.js or tailwind.config.ts:
// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
// Add aspireauth components path
"./node_modules/aspireauth/dist/**/*.{js,mjs,ts,tsx}",
],
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
},
},
},
plugins: [],
};
export default config;