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!

Documentation

📚 Complete documentation is available at: https://ktw-auth-docs.netlify.app/

The documentation includes:

• Getting started guides
• API reference
• Component documentation
• Architecture overview
• Environment configuration
• Integration examples for React, Next.js, and Node.js

Additional Guides

• Avatar Uploader Update
• Avatar Upload Quickstart
• FileUp Integration
• Image Manager Integration
• Implementation Summary

Installation

npm install @auth/sdk
# or
yarn add @auth/sdk
# or
pnpm add @auth/sdk

Usage

React/Next.js Integration

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: '[email protected]',
        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: '[email protected]',
        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: '[email protected]' });
      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: '[email protected]', 
        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

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: '[email protected]',
      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: '[email protected]',
      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: '[email protected]' });
    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: '[email protected]', 
      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:

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:

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!