@thetechfossil/auth2 1.2.1

package/README.md

@@ -0,0 +1,218 @@
+# Auth SDK
+
+A lightweight, easy-to-use authentication SDK for integrating with the Auth backend service. Works with both Node.js and React/Next.js applications.
+
+## Features
+
+- Dual authentication methods (email/password or email/OTP)
+- Automatic token management
+- React hooks for easy integration
+- Pre-built UI components for login, registration, OTP verification, and email verification
+- TypeScript support
+- Works with both Node.js and browser environments
+- Supports custom frontend base URLs for email verification links
+- **Embedded styling** - No separate CSS imports required!
+
+## Installation
+
+```bash
+npm install @auth/sdk
+# or
+yarn add @auth/sdk
+# or
+pnpm add @auth/sdk
+```
+
+## Usage
+
+### React/Next.js Integration
+
+```tsx
+import { react } from '@auth/sdk';
+const { useAuth } = react;
+
+function App() {
+  const { user, isAuthenticated, register, login, verify, logout } = useAuth({
+    baseUrl: 'http://localhost:7000', // Your auth service URL
+    localStorageKey: 'auth_token' // Optional, defaults to 'auth_token'
+  });
+
+  const handleRegister = async () => {
+    try {
+      // The SDK automatically detects the frontend base URL
+      // You can optionally override it by passing frontendBaseUrl
+      const response = await register({ 
+        name: 'John Doe',
+        email: 'user@example.com',
+        password: 'securepassword'
+        // frontendBaseUrl: 'https://myapp.com' // Optional: custom base URL for email verification links
+      });
+      console.log('Registration successful:', response.message);
+    } catch (error) {
+      console.error('Registration failed:', error);
+    }
+  };
+
+  // Email/Password Login
+  const handlePasswordLogin = async () => {
+    try {
+      const response = await login({ 
+        email: 'user@example.com',
+        password: 'securepassword'
+      });
+      console.log('Login successful:', response.message);
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
+  };
+
+  // Email/OTP Login - Step 1: Request OTP
+  const handleRequestOtp = async () => {
+    try {
+      const response = await login({ email: 'user@example.com' });
+      console.log('OTP sent:', response.message);
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
+  };
+
+  // Email/OTP Login - Step 2: Verify OTP
+  const handleVerifyOtp = async () => {
+    try {
+      const response = await login({ 
+        email: 'user@example.com', 
+        otp: '123456' 
+      });
+      console.log('Verification successful:', response.message);
+    } catch (error) {
+      console.error('Verification failed:', error);
+    }
+  };
+
+  if (isAuthenticated) {
+    return (
+      <div>
+        <h1>Welcome, {user?.name}!</h1>
+        <button onClick={logout}>Logout</button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <button onClick={handleRegister}>Register</button>
+      <button onClick={handlePasswordLogin}>Login with Password</button>
+      <button onClick={handleRequestOtp}>Request OTP</button>
+      <button onClick={handleVerifyOtp}>Verify OTP</button>
+    </div>
+  );
+}
+```
+
+### Node.js Integration
+
+```ts
+import { node } from '@auth/sdk';
+const { AuthClient } = node;
+
+const authClient = new AuthClient({
+  baseUrl: 'http://localhost:7000'
+});
+
+async function register() {
+  try {
+    const response = await authClient.register({ 
+      name: 'John Doe',
+      email: 'user@example.com',
+      password: 'securepassword',
+      frontendBaseUrl: 'https://myapp.com' // Optional: custom base URL for email verification links
+    });
+    console.log('Registration successful:', response.message);
+  } catch (error) {
+    console.error('Registration failed:', error);
+  }
+}
+
+// Email/Password Login
+async function passwordLogin() {
+  try {
+    const response = await authClient.login({ 
+      email: 'user@example.com',
+      password: 'securepassword'
+    });
+    console.log('Login successful:', response.message);
+    // Save token manually in Node.js environment
+    const token = response.token;
+  } catch (error) {
+    console.error('Login failed:', error);
+  }
+}
+
+// Email/OTP Login - Step 1: Request OTP
+async function requestOtp() {
+  try {
+    const response = await authClient.login({ email: 'user@example.com' });
+    console.log('OTP sent:', response.message);
+  } catch (error) {
+    console.error('Login failed:', error);
+  }
+}
+
+// Email/OTP Login - Step 2: Verify OTP
+async function verifyOtp() {
+  try {
+    const response = await authClient.login({ 
+      email: 'user@example.com', 
+      otp: '123456' 
+    });
+    
+    if (response.success) {
+      console.log('Verification successful:', response.message);
+      // Save token manually in Node.js environment
+      const token = response.token;
+    }
+  } catch (error) {
+    console.error('Verification failed:', error);
+  }
+}
+```
+
+### Pre-built UI Components
+
+The SDK includes pre-built UI components for common authentication flows with embedded styling:
+
+```tsx
+import { react } from '@auth/sdk';
+const { AuthFlow } = react;
+
+function LoginPage() {
+  const handleAuthComplete = () => {
+    // Redirect to dashboard
+    console.log('Authentication complete!');
+  };
+
+  return (
+    <AuthFlow onAuthComplete={handleAuthComplete} />
+  );
+}
+```
+
+You can also use individual components:
+
+```tsx
+import { react } from '@auth/sdk';
+const { LoginForm, RegisterForm, OtpForm } = react;
+
+function LoginPage() {
+  return (
+    <div>
+      <LoginForm 
+        onLoginSuccess={(email) => console.log('OTP sent to:', email)}
+        onRegisterClick={() => console.log('Navigate to registration')}
+      />
+    </div>
+  );
+}
+```
+
+**Note:** As of version 1.2.0, all styling is embedded directly in the components. No separate CSS imports are required!

package/dist/index.components.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+
+interface LoginFormProps {
+    onSuccess?: (response: {
+        message: string;
+        email?: string;
+        token?: string;
+        success: boolean;
+        user?: any;
+    }) => void;
+    onLoginSuccess?: (email: string, needsOtpVerification: boolean) => void;
+    onRegisterClick?: () => void;
+    showRegisterLink?: boolean;
+    config?: {
+        baseUrl?: string;
+    };
+    oauthProviders?: Array<'google' | 'github'>;
+    showOAuthButtons?: boolean;
+}
+declare const LoginForm: React.FC<LoginFormProps>;
+
+interface AuthConfig {
+    baseUrl: string;
+    localStorageKey?: string;
+    token?: string;
+    csrfEnabled?: boolean;
+}
+
+interface RegisterFormProps {
+    onRegisterSuccess?: () => void;
+    onLoginClick?: () => void;
+    showLoginLink?: boolean;
+    authConfig?: AuthConfig;
+    oauthProviders?: Array<'google' | 'github'>;
+    showOAuthButtons?: boolean;
+}
+declare const RegisterForm: React.FC<RegisterFormProps>;
+
+interface OtpFormProps {
+    email: string;
+    onVerifySuccess?: () => void;
+    onBackToLogin?: () => void;
+}
+declare const OtpForm: React.FC<OtpFormProps>;
+
+type AuthStep = 'login' | 'register' | 'otp';
+interface AuthFlowProps {
+    onAuthComplete?: () => void;
+    initialStep?: AuthStep;
+    showTitle?: boolean;
+}
+declare const AuthFlow: React.FC<AuthFlowProps>;
+
+interface EmailVerificationPageProps {
+    token: string;
+    onVerificationSuccess?: () => void;
+    onVerificationError?: (error: string) => void;
+    baseUrl?: string;
+}
+declare const EmailVerificationPage: React.FC<EmailVerificationPageProps>;
+
+export { AuthFlow, EmailVerificationPage, LoginForm, OtpForm, RegisterForm };