npm - @thetechfossil/auth2 - Versions diffs - 1.2.2 → 1.2.4 - Mend

@thetechfossil/auth2 1.2.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/dist/index.components.d.ts +14 -1
package/dist/index.components.js +1288 -642
package/dist/index.components.js.map +1 -1
package/dist/index.components.mjs +1190 -547
package/dist/index.components.mjs.map +1 -1
package/dist/index.d.ts +51 -7
package/dist/index.js +1368 -672
package/dist/index.js.map +1 -1
package/dist/index.mjs +1241 -547
package/dist/index.mjs.map +1 -1
package/dist/index.next.d.ts +44 -65
package/dist/index.next.js +1402 -988
package/dist/index.next.js.map +1 -1
package/dist/index.next.mjs +1254 -836
package/dist/index.next.mjs.map +1 -1
package/dist/index.next.server.d.ts +57 -8
package/dist/index.next.server.js +163 -14
package/dist/index.next.server.js.map +1 -1
package/dist/index.next.server.mjs +156 -15
package/dist/index.next.server.mjs.map +1 -1
package/dist/index.node.d.ts +19 -7
package/dist/index.node.js +18 -12
package/dist/index.node.js.map +1 -1
package/dist/index.node.mjs +18 -12
package/dist/index.node.mjs.map +1 -1
package/next/index.js +2 -0
package/next/index.mjs +2 -0
package/next/package.json +5 -0
package/next/server/package.json +5 -0
package/next/server.js +2 -0
package/next/server.mjs +2 -0
package/package.json +21 -18
package/README.NEW.md +0 -365

package/README.NEW.md DELETED Viewed

@@ -1,365 +0,0 @@
-# Auth SDK - Complete Authentication Solution
-A production-ready authentication SDK with a Clerk.js-like developer experience. Works with React, Next.js (App Router & Pages Router), and Node.js.
-## ✨ Features
-- 🎨 **Pre-built UI Components** - Drop-in auth components (SignIn, SignUp, UserButton, etc.)
-- 🔐 **Automatic Auth Handling** - No need to write auth logic, API calls, or state management
-- 🚀 **Zero Config** - Configure via environment variables, no code changes needed
-- 🎯 **Type-Safe** - Full TypeScript support with comprehensive type definitions
-- 🔄 **Auto Redirects** - Automatic redirects after login, logout, registration, etc.
-- 🛡️ **Route Protection** - Built-in components for protecting routes
-- 🌐 **Universal** - Works with React, Next.js (client & server), and Node.js
-- 📱 **Responsive** - Mobile-first design for all components
-- ♿ **Accessible** - WCAG 2.1 AA compliant components
-- 🎨 **Customizable** - Style components to match your brand
-## 📦 Installation
-```bash
-npm install @thetechfossil/auth2
-# or
-pnpm add @thetechfossil/auth2
-# or
-yarn add @thetechfossil/auth2
-```
-## 🚀 Quick Start
-### 1. Configure Environment
-Create `.env.local` (Next.js) or `.env` (React):
-```env
-# Required
-NEXT_PUBLIC_AUTH_API_URL=http://localhost:7000
-NEXT_PUBLIC_FRONTEND_BASE_URL=http://localhost:3000
-# Optional - Customize redirects
-NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN=/dashboard
-NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT=/auth/login
-```
-### 2. Add AuthProvider
-#### Next.js App Router
-```tsx
-// app/layout.tsx
-import { AuthProvider } from '@thetechfossil/auth2';
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        <AuthProvider>{children}</AuthProvider>
-      </body>
-    </html>
-  );
-}
-```
-#### React
-```tsx
-// src/App.tsx
-import { AuthProvider } from '@thetechfossil/auth2';
-function App() {
-  return (
-    <AuthProvider>
-      {/* Your app */}
-    </AuthProvider>
-  );
-}
-```
-### 3. Use Components
-```tsx
-// Login page
-import { SignIn } from '@thetechfossil/auth2';
-export default function LoginPage() {
-  return <SignIn />;
-}
-// Protected dashboard
-import { ProtectedRoute, UserButton } from '@thetechfossil/auth2';
-export default function Dashboard() {
-  return (
-    <ProtectedRoute>
-      <UserButton showName />
-      <h1>Dashboard</h1>
-    </ProtectedRoute>
-  );
-}
-```
-**That's it!** Your authentication is fully functional.
-## 📚 Documentation
-- **[Quick Start Guide](./QUICKSTART.md)** - Get started in 3 steps
-- **[Complete Documentation](./README-CLERK-LIKE.md)** - Full API reference and examples
-- **[Migration Guide](./MIGRATION-GUIDE.md)** - Migrate from old API to new API
-- **[Implementation Summary](./IMPLEMENTATION-SUMMARY.md)** - Architecture and design decisions
-## 🎯 Components
-### Client Components
-| Component | Description |
-|-----------|-------------|
-| `<SignIn />` | Pre-built login form with email/password and OTP |
-| `<SignUp />` | Pre-built registration form with validation |
-| `<SignOut />` | Sign out component (auto-redirects) |
-| `<UserButton />` | User avatar dropdown with profile and sign-out |
-| `<ProtectedRoute>` | Wrap protected content (auto-redirects if not authenticated) |
-| `<PublicRoute>` | Wrap public pages (auto-redirects if authenticated) |
-| `<VerifyEmail />` | Email verification handler |
-| `<ForgotPassword />` | Password reset request form |
-| `<ResetPassword />` | Password reset form |
-### Hooks
-```tsx
-import { useAuth } from '@thetechfossil/auth2';
-const {
-  user,           // Current user object
-  isSignedIn,     // Boolean: is user authenticated?
-  isLoaded,       // Boolean: is auth state loaded?
-  loading,        // Boolean: is an auth operation in progress?
-  signIn,         // Function: sign in user
-  signUp,         // Function: register new user
-  signOut,        // Function: sign out user
-  verify,         // Function: verify OTP
-  updateProfile,  // Function: update user profile
-  forgotPassword, // Function: request password reset
-  resetPassword,  // Function: reset password
-} = useAuth();
-```
-### Server-Side (Next.js)
-```tsx
-// Server Components
-import { currentUser, auth, requireAuth } from '@thetechfossil/auth2/next/server';
-// Get current user (returns null if not authenticated)
-const user = await currentUser();
-// Get auth state
-const { user, isAuthenticated } = await auth();
-// Require authentication (auto-redirects if not authenticated)
-const user = await requireAuth();
-```
-### Middleware (Next.js)
-```ts
-// middleware.ts
-import { authMiddleware } from '@thetechfossil/auth2/next/server';
-export default authMiddleware({
-  publicRoutes: ['/auth/*', '/'],
-  protectedRoutes: ['/dashboard/*'],
-});
-export const config = {
-  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
-};
-```
-## 🎨 Customization
-### Custom Styling
-```tsx
-<SignIn
-  appearance={{
-    elements: {
-      card: { backgroundColor: '#f5f5f5' },
-      formButtonPrimary: { backgroundColor: '#10b981' },
-      headerTitle: { color: '#1f2937' },
-    },
-  }}
-/>
-```
-### Custom Redirects
-```tsx
-<SignIn redirectUrl="/custom-dashboard" />
-<ProtectedRoute redirectTo="/custom-login">
-  <Content />
-</ProtectedRoute>
-```
-## 🌍 Environment Variables
-| Variable | Description | Default |
-|----------|-------------|---------|
-| `NEXT_PUBLIC_AUTH_API_URL` | Auth backend URL | `http://localhost:7000` |
-| `NEXT_PUBLIC_FRONTEND_BASE_URL` | Frontend base URL | `window.location.origin` |
-| `NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN` | Redirect after login | `/dashboard` |
-| `NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT` | Redirect after logout | `/` |
-| `NEXT_PUBLIC_AUTH_REDIRECT_AFTER_REGISTER` | Redirect after registration | `/dashboard` |
-| `NEXT_PUBLIC_AUTH_REDIRECT_AFTER_VERIFY` | Redirect after email verification | `/dashboard` |
-| `NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN` | Login page path | `/auth/login` |
-For React (non-Next.js), use `REACT_APP_` prefix instead of `NEXT_PUBLIC_`.
-## 📖 Examples
-### Complete Next.js App
-See [`example/clerk-like-nextjs-example.tsx`](./example/clerk-like-nextjs-example.tsx) for a complete Next.js implementation with:
-- All auth pages (login, register, verify, forgot password, reset password)
-- Protected dashboard with UserButton
-- Server Components examples
-- API route examples
-- Middleware configuration
-### Complete React App
-See [`example/clerk-like-react-example.tsx`](./example/clerk-like-react-example.tsx) for a complete React implementation with:
-- React Router setup
-- All auth pages
-- Protected routes
-- Custom components with useAuth
-## 🔄 Migration from Old API
-If you're using the old API, see the [Migration Guide](./MIGRATION-GUIDE.md).
-**Good news:** The old API still works! No breaking changes.
-```tsx
-// Old API (still works)
-import { useAuthLegacy, LoginForm, RegisterForm } from '@thetechfossil/auth2';
-// New API (recommended)
-import { useAuth, SignIn, SignUp } from '@thetechfossil/auth2';
-```
-## 🏗️ Architecture
-```
-Frontend App
-    ↓
-<AuthProvider>              ← Manages global auth state
-    ↓
-Components & Hooks          ← Pre-built UI & useAuth()
-    ↓
-AuthService                 ← Core auth logic
-    ↓
-HttpClient                  ← API communication
-    ↓
-Auth Backend API            ← Your auth server
-```
-## 🎯 Use Cases
-### Simple Login Page
-```tsx
-import { SignIn } from '@thetechfossil/auth2';
-export default function LoginPage() {
-  return <SignIn />;
-}
-```
-### Protected Dashboard
-```tsx
-import { ProtectedRoute, UserButton, useAuth } from '@thetechfossil/auth2';
-export default function Dashboard() {
-  const { user } = useAuth();
-  return (
-    <ProtectedRoute>
-      <nav>
-        <h1>My App</h1>
-        <UserButton showName />
-      </nav>
-      <main>
-        <h2>Welcome, {user?.name}!</h2>
-      </main>
-    </ProtectedRoute>
-  );
-}
-```
-### Custom Auth Component
-```tsx
-import { useAuth } from '@thetechfossil/auth2';
-function CustomAuth() {
-  const { isSignedIn, user, signOut } = useAuth();
-  if (!isSignedIn) {
-    return <a href="/auth/login">Sign In</a>;
-  }
-  return (
-    <div>
-      <span>Hello, {user.name}</span>
-      <button onClick={signOut}>Sign Out</button>
-    </div>
-  );
-}
-```
-### Server Component (Next.js)
-```tsx
-import { currentUser } from '@thetechfossil/auth2/next/server';
-export default async function ProfilePage() {
-  const user = await currentUser();
-  if (!user) {
-    return <div>Please log in</div>;
-  }
-  return <div>Welcome, {user.name}!</div>;
-}
-```
-## 🤝 Contributing
-Contributions are welcome! Please read our contributing guidelines.
-## 📄 License
-MIT
-## 🆘 Support
-- 📖 [Documentation](./README-CLERK-LIKE.md)
-- 🚀 [Quick Start](./QUICKSTART.md)
-- 🔄 [Migration Guide](./MIGRATION-GUIDE.md)
-- 💡 [Examples](./example/)
-## 🎉 What Makes This Different?
-Unlike traditional auth libraries, this SDK:
-- ✅ **No boilerplate** - Just install and use
-- ✅ **No API calls to write** - All handled automatically
-- ✅ **No state management** - Built-in context provider
-- ✅ **No redirect logic** - Automatic based on env vars
-- ✅ **No form validation** - Built into components
-- ✅ **No token management** - Automatic storage and refresh
-Just focus on building your app, not authentication!
----
-Made with ❤️ for developers who want authentication to "just work"