functions-auth

v1.0.2

Published

a month ago

FunctionsAuth JavaScript/TypeScript SDK — Passwordless Passkeys, Device Fingerprinting & Adaptive Risk Authentication

0High
0Medium
0Low

santoshpatelvns5

auth authentication passkey webauthn jwt session device-fingerprint risk-engine adaptive-security functions-auth

🔐 functions-auth

🌟 Why FunctionsAuth?

🔑 FIDO2 WebAuthn Passkeys: Native biometrics (TouchID, FaceID, YubiKey) built-in.
🎨 Pre-Built UI Components: Glassmorphic dark theme authentication widget embeddable in 1 line of code.
🔍 Device Fingerprinting: 10-signal SHA-256 canvas & WebGL trust verification.
⚡ Risk-Adaptive Security: 8-rule threat engine calculating real-time risk scores (0–100).
🔒 Token Binding & RTR: Automatic Token Rotation (RTR) 60 seconds before JWT expiry.
📦 Framework Agnostic: Native support for React, Next.js, Vue, Svelte, and Vanilla JS.

📦 Quick Installation

Install via your preferred package manager:

# npm
npm install functions-auth

# pnpm
pnpm add functions-auth

# yarn
yarn add functions-auth

🎨 Drop-In Authentication UI Component

functions-auth includes a pre-styled, fully customizable authentication component out-of-the-box.

⚛️ 1. React & Next.js Integration

import { useEffect, useRef } from 'react';
import { FunctionsAuth, renderAuthWidget } from 'functions-auth';

const auth = new FunctionsAuth({
  clientId: 'fa_client_prod_12345678',
  baseUrl: 'http://localhost:8080',
});

export default function AuthPage() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Mount drop-in authentication component
    const widget = renderAuthWidget(containerRef.current, {
      auth,
      mode: 'login', // 'login' | 'signup'
      accentColor: '#6366f1',
      socialProviders: ['google', 'github'],
      onSuccess: (session) => {
        console.log('Logged in successfully!', session.user);
        window.location.href = '/dashboard';
      },
      onError: (error) => {
        console.error('Auth failure:', error.message);
      },
    });

    return () => widget.destroy();
  }, []);

  return (
    <div className="min-h-screen flex items-center justify-center bg-zinc-950 p-6">
      <div ref={containerRef} className="w-full max-w-md" />
    </div>
  );
}

🌐 2. Vanilla JS & HTML CDN Integration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sign In – FunctionsAuth</title>
</head>
<body style="background: #090d16; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">

  <!-- Widget Target Container -->
  <div id="auth-widget"></div>

  <script type="module">
    import { FunctionsAuth, renderAuthWidget } from 'https://esm.run/functions-auth';

    const auth = new FunctionsAuth({
      clientId: 'fa_client_prod_12345678'
    });

    renderAuthWidget(document.getElementById('auth-widget'), {
      auth,
      socialProviders: ['google', 'github'],
      onSuccess: (session) => {
        alert('Welcome back, ' + session.user.email);
        window.location.href = '/dashboard';
      }
    });
  </script>
</body>
</html>

⚡ Programmatic Core API Usage

If you prefer building a custom UI, call the SDK methods directly:

import { FunctionsAuth } from 'functions-auth';

// 1. Initialize SDK Instance
const auth = new FunctionsAuth({
  clientId: 'fa_client_prod_12345678',
  baseUrl: 'http://localhost:8080',
  autoRefresh: true, // Automatically rotates tokens 60s before expiry
});

// 2. Register New User
await auth.signup({
  username: 'santosh_dev',
  email: '[email protected]',
  password: 'SuperSecurePassword123!',
  tenantId: 'default'
});

// 3. Log In with Email & Password
const session = await auth.login({
  usernameOrEmail: '[email protected]',
  password: 'SuperSecurePassword123!',
});

// 4. Retrieve Active Credentials
console.log('JWT Access Token:', auth.getToken());
console.log('Active User Profile:', auth.getUser());

// 5. Revoke Session & Logout
await auth.logout();

🛠️ API Reference & Methods

| Method | Description | Return Type | |---|---|---| | login(options) | Authenticates user & establishes session | Promise<AuthSession> | | signup(options) | Registers new tenant user | Promise<AuthSession> | | logout() | Clears local tokens & revokes active session | Promise<void> | | verify() | Validates current session with backend | Promise<{ valid: boolean }> | | refresh() | Rotates refresh token manually | Promise<AuthSession> | | getUser() | Returns current active user object | User \| null | | getToken() | Returns active JWT bearer access token | string \| null | | silentLogin() | Checks validity or auto-refreshes on load | Promise<AuthSession \| null> |

🔒 Session Security Architecture

sequenceDiagram
    participant App as Client Web App
    participant SDK as FunctionsAuth SDK
    participant API as Backend Auth Service
    participant DB as PostgreSQL Ledger

    App->>SDK: Initialize(clientId)
    App->>SDK: login(email, password)
    SDK->>API: POST /api/v1/auth/login
    API->>DB: Verify credentials & generate session
    DB-->>API: Tokens (AccessToken, RefreshToken)
    API-->>SDK: 200 OK + AuthSession
    SDK->>SDK: Store encrypted tokens
    SDK-->>App: Return User session

    Note over App,API: Automatic Token Rotation (RTR)
    SDK->>API: Auto-refresh 60s before expiry
    API->>DB: Invalidate old refresh token
    DB-->>API: Issue new token pair
    API-->>SDK: Rotate new RefreshToken

👤 Author & Maintainer

Created and maintained by Santosh Patel.

GitHub: @santoshpatel112
Repository: github.com/DevOps-Tally/Function
NPM Package: npmjs.com/package/functions-auth
Email: [email protected]

📝 License

Distributed under the MIT License. See LICENSE for details.